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 = 100;
var y1 = 300;
var x2 = 300;
var y2 = 100;
var x3 = 100;
var y3 = 100;
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;
sin = Math.sin;
cos = Math.cos;
sqrt = Math.sqrt;
pow = Math.pow;
Pi = Math.PI;

var x,y;

for (var i = 0; i < 500; i += 1) {
    for (var j = 0; j < 400; j +=1){
    
    var kcx,ksx,kcy,ksy;
    kcx = 0;
    ksx = 0;
    kcy = 0;
    ksy = 0;
    for(var k = 0; k < 3; k++)
    {
			if(k == 0){x = x1; y = y1; fz = Pi;}
			else if(k == 1){x = x2; y = y2; fz = Pi;}
      else if(k == 2){x = x3; y = y3; fz = Pi;}
    	dx = x - i;
      dy = y - j;
      var rr = pow(dx, 2) + pow(dy, 2);
      var kx = dx / rr;
      var ky = dy / rr;
      var fs = sqrt(rr) / 10;
      kcx += cos(fs + fz) * kx;
      ksx += sin(fs + fz) * kx;
      kcy += cos(fs + fz) * ky;
      ksy += sin(fs + fz) * ky;
    }
    
    valx = sqrt(pow(kcx, 2) + pow(ksx, 2));    
    valy = sqrt(pow(kcy, 2) + pow(ksy, 2));    
    valz = sqrt(pow(kcx, 2) + pow(ksx, 2) + pow(kcy, 2) + pow(ksy, 2));
    valn = 1000;
    
    //if(j > 200) {valy = valz; valx = valz;}
    if(valz < 0.01 && valz > 0.008) {valy = 0.05;}
    //if(valz < 0.025 && valz > 0.02) {valx = 0.05;}
    
    var index = 4*(i + 500 * j);
      pix[index] =  valy * valn + 16;
      pix[index +1] = valz * valn + 16;
      pix[index +2] = valx * valn + 16;
      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{
                x3 = e.pageX - this.offsetLeft;
                y3 = e.pageY -...