ascii img distort

_.md

[ Launch: ascii img distort ] 5650665 by enjalot
[ Launch: ascii img ] 5650648 by enjalot
[ Launch: ascii img ] 5650606 by enjalot
[ Launch: ascii img ] 5650597 by enjalot
[ Launch: ascii img ] 5650576 by enjalot
[ Launch: ascii img ] 5649949 by enjalot

config.json

{"description":"ascii img distort","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/cLOw4Xg.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/5IR3ZAs.png";
link = "sphotos-b.xx.fbcdn.net/hphotos-snc7/382186_10102679217214073_2128306817_n.jpg"
link = "sphotos-a.xx.fbcdn.net/hphotos-prn1/66647_10100361912007283_4113584_n.jpg"
//var img = document.getElementById("theimage");
//var W = img.width;
//var H = img.height;
var W = 400;//tributary.sw;
var H = 333;//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() {
  img.width = W;
  img.height = H;
  tc.drawImage(img, -33, -136);
  console.log("img dims", img.width, img.height);
  /*
  W = img.width;
  H = img.height;
  tcanvas.width = W;
  tcanvas.height = H; //same as the image
  */
  var data = tc.getImageData(0,0,W, H); //chrome will not fail

  console.log("W,H", W,H);
  console.log(data.data.length, data.data.length/64);
  render(data)
}
img.crossOrigin = '';
img.src = cors + link;

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");

var factor = 4;
//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 = "__";
    else if(gray > 200) character = "..";
    else if(gray > 175) character = "b";
    else if(gray > 150) character = "d";
    else if(gray > 125) character = "p";
    else if(gray > 50) character = "<";
    else character = ">"; //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;
}