4umi.com/web/javascript/swirl

Swirling galaxy

Mousetail Javascript

Yet another fancy mousetail rotating around the page, but this one comes with some genuine meaning to the interactivity.

Clicking on a star...

Heaven is a place online. The instructions, if deserving of the word at all, are crystal clear: click three times in a row on any of the stars to win the grand prize.

Score Coherent hits:     Falls:
Options

The script

Hide this section for a clear page and give the floor to the dancers by clicking the header above the paragraph.

The code is rather old by current standards. Although it has been rewritten in places to work with modern DOM methods and the documentElement node, it still contains some support for Netscape 4 browsers. The number of global variables for instance, is considered silly in today's world of object orientated programs. It helps to keep track of things, however. Highlight the code, then doubleclick any variable to have its current value displayed in an alert box. But, considering the stakes on this page, think twice before you lower the mouse button...

// original: reportedly http://ozone.com

var radius = 150, delay = 100, diff = 30, speed = -0.06,
 left1 = new Array( 0,292,318,181,181,217,263,318,181,181,217,263,-96 ),
 left2 = new Array( 0,0,260,390,420,550,680,390,420,550,680,0 ),
 top1 = new Array( 0,30,57,80,101,125,80,80,101,125,80,0 ),
 top2 = new Array( 50,100,100,150,150,200,200,100,150,150,200,200,0 ),
 angle = new Array( 0, 0.63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 ),
 b = [], hits = 0, direction = -1, i = angle.length,
 Xangle = [], Yangle = [],
 Xdif = [], Ydif = [],
 Xori = radius, Yori = radius,
 Xpos = 72, Ypos = 72,
 Xwin = 400, Ywin = 300,
 layerstart = 'document.all.',
 layerstyle = '.style';
while(i--) { Xdif[i] = 0; Ydif[i] = 0; Xangle[i] = angle[i]; Yangle[i] = angle[i]; }
if(document.captureEvents) {
  window.captureEvents(Event.MOUSEMOVE);
  window.onMouseMove = moved;
  layerstart = 'document.';
  layerstyle = '';
}

function hit( e ) {
 e = e || window.event || {};
 if( /img/i.test( ( e.srcElement || e.target ).tagName ) ) {
  hits++; ring( 'fireworks' );
  gid( 'hit' ).value = hits; gid( 'hit' ).style.background = hits===1 ? '#d4ffd7' : 'gold';
  if( hits%3===0 ) {
   document.body.style.backgroundColor = 'gold';
   window.alert( ( hits>3 ? 'Once again...\n' : '' ) + ran( [ 'Three hits!\nM', 'Hurray! M', 'Quick, m' ] ) + 'ake a wish!' );
   document.body.style.backgroundColor = '';
  }
 } else if( hits ) {
  hits = 0; ring( 'oops' );
  gid( 'hit' ).value = '0'; gid( 'hit' ).style.background = '';
  gid( 'fall' ).value = +gid( 'fall' ).value + 1;
 }
}

function moved( e ) {
 if(e||window.event) {
  Xori = Xpos = e ? e.pageX : window.event.x;
  Yori = Ypos = e ? e.pageY : window.event.y;
  direction = Ypos>Ywin ? ( Xpos>Xwin ? 1 : -1 ) : ( Xpos>Xwin ? -1 : 1 );
 }
}

function resize( o ) {
 var w = getwindow();
 Xwin = w.w/2;
 Ywin = w.h/2;
}

function ring( o ) {
 if( gid( 'se' ).checked ) {
  var i = this.id && +this.id.charAt(1) || 10, s = o || 'star';
  b[i].src = '/web/sound/' + s + '.wav';
 }
}

function run() {
 for( var j = 0; j<10; j++ ) {
  Xdif[j] = document.documentElement.scrollLeft + Xangle[j] - left2[j];
  Ydif[j] = document.documentElement.scrollTop + Yangle[j] - top2[j];
  left2[j] = left2[j] + Xdif[j]/diff;
  top2[j] = top2[j] + Ydif[j]/diff;
  eval( layerstart+'a'+j+layerstyle+'.left = left2['+j+']' );
  eval( layerstart+'a'+j+layerstyle+'.top = top2['+j+']' );
 }
 window.setTimeout( 'run();', 20 );
}

function spin() {
 var j = 10; while(j--) {
  angle[j] += speed * direction;
  Xangle[j] = Xori + radius * Math.sin( angle[j] );
  Yangle[j] = Yori + radius * Math.cos( angle[j] );
 }
 window.setTimeout( 'spin();', 3 );
}

function startthedots() {
 var d = document, i = 10, j = i;
 b[i] = d.createElement( 'bgsound' ) || d.createElement( 'embed' );
 b[i].width = 0; b[i].height = 0; b[i].hidden = true;
 d.body.appendChild( b[i] );
 while(j--) {
  b[j] = b[i].cloneNode(true);
  d.body.appendChild( b[j] );
  gid( 'a' + j ).onmouseover = ring;
 }
 resize();
 run();
 spin();
}

document.onmousedown = hit;
document.onmousemove = moved;
window.onresize = resize;
startthedots();