<script> function RGB2Color(r,g,b) { return '#' + byte2Hex(r%256) + byte2Hex(g%256) + byte2Hex(b%256); } function byte2Hex(n) { var nybHexString="0123456789ABCDEF"; return String(nybHexString.substr((n>>4) & 0x0F,1))+ nybHexString.substr(n & 0x0F,1); } function sin(x) { return Math.sin(x); } function f1(x,y) { color=Math.floor(256*(sin((x+f1_y*y)/width*25))); return color; } function f2(x,y,a,b) { var dist=(x-a)*(x-a)+(y-b)*(y-b); dist=(f2_dist_factor*dist)/width; value=Math.floor(256*(sin(dist/width))); return value; } function draw() { a=centerX+width*sin(6*c)*0.4; b=centerY+height*sin(17*c)*0.4; c=c+0.03; for (var x=0; x<width; x++) { for (var y=0; y<height; y++) { var value=f1_weight*f1(x,y)+f2_weight*f2(x,y,a,b); ctx.fillStyle=RGB2Color(value,1.5*value,0); ctx.fillRect(x,y,1,1); } } f1_weight+=f1_weight_direction; f2_weight+=f2_weight_direction; if (f1_weight<1 || f1_weight>3) { f1_weight_direction=-f1_weight_direction; } if (f2_weight<2 || f2_weight>3) { f2_weight_direction=-f2_weight_direction; } if (f2_dist_factor>50 || f2_dist_factor<1) { f2_dist_factor_inc=-f2_dist_factor_inc; } f2_dist_factor+=f2_dist_factor_inc; if (f1_y<-3 || f1_y>3) { f1_y_inc=-f1_y_inc; } f1_y=f1_y+f1_y_inc; requestAnimationFrame(draw,ctx); } var canvas=document.getElementById("screen"); var ctx=canvas.getContext("2d"); var width=canvas.width; var height=canvas.height; var imgData=ctx.getImageData(0,0,width,height); var centerX=width/2; var centerY=height/2; var color; var c=0; var a; var b; var f1_weight=0.5; var f2_weight=1; var f1_weight_direction=0.09; var f2_weight_direction=0.11; var f2_dist_factor=20; var f2_dist_factor_inc=2.5; var f1_y=1; var f1_y_inc=.14; draw(); </script>