gabonator · June 15, 2013 08:03
diff --git a/ball.html b/ball.html
 <html>
 <body bgcolor="black">
 <canvas id="canvas" style="border:1px #808080 dashed"></canvas>

 <script language="javascript">
 var w = 128;
 var h = 128;
 var can = document.getElementById("canvas");
 var ctx = can.getContext('2d');
 can.width = w;
 can.height = h;
 var data = ctx.createImageData(w, h);

 var cx = w/2;  	// center
 var cy = h/2;    
 var gx = w*0.6;	// glow
 var gy = h*0.7;
 var sx = w*0.7; // shadow
 var sy = h*0.8;

 function render(mat)
 {
  var i = 0;
  for (y=0; y<h; y++)
    for (x=0; x<w; x++, i+=4)
  	{
  		var d = (x-cx)*(x-cx) + (y-cy)*(y-cy);

  		d = Math.sqrt( d ) / 60;
  		if (d>1)
  			d = 1;
  		d = 1-d;
  		d *= 20;
  		if (d>1)
  			d = 1;

  		var c = (x-gx)*(x-gx) + (y-gy)*(y-gy);
  		c = Math.sqrt( c ) / 70;
  		c = c*c;
  		if (c>1)
  			c = 1;		

  		var s = (x-sx)*(x-sx) + (y-sy)*(y-sy);
  		s = Math.sqrt( s ) / 70;
  		if (s>1)
  			s = 1;
  		s = 1-s;

      data.data[i+0] = mat[0][0] + mat[0][1]*c + mat[0][2]*s;
      data.data[i+1] = mat[1][0] + mat[1][1]*c + mat[1][2]*s;
      data.data[i+2] = mat[2][0] + mat[2][1]*c + mat[2][2]*s;
      data.data[i+3] = d*255;
  		
  	}
  ctx.putImageData(data, 0, 0);
 }

 var presets = [
 	[[0, 120, -60], [240, 0, -60], [0, 120, -60]], // zelena
 	[[240, 0, -60], [0, 120, -60], [0, 120, -60]], // cervena
 	[[0, 120, -60], [0, 120, -60], [240, 0, -60]], // modra
 	[[240, 0, -60], [0, 120, -60], [240, 0, -60]], // fialova
 	[[0, 120, -60], [240, 0, -60], [240, 0, -60]], // belasa
 	[[240, 0, -60], [240, 0, -60], [0, 120, -60]], // zlta
 	[[80, 40, -30], [80, 40, -30], [80, 40, -30]], // cierna
 ];

 function refresh()
 {
 	render( presets[Math.floor(Math.random()*presets.length)] );
 //	render( [[0, 120, -60], [240, 0, -60], [0, 120, -60]] );
 }

 setInterval( "refresh()", 500 );

 </script>
 </body>
 </html>
	<html>
	<body bgcolor="black">
	<canvas id="canvas" style="border:1px #808080 dashed"></canvas>

	<script language="javascript">
	var w = 128;
	var h = 128;
	var can = document.getElementById("canvas");
	var ctx = can.getContext('2d');
	can.width = w;
	can.height = h;
	var data = ctx.createImageData(w, h);

	var cx = w/2; // center
	var cy = h/2;
	var gx = w*0.6; // glow
	var gy = h*0.7;
	var sx = w*0.7; // shadow
	var sy = h*0.8;

	function render(mat)
	{
	var i = 0;
	for (y=0; y<h; y++)
	for (x=0; x<w; x++, i+=4)
	{
	var d = (x-cx)(x-cx) + (y-cy)(y-cy);

	d = Math.sqrt( d ) / 60;
	if (d>1)
	d = 1;
	d = 1-d;
	d *= 20;
	if (d>1)
	d = 1;

	var c = (x-gx)(x-gx) + (y-gy)(y-gy);
	c = Math.sqrt( c ) / 70;
	c = c*c;
	if (c>1)
	c = 1;

	var s = (x-sx)(x-sx) + (y-sy)(y-sy);
	s = Math.sqrt( s ) / 70;
	if (s>1)
	s = 1;
	s = 1-s;

	data.data[i+0] = mat[0][0] + mat[0][1]c + mat[0][2]s;
	data.data[i+1] = mat[1][0] + mat[1][1]c + mat[1][2]s;
	data.data[i+2] = mat[2][0] + mat[2][1]c + mat[2][2]s;
	data.data[i+3] = d*255;

	}
	ctx.putImageData(data, 0, 0);
	}

	var presets = [
	[[0, 120, -60], [240, 0, -60], [0, 120, -60]], // zelena
	[[240, 0, -60], [0, 120, -60], [0, 120, -60]], // cervena
	[[0, 120, -60], [0, 120, -60], [240, 0, -60]], // modra
	[[240, 0, -60], [0, 120, -60], [240, 0, -60]], // fialova
	[[0, 120, -60], [240, 0, -60], [240, 0, -60]], // belasa
	[[240, 0, -60], [240, 0, -60], [0, 120, -60]], // zlta
	[[80, 40, -30], [80, 40, -30], [80, 40, -30]], // cierna
	];

	function refresh()
	{
	render( presets[Math.floor(Math.random()*presets.length)] );
	// render( [[0, 120, -60], [240, 0, -60], [0, 120, -60]] );
	}

	setInterval( "refresh()", 500 );

	</script>
	</body>
	</html>