scaler ascii

_.md

[ Launch: scaler ascii ] 5780169 by enjalot
[ Launch: scaler ] 5780132 by enjalot
[ Launch: scaler ] 5780057 by ejfox
[ Launch: scaler ] 5779793 by enjalot

ascii.html

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

config.json

{"description":"scaler ascii","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"scaler.js":{"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},"ascii.html":{"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/KZFPkvX.png"}

inlet.js

var display = d3.select("#display");
var data = [];
var cors = "http://www.corsproxy.com/"
var link = "si0.twimg.com/profile_images/712863751/lil-wayne-gq-2_normal.jpg"

var scale = d3.scale.linear()
.domain([0,78, 150, 200, 255])
.range(["w", "e", "e",  "z", "y"])

var scaler = d3.scaler()
.scale(scale);
var container = display.append("div")
.attr("id", "scaler")
.style("left", tributary.sw - 200 + "px");

container.call(scaler);

scaler.on("update", function() {
  scale.interpolate(function(a,b) {
    return function(t) {
      return [a,b][Math.round(t)];
    }
  })
  render();
  
})

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);
display.node().appendChild(tcanvas)
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);
  var pixels = tc.getImageData(0,0,W, H); //chrome will not fail
  process(pixels)
}
img.crossOrigin = '';
img.src = cors + link;

function process(pixels) {
  var colordata = pixels.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});
  }
  render();
}

function render() {
  var ps = display.select("#ascii").selectAll("p")
  .data(data)
  ps.enter()
  .append("p")
  ps.text(function(d) {
    //return asciiScale.invert(d.gray);
    return scale(d.gray)
  })
  .style({
    "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);
    }
  })

}

scaler.js

d3.scaler = function() {
  var scale;
  var height = 300;
  var max;
  var min;
  var selection;
  
  var dispatch = d3.dispatch("update");
  
  var drag = d3.behavior.drag()
  .on("drag", function(d,i) {    
    var y = getY(i);
    if(!y && y !== 0) return;
    
    var dy = d3.event.dy;
    y += dy;
    
    if(y > max) y = max;
    if(y < min) y = min;
    //move things around
    setY(i, y);
    //sort & reorder the domain and range
    var domain = scale.domain();
    var range = scale.range();
    var zipped = d3.zip(domain, range);
    zipped.sort(function(a,b) {
      return a[0] - b[0];
    })
    domain = zipped.map(function(d) { return d[0] })
    range = zipped.map(function(d) { return d[1] })
    scaler.update();
  })
  var scaler = function(g) {
    selection = g;
    scaler._update();
  }
  
  dispatch.on("update.internal", function() {
    scaler._update();
  });
  scaler._update = function() {
    selection.each(function() {
      var sel = d3.select(this);
      
      var domain = scale.domain();
      var range = scale.range();
      
      //background. TODO: use svg?
      var bg = sel.selectAll("div.background")
      .data([0])
      bg.enter().append("div").classed("background",true)
      bg.style({
        width: 10+"px",
        height: height+  "px",
        "background-color":"grey"
      })
      bg.on("dblclick", function() {
        var domain = scale.domain();
        var range = scale.range();
        var y = d3.mouse(this)[1];
        var i = d3.bisect(domain, y);
        domain.splice(i, 0, y);
        range.splice(i, 0, "");
        scaler.update();
      });
      
      //handle things
      var handles = sel.selectAll("div.handle")
      .data(domain)
      var handlesEnter = handles.enter().append("div").classed("handle", true);
	  handlesEnter.append("div").classed("line", true);
      //the input
      handlesEnter.append("input").classed("ascii", true)
      .on("mouseup", function() { this.select(); d3.event.cancelBubble = true; })
      .on("keyup", function(d,i) { 
        setX(i, this.value);
        scaler.update();
      })
      .attr("maxlength", 1);
      //the number
      handlesEnter.append("span.number")
      .classed("number", true)
      
      handlesEnter.call(drag)
      
      handles.style("top", function(d,i) {
        return getY(i) + "px";
      })
      handles.select(".number")
      .text(function(d,i) { 
        return getY(i)
      })
      handles.select(".ascii")
      .attr("value", function(d,i) {
        return getX(i);
      })

    })
  }
  
  scaler.scale = function(_) {
    if(!arguments.length) return scale;
    scale = _;
    max = d3.max(scale.domain());
    min = d3.min(scale.domain());
    return scaler;
  }
  
  function getY(i) {
    var domain = scale.domain();
    return domain[i];
  }
  function setY(i, v) {
    var domain = scale.domain();
    domain[i] = v;
  }
  function getX(i) {
    var range = scale.range();
    return range[i];
  }
  function setX(i, v) {
    var range = scale.range();
    range[i] = v;
  }
  
  d3.rebind(scaler, dispatch, "on", "update")
  return scaler;
}

style.css

#display {
overflow:scroll;
  background-color: #000;
}
#display p {
  margin: 0;
  padding: 0;
  line-height: 1em;
  display: inline-block;
  float:left;
}
#ascii {
  font-size: 13px;
  font-family: 'Courier New', monospace;
  letter-spacing: 4px;
}

canvas {
  position:absolute;
  top: 100px;
  right: 50px;;
}

#scaler {
  position:absolute;
  top: 100px;
  left: 100px;
  width: 100px;

}

.background {
  border: 1px solid #51A874;
  background-color: #000000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(255, 255, 255)));
  background-image: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
  background-image: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
  background-image: -o-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
  background-image: -ms-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
  background-image: linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#ffffff');

}

.handle {
  position: absolute;
  left: 7px;
}
.handle .line {
  width: 15px;
  border-top: 1px solid #13D661;
  border-bottom: 1px solid #0C7235;
  position:absolute;
  top: 16px;
  left: -7px;
}
input.ascii {
  border: none !important;
  font-size: 12px !important;
  width: 25px !important;
  border-radius: 0 !important;
  text-align: center;
  height: 20px;
  cursor: ns-resize;
}
.number {
  font-size: 12px;
  color: white;
  line-height: 1em;
  position:relative;
}