Interference JS Demo

SDev.pro team sample

HTML

<canvas id="myCanvas" width="500" height="400">
Please use IE9, Chrome or Firefox 3+.
</canvas>

JavaScript

var elem = document.getElementById('myCanvas');
var mode = 1;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var context = null;

if (elem && elem.getContext) {
context = elem.getContext('2d');
}
var requested = false;
function drawScene(){
	if(!requested)
  	requestAnimationFrame(_drawScene);
  requested = true;
}    
function _drawScene(){
  requested = false;
  if (!context) 
  	return;
    
  var imgd = context.createImageData(500,400);
  var pix = imgd.data;
	var sqrt = Math.sqrt, pow = Math.pow, sin = Math.sin;
  for (var i = 0; i < 500; i += 1) {
      for (var j = 0; j < 400; j +=1){
        var val = sin(sqrt(pow(x1 - i,2)+pow(y1 - j,2))/10);
        val += sin(sqrt(pow(x2 - i,2)+pow(y2 - j,2))/10);
        
        val =val*127;    
        var index = 4*(i + 500 * j);
          pix[index] =  Math.max(0, -val);
          pix[index +1] = Math.max(0, val);
          pix[index +2] = 0;
          pix[index +3] = 255; // alpha channel

  	}
  }
  context.putImageData(imgd, 0, 0);      
  
}


    $(function(){
        drawScene();
        $(elem).click(function(e){
            debugger;
            if(mode == 1){
                x1 = e.pageX - this.offsetLeft;
                y1 = e.pageY - this.offsetTop;
 
                mode = 2;
            }else{
                x2 = e.pageX - this.offsetLeft;
                y2 = e.pageY - this.offsetTop;
                mode = 1;
            }
            drawScene();        
        }).mousemove(function(e){
            if(mode == 1){
                x1 = e.pageX - this.offsetLeft;
                y1 = e.pageY - this.offsetTop;
 
            }else{
                x2 = e.pageX - this.offsetLeft;
                y2 = e.pageY - this.offsetTop;
                
            }
            drawScene();        
        });
    });