spiral clock

gibney.org : Technology : Javascript : Experiments : spiral clock

(Entry Nr. 2072, by user 1 | edit)

</style>

SpiralClock=function()
{
 this.create=function(i)
 {
  var r=document.createElement("span");

if (i%9==0) r.innerHTML="I";
  if (i%9==1) r.innerHTML="V";
  if (i%9==2) r.innerHTML="A";
  if (i%9==3) r.innerHTML="N";
  if (i%9==4) r.innerHTML="O";
  if (i%9==5) r.innerHTML="V";
  if (i%9==6) r.innerHTML="S";
  if (i%9==7) r.innerHTML="K";
  if (i%9==8) r.innerHTML="A";

document.body.style.backgroundColor="#000000";

document.body.appendChild(r);
  // r.style.backgroundColor="#ff0000";
  
  var cr=255;
  var cg=Math.floor(255-(i/this.nr_elements)*255);
  var cb=0;
  r.style.color="rgb("+cr+","+cg+","+cb+")";
  r.style.width="10px";
  r.style.height="10px";
  r.style.position="absolute";
  r.style.top="1px";
  r.style.left="1px";
  r.style.fontWeight="bold";
  return r;
 }

this.step=function()
 {
  for (var i=0;i<this.nr_elements;i++)
  {
   // var radius=i*(body_h/2/this.nr_elements)*0.8;
   var radius=i*(body_h/2/this.nr_elements)*0.8;
   // var speed =Math.sin(-(this.nr_elements-i)/(this.nr_elements+1))/20;
   var speed=-i/10000;
   this.elements[i].style.left=body_w/2+Math.cos(this.step_nr*speed)*radius;
   this.elements[i].style.top =body_h/2+Math.sin(this.step_nr*speed)*radius;
  }
  this.step_nr++;
 }

this.nr_elements=441;

this.elements=[];
 this.step_nr=0;

for (var i=0;i<this.nr_elements;i++)
 {
  this.elements[this.elements.length]=this.create(i);
 }
}

// -------------------------------------------------------------------
// Main
// -------------------------------------------------------------------

body_w=document.body.offsetWidth;
body_h=document.body.offsetHeight;

clock1=new SpiralClock();
//clock2=new SpiralClock();
//clock3=new SpiralClock();
//clock4=new SpiralClock();

x1=setInterval (function () {clock1.step()},20);
//x2=setInterval (function () {clock2.step()},40);
//x3=setInterval (function () {clock3.step()},80);
//x4=setInterval (function () {clock4.step()},160);

document.body.removeChild(document.getElementById("mastertable")); 
document.body.style.height="100%";

window.onresize=function()
{
 window.location.href=window.location.href;
}
</script>

Create a new entry at this position