me ascii

_.md

[ Launch: ascii img chinese EJ2 ] 5655290 by enoex
[ Launch: ascii img chinese EJ2 ] 5653820 by enjalot
[ Launch: ascii img chinese zeffii ] 5653815 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":"me ascii","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}

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 = "si0.twimg.com/profile_images/3686288770/de8db44dc65ecf4371a418a2b4f6014d_bigger.png";

var asciiScale = d3.scale.ordinal()
.domain(['Q', '0', "o", "x" ,"."])
.range([0, 50,  121, 200, 255])

.domain([ "♞", "♟", "♜", "♣", "♕", "♠", "☁", "♦"])
//.range([0, 50, 127, 150, 175, 200, 230, 250, 255])

var colorScale = d3.scale.linear()
.interpolate(d3.interpolateHsl)
.range(["#FF2727", "#03750C", "#00AD53"])

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

//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 display = d3.select("#display")
display.node().appendChild(tcanvas)
//drawing the image on the canvas
//tc.drawImage(img, 0, 0, W, H);

var img = new Image();
img.onload = function() {
  W = img.width;
  H = img.height;
  tcanvas.width = W;
  tcanvas.height = H; //same as the image
  
  tc.drawImage(img, 0, 0);
  console.log("img dims", img.width, img.height);
  /*
  W = img.width;
  H = img.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 = "";
  
  var data = []  
  
  for(var i = 0; i < colordata.length; i = i+4)
  {
      r = colordata[i];
      g = colordata[i+1];
      b = colordata[i+2];
      a = colordata[i+3]
      //converting the pixel into grayscale
      gray = r*0.2126 + g*0.7152 + b*0.0722;
      data.push({r: r, g:g, b:b, a:a, gray: gray});
  }

  colorScale.domain([0, data.length]);
  display.select("#ascii").selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(function(d) {
    return asciiScale.invert(d.gray);
  })
  .style({
    "width": "10px",
    "clear": function(d,i) {
      if(i != 0 && i%W == 0)
        return "left";
    },
    "color": function(d,i) {
      return "rgba(" + [d.r, d.g, d.b, d.a] + ")";
      //return colorScale(i);
    }
  })

  
  
  /*
      //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;
}
#display p {
  margin: 0;
  padding: 0;
  line-height: 1em;
  display: inline-block;
  float:left;
}
#ascii {
  font-size: 11px;
  font-family: 'Courier New', monospace;
  line-height: 1em;
}

canvas {
  position:absolute;
  top: 50px;
  left: 0;
}