1 var counter = 0;

     2 

     3 var PIXEL_SIZE = 4;

     4 

     5 var temp_1 = 0;

     6 

     7 function init()

     8 {

     9     setInterval('render()',50);

    10 }

    11 

    12 function dist(a, b, c, d)

    13 {

    14     return Math.sqrt((a - c) * (a - c) + (b - d) * (b - d));

    15 }

    16 

    17 

    18 function render()

    19 {

    20     var canvas = document.getElementById('tutorial');

    21     canvas.resize(128, 128);

    22     var ctx = canvas.getContext('2d');

    23     ctx.save();

    24 

    25     var time = counter * 5;

    26 

    27 

    28     for( y = 0; y < 128; y+=PIXEL_SIZE) {

    29 	for( x = 0 ; x < 128; x+=PIXEL_SIZE) {

    30 	    

    31 	    

    32 	    var temp_val = Math.floor(Math.sin(dist(x + time, y, 128.0, 128.0) / 8.0)

    33 				      + Math.sin(dist(x, y, 64.0, 64.0) / 8.0)

    34 				      + Math.sin(dist(x, y + time / 7, 192.0, 64) / 7.0)

    35 				      + Math.sin(dist(x, y, 192.0, 100.0) / 8.0));

    36 	    

    37 	    

    38 	    

    39 	    

    40 	    var temp_col = Math.floor((2 + temp_val) * 50);

    41 	    

    42 	    var rand_red = temp_col * 3;

    43 	    var rand_green = temp_col  ;

    44 	    var rand_blue = 128 - temp_col;

    45 

    46 	    ctx.fillStyle = "rgb("+rand_red+","+rand_green+","+rand_blue+")";

    47 

    48 	    ctx.fillRect(x,y,PIXEL_SIZE,PIXEL_SIZE);

    49 	}

    50     }

    51 

    52 

    53     ctx.restore();

    54     counter++;

    55 

    56 }

    57 

    58 init();