ascii img chinese nate

_.md

[ Launch: ascii img chinese nate ] 5650826 by enjalot
[ Launch: ascii img chinese EJ ] 5650770 by enjalot
[ Launch: ascii img chinese scale ] 5650748 by enjalot
[ Launch: ascii img chinese ] 5650680 by enjalot
[ 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 chinese nate","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/JqNoQR3.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"
//link = "si0.twimg.com/profile_images/1597832150/photo_normal.jpg"
//link = "si0.twimg.com/profile_images/3283570786/2c8b223b3f1dc83936e0191f61da111f_normal.png"
var asciiScale = d3.scale.ordinal()
.domain(['我', '你', "大", "一" ,"。"])
.range([0, 50,  121, 200, 255])

//.domain(['我', '你', '有', "不", "大", "又", "一" ,"。"])
//.range([0, 50, 127, 150, 175, 200, 230, 250, 255])


//var img = document.getElementById("theimage");
//var W = img.width;
//var H = img.height;
var maxWidth = 200; //tributary.sw;
var maxHeight = 300;//tributary.sh;
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);

var canvasCopy = document.createElement("canvas");
var copyCtx = canvasCopy.getContext("2d");


d3.select("#display").node().appendChild(tcanvas)
//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);
  console.log("img dims", img.width, img.height);
  
  var ratio = 1;

  if(img.width > maxWidth)
    ratio = maxWidth / img.width;
  else if(img.height > maxHeight)
    ratio = maxHeight / img.height;

  canvasCopy.width = img.width;
  canvasCopy.height = img.height;
  copyCtx.drawImage(img, 0, -100);

  W = tcanvas.width = img.width * ratio;
  H = tcanvas.height = img.height * ratio;
  tc.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, tcanvas.width, tcanvas.height);
  
  
  
  
  var data = tc.getImageData(0,0,W, H); //chrome will not fail
  console.log("W,H", W,H);
  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");
  


asciiScale.invert = function(x) {
   return this.domain()[d3.bisect(this.range(), x) - 1];
}
//console.log(asciiScale.invert(212));
  

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 "`", "."
    character = asciiScale.invert(gray);
    
    //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;
}

#container {
  width: 300%
}
#ascii {
  width: 100%;
  text-wrap: none;
  font-size: 8px;
  font-family: monospace;
  line-height: 1em;
}