iloire/canvas_processing.html

## canvas_processing.html
<!--
Taken form: http://javisantana.com/a/hello_spainjs.html
Original author: Javier Santana.

Some code cleaning, added comments to make it instructional: Iván Loire
-->
<html>
  <head>
    <style>
      html, body {
        padding: 0; margin: 0; height: 100%;
      }
      canvas {
        position: absolute;
      }
    </style>
  </head>

  <body>
    <canvas id="c2"></canvas>
    <canvas id="c"></canvas>
  </body>

  <script>

    //create canvas for painting
    var canvas = document.getElementById('c');
    var ctx = canvas.getContext('2d');

    //create canvas for holding the image
    var canvas2 = document.getElementById('c2');
    var ctx2 = canvas2.getContext('2d');

    //set and hold dimensions
    var w = canvas.width = canvas2.width = innerWidth;
    var h = canvas.height = canvas2.height = innerHeight;

    function mov(v, a) {
      v.x = a.x;
      v.y = a.y;
    }

    function point(x, y) { return {x:x,y:y}}

    var img = new Image();
    img.src = './cartodb.png'

    img.onload = function() {
      ctx2.fillStyle = '#FFF';
      ctx2.fillRect(0, 0, w, h);
      ctx2.fillStyle = '#000';

      ctx2.font = 'bold 90px Helvetica'
      ctx2.fillText("Hello #spainjs", (w>>1) - 300, (h>>1) + 150);

      var img_w = 700; //main image width

      //calc positions, rounding to integer (by using bitwise shift).
      //some canvas performance tips: http://seb.ly/2011/02/html5-canvas-sprite-optimisation/
      var x_pos_img = (w>>1) - (img_w>>1);
      var y_pos_img = (h>>1) - 250;

      ctx2.drawImage(img, x_pos_img, y_pos_img, img_w, img_w*0.5)
      var data = ctx2.getImageData(0, 0, w, h).data;

      //do we have image or water in the underlaying canvas?
      function water(x, y) {
        x = x>>0;//bitwise shift for rounding
        y = y>>0;
        return data[(4*(y*w + x))] > 0; //check if alpha value for that point is not zero
      }

      //Hide image
      ctx2.fillStyle = '#FFF';
      ctx2.fillRect(0, 0, w, h);

      function line(x, y) {
        var linep = point(x, y);
        var oldp = point();
        mov(oldp, linep);

        this.update = function() {
          ctx.beginPath();
          ctx.moveTo(oldp.x, oldp.y);
          ctx.lineTo(linep.x, linep.y);
          ctx.stroke();

          //save old point for next interaction
          mov(oldp, linep);

          //set new point for next interaction
          var v = point(0, 0);
          M = 10; //line size
          do {
            //find a new point that is not water close to the last one
            v.x = linep.x + M*(Math.random() - 0.5);
            v.y = linep.y + M*(Math.random() - 0.5);
          } while(water(v.x, v.y))
          mov(linep, v);
        }
      }

      var lines = [];
      c = 710;
      while(c) {
        var x = Math.random()*w;
        var y = Math.random()*h;

        if(!water(x, y)) { //this point belongs to and actual color in the underlaying image.
          lines.push(new line(x, y));
          c--;
        }
      }
      ctx.strokeStyle = 'rgba(0, 00, 0, 0.1)';

      (function loop() {
        for(var i = 0; i < lines.length; ++i) {
          lines[i].update();
        }
        setTimeout(loop, 60);
      })();
    }

  </script>
</html>
	<!--
	Taken form: http://javisantana.com/a/hello_spainjs.html
	Original author: Javier Santana.

	Some code cleaning, added comments to make it instructional: Iván Loire
	-->
	<html>
	<head>
	<style>
	html, body {
	padding: 0; margin: 0; height: 100%;
	}
	canvas {
	position: absolute;
	}
	</style>
	</head>

	<body>
	<canvas id="c2"></canvas>
	<canvas id="c"></canvas>
	</body>

	<script>

	//create canvas for painting
	var canvas = document.getElementById('c');
	var ctx = canvas.getContext('2d');

	//create canvas for holding the image
	var canvas2 = document.getElementById('c2');
	var ctx2 = canvas2.getContext('2d');

	//set and hold dimensions
	var w = canvas.width = canvas2.width = innerWidth;
	var h = canvas.height = canvas2.height = innerHeight;

	function mov(v, a) {
	v.x = a.x;
	v.y = a.y;
	}

	function point(x, y) { return {x:x,y:y}}

	var img = new Image();
	img.src = './cartodb.png'

	img.onload = function() {
	ctx2.fillStyle = '#FFF';
	ctx2.fillRect(0, 0, w, h);
	ctx2.fillStyle = '#000';

	ctx2.font = 'bold 90px Helvetica'
	ctx2.fillText("Hello #spainjs", (w>>1) - 300, (h>>1) + 150);

	var img_w = 700; //main image width

	//calc positions, rounding to integer (by using bitwise shift).
	//some canvas performance tips: http://seb.ly/2011/02/html5-canvas-sprite-optimisation/
	var x_pos_img = (w>>1) - (img_w>>1);
	var y_pos_img = (h>>1) - 250;

	ctx2.drawImage(img, x_pos_img, y_pos_img, img_w, img_w*0.5)
	var data = ctx2.getImageData(0, 0, w, h).data;

	//do we have image or water in the underlaying canvas?
	function water(x, y) {
	x = x>>0;//bitwise shift for rounding
	y = y>>0;
	return data[(4(yw + x))] > 0; //check if alpha value for that point is not zero
	}

	//Hide image
	ctx2.fillStyle = '#FFF';
	ctx2.fillRect(0, 0, w, h);

	function line(x, y) {
	var linep = point(x, y);
	var oldp = point();
	mov(oldp, linep);

	this.update = function() {
	ctx.beginPath();
	ctx.moveTo(oldp.x, oldp.y);
	ctx.lineTo(linep.x, linep.y);
	ctx.stroke();

	//save old point for next interaction
	mov(oldp, linep);

	//set new point for next interaction
	var v = point(0, 0);
	M = 10; //line size
	do {
	//find a new point that is not water close to the last one
	v.x = linep.x + M*(Math.random() - 0.5);
	v.y = linep.y + M*(Math.random() - 0.5);
	} while(water(v.x, v.y))
	mov(linep, v);
	}
	}

	var lines = [];
	c = 710;
	while(c) {
	var x = Math.random()*w;
	var y = Math.random()*h;

	if(!water(x, y)) { //this point belongs to and actual color in the underlaying image.
	lines.push(new line(x, y));
	c--;
	}
	}
	ctx.strokeStyle = 'rgba(0, 00, 0, 0.1)';

	(function loop() {
	for(var i = 0; i < lines.length; ++i) {
	lines[i].update();
	}
	setTimeout(loop, 60);
	})();
	}

	</script>
	</html>