You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

292 lines
6.5 KiB
JavaScript

4 years ago
/**
* Ascii generation is based on http://www.nihilogic.dk/labs/jsascii/
* Maybe more about this later with a blog post at http://lab4games.net/zz85/blog
*
* 16 April 2012 - @blurspline
*/
var AsciiEffect = function ( renderer, charSet, options ) {
// its fun to create one your own!
charSet = ( charSet === undefined ) ? ' .:-=+*#%@' : charSet;
// ' .,:;=|iI+hHOE#`$';
// darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
// ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');
if ( ! options ) options = {};
// Some ASCII settings
var bResolution = ! options[ 'resolution' ] ? 0.15 : options[ 'resolution' ]; // Higher for more details
var iScale = ! options[ 'scale' ] ? 1 : options[ 'scale' ];
var bColor = ! options[ 'color' ] ? false : options[ 'color' ]; // nice but slows down rendering!
var bAlpha = ! options[ 'alpha' ] ? false : options[ 'alpha' ]; // Transparency
var bBlock = ! options[ 'block' ] ? false : options[ 'block' ]; // blocked characters. like good O dos
var bInvert = ! options[ 'invert' ] ? false : options[ 'invert' ]; // black is white, white is black
var strResolution = 'low';
var width, height;
var domElement = document.createElement( 'div' );
domElement.style.cursor = 'default';
var oAscii = document.createElement( "table" );
domElement.appendChild( oAscii );
var iWidth, iHeight;
var oImg;
this.setSize = function ( w, h ) {
width = w;
height = h;
renderer.setSize( w, h );
initAsciiSize();
};
this.render = function ( scene, camera ) {
renderer.render( scene, camera );
asciifyImage( renderer, oAscii );
};
this.domElement = domElement;
// Throw in ascii library from http://www.nihilogic.dk/labs/jsascii/jsascii.js
/*
* jsAscii 0.1
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* MIT License [http://www.nihilogic.dk/licenses/mit-license.txt]
*/
function initAsciiSize() {
iWidth = Math.round( width * fResolution );
iHeight = Math.round( height * fResolution );
oCanvas.width = iWidth;
oCanvas.height = iHeight;
// oCanvas.style.display = "none";
// oCanvas.style.width = iWidth;
// oCanvas.style.height = iHeight;
oImg = renderer.domElement;
if ( oImg.style.backgroundColor ) {
oAscii.rows[ 0 ].cells[ 0 ].style.backgroundColor = oImg.style.backgroundColor;
oAscii.rows[ 0 ].cells[ 0 ].style.color = oImg.style.color;
}
oAscii.cellSpacing = 0;
oAscii.cellPadding = 0;
var oStyle = oAscii.style;
oStyle.display = "inline";
oStyle.width = Math.round( iWidth / fResolution * iScale ) + "px";
oStyle.height = Math.round( iHeight / fResolution * iScale ) + "px";
oStyle.whiteSpace = "pre";
oStyle.margin = "0px";
oStyle.padding = "0px";
oStyle.letterSpacing = fLetterSpacing + "px";
oStyle.fontFamily = strFont;
oStyle.fontSize = fFontSize + "px";
oStyle.lineHeight = fLineHeight + "px";
oStyle.textAlign = "left";
oStyle.textDecoration = "none";
}
var aDefaultCharList = ( " .,:;i1tfLCG08@" ).split( "" );
var aDefaultColorCharList = ( " CGO08@" ).split( "" );
var strFont = "courier new, monospace";
var oCanvasImg = renderer.domElement;
var oCanvas = document.createElement( "canvas" );
if ( ! oCanvas.getContext ) {
return;
}
var oCtx = oCanvas.getContext( "2d" );
if ( ! oCtx.getImageData ) {
return;
}
var aCharList = ( bColor ? aDefaultColorCharList : aDefaultCharList );
if ( charSet ) aCharList = charSet;
var fResolution = 0.5;
switch ( strResolution ) {
case "low" : fResolution = 0.25; break;
case "medium" : fResolution = 0.5; break;
case "high" : fResolution = 1; break;
}
if ( bResolution ) fResolution = bResolution;
// Setup dom
var fFontSize = ( 2 / fResolution ) * iScale;
var fLineHeight = ( 2 / fResolution ) * iScale;
// adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.
var fLetterSpacing = 0;
if ( strResolution == "low" ) {
switch ( iScale ) {
case 1 : fLetterSpacing = - 1; break;
case 2 :
case 3 : fLetterSpacing = - 2.1; break;
case 4 : fLetterSpacing = - 3.1; break;
case 5 : fLetterSpacing = - 4.15; break;
}
}
if ( strResolution == "medium" ) {
switch ( iScale ) {
case 1 : fLetterSpacing = 0; break;
case 2 : fLetterSpacing = - 1; break;
case 3 : fLetterSpacing = - 1.04; break;
case 4 :
case 5 : fLetterSpacing = - 2.1; break;
}
}
if ( strResolution == "high" ) {
switch ( iScale ) {
case 1 :
case 2 : fLetterSpacing = 0; break;
case 3 :
case 4 :
case 5 : fLetterSpacing = - 1; break;
}
}
// can't get a span or div to flow like an img element, but a table works?
// convert img element to ascii
function asciifyImage( canvasRenderer, oAscii ) {
oCtx.clearRect( 0, 0, iWidth, iHeight );
oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
var oImgData = oCtx.getImageData( 0, 0, iWidth, iHeight ).data;
// Coloring loop starts now
var strChars = "";
// console.time('rendering');
for ( var y = 0; y < iHeight; y += 2 ) {
for ( var x = 0; x < iWidth; x ++ ) {
var iOffset = ( y * iWidth + x ) * 4;
var iRed = oImgData[ iOffset ];
var iGreen = oImgData[ iOffset + 1 ];
var iBlue = oImgData[ iOffset + 2 ];
var iAlpha = oImgData[ iOffset + 3 ];
var iCharIdx;
var fBrightness;
fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255;
// fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;
if ( iAlpha == 0 ) {
// should calculate alpha instead, but quick hack :)
//fBrightness *= (iAlpha / 255);
fBrightness = 1;
}
iCharIdx = Math.floor( ( 1 - fBrightness ) * ( aCharList.length - 1 ) );
if ( bInvert ) {
iCharIdx = aCharList.length - iCharIdx - 1;
}
// good for debugging
//fBrightness = Math.floor(fBrightness * 10);
//strThisChar = fBrightness;
var strThisChar = aCharList[ iCharIdx ];
if ( strThisChar === undefined || strThisChar == " " )
strThisChar = "&nbsp;";
if ( bColor ) {
strChars += "<span style='"
+ "color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");"
+ ( bBlock ? "background-color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");" : "" )
+ ( bAlpha ? "opacity:" + ( iAlpha / 255 ) + ";" : "" )
+ "'>" + strThisChar + "</span>";
} else {
strChars += strThisChar;
}
}
strChars += "<br/>";
}
oAscii.innerHTML = "<tr><td>" + strChars + "</td></tr>";
// console.timeEnd('rendering');
// return oAscii;
}
// end modified asciifyImage block
};
export { AsciiEffect };