ascii img

_.md

[ Launch: ascii img ] 5650576 by enjalot
[ Launch: ascii img ] 5649949 by enjalot

config.json

{"description":"ascii img","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"img.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ENkZuAF.png"}

img.html

<img id="theimage" src="">

<div id="container">
  <pre id="ascii">
  </pre>
</div>

inlet.js

//ascii artify. from: http://thecodeplayer.com/walkthrough/cool-ascii-animation-using-an-image-sprite-canvas-and-javascript

/* stupid cross domain security policy

*/

var cors = "http://www.corsproxy.com/"
var link = "i.imgur.com/Nlc35.gif";

//var img = document.getElementById("theimage");
//var W = img.width;
//var H = img.height;
var W = tributary.sw;
var H = tributary.sh;

//temporary canvas for pixel processing
var tcanvas = document.createElement("canvas");
tcanvas.width = W;
tcanvas.height = H; //same as the image
var tc = tcanvas.getContext("2d");
//painting the canvas white before painting the image to deal with pngs
tc.fillStyle = "white";
tc.fillRect(0, 0, W, H);


//drawing the image on the canvas
//tc.drawImage(img, 0, 0, W, H);

var img = new Image();
img.onload = function() {
    tc.drawImage(img, 0, 0);
    originalImageData = tc.getImageData(0,0,W, H); //chrome will not fail
    render(originalImageData)
}
img.crossOrigin = '';

img.src = cors + 'fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash4/391499_10102076583471923_507450767_n.jpg';

function render(pixels) {

//accessing pixel data
//var pixels = tc.getImageData(0, 0, W, H);
var colordata = pixels.data;
//every pixel gives 4 integers -> r, g, b, a
//so length of colordata array is W*H*4
var ascii = document.getElementById("ascii");

//some variables
var r, g, b, gray;
var character, line = "";
for(var i = 0; i < colordata.length; i = i+4)
{
    r = colordata[i];
    g = colordata[i+1];
    b = colordata[i+2];
    //converting the pixel into grayscale
    gray = r*0.2126 + g*0.7152 + b*0.0722;
    //overwriting the colordata array with grayscale values
    //colordata[i] = colordata[i+1] = colordata[i+2] = gray;
    
    //text for ascii art.
    //blackish = dense characters like "W", "@"
    //whitish = light characters like "`", "."
    if(gray > 250) character = " "; //almost white
    else if(gray > 230) character = "o";
    else if(gray > 200) character = "o";
    else if(gray > 175) character = "x";
    else if(gray > 150) character = "x";
    else if(gray > 125) character = "x";
    else if(gray > 50) character = "X";
    else character = "O"; //almost black
    
    //newlines and injection into dom
    if(i != 0 && (i/4)%W == 0) //if the pointer reaches end of pixel-line
    {
        ascii.appendChild(document.createTextNode(line));
        //newline
        ascii.appendChild(document.createElement("br"));
        //emptying line for the next row of pixels.
        line = "";
    }
    
    line += character;
}
}

style.css

#display {
overflow:scroll;
}

#ascii {
  font-size: 5px;
  font-family: monospace;
  line-height: 1em;
}