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');
}

function drawScene(){
    
if (context) {
var imgd = context.createImageData(500,400);
var pix = imgd.data;

for (var i = 0; i < 500; i += 1) {
    for (var j = 0; j < 400; j +=1){
    var val = Math.sin(Math.sqrt(Math.pow(x1 - i,2)+Math.pow(y1 - j,2))/10);
    val += Math.sin(Math.sqrt(Math.pow(x2 - i,2)+Math.pow(y2 - j,2))/10);
    val =val*68+127;    
    var index = 4*(i + 500 * j);
      pix[index] =  val;
      pix[index +1] = val;
      pix[index +2] = val;
      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();        
        
        });
    });