4umi.com/web/javascript/web

Weave-a-web

Dynamic Javascript

Consider this simple little single CSS style rule:

.p { position:absolute; width:2px; height:2px; font-size:2px; background:black; }

And this Javascript, supposed to run sometime after the browser has finished loading the document:

var c = gid( 'check' ), d = document, w = getwindow(),
 m = Math.floor( w.w / 2 ),
 p = d.createElement( 'div' ),
 o = d.body.insertBefore( p.cloneNode( false ) );
p.className = 'p';
o.style.position = 'absolute';
o.style.left = m + 'px';
o.style.top = ( w.h - m ) + 'px';
m -= 20;

function gray(r) { r = r.toString(16); r += r + r; return r+r; }

function pixel( x, y ) {
 var q = p.cloneNode( true ), s = q.style;
 s.left = x + 'px';
 s.top = y + 'px';
 o.insertBefore( q );
}

function draw() { if( c.checked ) {
 var now = new Date(), r = Math.floor( Math.random() * 16 ),
  rx = Math.random() * m * 2 - m,
  ry = Math.random() * m, i = m;p.style.background='#'+gray(r);
 while(i--) {
  x = Math.floor( Math.cos( i / (m + r) * Math.PI ) * rx );
  y = Math.floor( Math.sin( i / m * Math.PI ) * ry );
  pixel( x, y );
 }
 window.status = new Date() - now;
 window.setTimeout( 'draw();', 1000 );
}}

c.onclick = draw;
draw();

Then all that 's really left to ask, is, .