Canvas diff

_.md

[ Launch: Canvas diff ] 6046990 by poezn

config.json

{"description":"Canvas diff","endpoint":"","display":"canvas","public":true,"require":[],"fileconfigs":{"inlet.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}},"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}

inlet.js

var c = tb.ctx;
var scaleFactor = 0.5;

var urls = ["https://s3.amazonaws.com/halftone-public/1944.png",
            "https://s3.amazonaws.com/halftone-public/2013.png"];


var getPixArray = function(drawing) {
  console.log(drawing);
  c.scale(scaleFactor, scaleFactor);
  c.drawImage(drawing0,0,0);
  var imgd = c.getImageData(0, 0, 640, 350);
  var pix = imgd.data;
  
  // Loop over each pixel and invert the color.
  for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i  ] = 255 - pix[i  ]; // red
      pix[i+1] = 255 - pix[i+1]; // green
      pix[i+2] = 255 - pix[i+2]; // blue
      // i+3 is alpha (the fourth element)
  }
}; 


var drawing0 = new Image();
var drawing1 = new Image();


drawing0.onload = getPixArray;
drawing0.onload = getPixArray;

drawing0.src = urls[0]; 
drawing1.src = urls[1];