

Boolean Hair Logic - petercooper
http://evilmartini.com/hairy-logic

======
jonafato
I'd like to see this adapted to express many facial hair styles.

~~~
mahmud
You know, I really wanted to beat someone to the punch and create a canvas toy
to do just that. Given two images of the same dimensions, render a bin-op of
their pixels, where "bin-op" is a boolean operation.

Fucked if I know what I am doing wrong, but I just can't modify the data array
of the canvas element's graphics context.imageData.

    
    
      var canvas, ctx;
      var image1, image2;
      var img_data1, img_data2;
      
      function load_images () {
          image1 = document.getElementById("image1");
          image2= document.getElementById("image2");
      }
      
      
      function load() {
          load_images();
          
          canvas = document.getElementById("cv");
          canvas.height = Math.max(image1.height, image2.height);
          canvas.width =  Math.max(image1.width, image2.width);
          ctx = canvas.getContext("2d");
          
          var tmp_canvas = document.createElement('CANVAS');
          tmp_canvas.height = canvas.height;
          tmp_canvas.width = canvas.width;
          var tmp_ctx = tmp_canvas.getContext("2d");
        
          img_data1 = ctx.getImageData(0, 0, canvas.width, canvas.height);
          img_data2 = tmp_ctx.getImageData(0, 0, canvas.width, canvas.height);
          ctx.drawImage(image1, 0, 0);
      
      
          // seems like I just can't modify the array data and see it updated on the display
          for(var i = 0; i <= img_data1.width; i++) {
          	for (var j = 0; j <= img_data1.height; j++) {
          	    var idx = 4 * (j * img_data1.width + i);
      	    img_data1.data[idx] = 0;
          	    img_data1.data[idx+1] = 0;
          	    img_data1.data[idx+2] = 0;
      	    img_data1.data[idx+3] = 0;
          	}
          }
      }

~~~
mahmud
The call I am missing is canvas.putImageData(); and that seems like one of
those HTML5 features that works in theory, but hardly in practice.

