three.js/examples/js/effects/AsciiEffects.js

/*
 * @author zz85 / https://github.com/zz85 
 *
 * Usage: Just replace your CanvasRenderer / WebGLRenderer with AsciiRenderer. The rest is magic.
 *
 * 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
 */
  
THREE.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';

	renderer = (renderer === undefined) ? THREE.CanvasRenderer : renderer; //THREE.WebGLRenderer 
	var canvasRenderer = new renderer();
	var width, height;

	var domElement = document.createElement('div');
	var oAscii = document.createElement("table");
	domElement.appendChild(oAscii);

	var iWidth, iHeight;
	var oImg;

	this.setSize = function(w, h) {
		width = w;
		height = h;
		canvasRenderer.setSize( w, h );

		initAsciiSize();

	};


	this.render = function() {
		canvasRenderer.render.apply(canvasRenderer, arguments);
		asciifyImage(canvasRenderer, 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, [email protected], 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 = canvasRenderer.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 = canvasRenderer.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

	
};