<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>