D3 Examples - Nintendo pixelation

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script src="nes-palette.js"></script>
<script type="text/javascript">
​
var width = 480,
    height = 640,
    pixelSize = 4,
    batchSize = pixelSize * 2,
    imageData;
​
nesColors = nesColors.map(rgbToLab);
​
var ctx = d3.select("body").append("canvas")
    .attr("width",width * 2)
    .attr("height",height)
    .node()
    .getContext("2d");
​
var img = new Image();
​
var batches = [];
​
d3.range(0,width,batchSize).map(function(x){
  d3.range(0,height,batchSize).map(function(y){
    batches.push({x: x, y: y});
  });
});
​
d3.shuffle(batches);
​
img.onload = function() {
​
  ctx.drawImage(img,0,0,width,height);
​
  imageData = ctx.getImageData(0,0,width,height);
​
  ctx.putImageData(imageData,width,0);
​
  setTimeout(processBatch,500);
​
};
​
img.src = "magritte.jpg";
​
d3.select(self.frameElement).style("height", height + "px");
​
// Process one batch of pixels
function processBatch() {
​
  var batch = batches.pop();
​
  d3.range(0,batchSize,pixelSize).forEach(function(x){
    d3.range(0,batchSize,pixelSize).forEach(function(y){
      processPixel(batch.x + x,batch.y + y);
    });
  });
​
  // Repaint occasionally
  if (batches.length % 12 === 1) {
    ctx.putImageData(imageData,width,0);
    requestAnimationFrame(processBatch);
  } else if (batches.length) {
    processBatch();
  }
​
  // Could do a second pass to re-round colors to most common results
​
}
​
// Average sub-pixels, update each one to the collective average
function processPixel(px,py) {
​
  var indices = [];
​
  d3.range(pixelSize).map(function(x){
    d3.range(pixelSize).map(function(y){
      indices.push(4 * ((py + y) * width + px + x));
    });
  });
​
  var average = averageColor(indices.map(function(i){
    return imageData.data.slice(i,i + 3);
  }));
​
  indices.forEach(function(i){
​
    for (var j = 0; j < 4; j++) {
      imageData.data[i + j] = average[j];
    }
​
  });
​
}
​
// Average colors, then round to nearest in palette
function averageColor(colors) {
​
  var lab = colors.map(rgbToLab);
​
  var average = d3.range(3).map(function(i){
    return d3.mean(lab.map(function(color){
      return color[i];
    }));
  });
​
  var closest = closestPoint(average,nesColors);
​
  var rgb = d3.lab.apply(null,closest).rgb();
​
  return [rgb.r,rgb.g,rgb.b,255];
​
}
​
// Closest point from list - faster than sort?
function closestPoint(point,list) {
​
  var minDistance = Infinity,
      value;
​
  list.forEach(function(p){
    var distance = euclidean(point,p);
    if (distance < minDistance) {
      minDistance = distance;
      value = p;
    }
  });
​
  return value;
​
};
​
// Distance between n-dimensional points
function euclidean(a,b) {
​
  var sum = 0;
​
  a.forEach(function(val,i){
    sum += Math.pow(b[i] - val,2);
  });
​
  return Math.sqrt(sum);
​
}
​
function rgbToLab(rgb) {
​
  var lab = d3.lab(d3.rgb.apply(null,rgb));
​
  return [lab.l,lab.a,lab.b];
​
}
​
</script>
​
    