Spirograf

<script>
var anzahl= 100;    //die Länge 
var abstand1= 5;   //abstand zwischen den einzelnen punkten der seele in pixel
var radius= 20;     //wie weit dich die fäden von der seele entfernen
function erzeuge()        //erzeugt die ausrichtbaren Grafiken
{
        var a=1;
        var text="";
        document.body.innerHTML += "<span id='AAA' class='wurm'></span>";
        while(a<=anzahl)
        {
 text +="<span  id='wurmX"+a+"' style='{position:absolute; top:-10px; left:-10px; color:#000; margin:0;}'>.</span>";//die schwarze seele

text +="<span  id='wurma"+a+"' style='{position:absolute; top:-10px; left:-10px; color:#F00; margin:0;}'><b>.</b></span>";//der rote faden

text +="<span  id='wurmb"+a+"' style='{position:absolute; top:-10px; left:-10px; color:#0F0; margin:0;}'><b>.</b></span>";//der grüne faden

text +="<span  id='wurmc"+a+"' style='{position:absolute; top:-10px; left:-10px; color:#00F; margin:0;}'><b>.</b></span>";//der blaue faden
                a++;
        }
        document.all["AAA"].innerHTML = text;
        laufen();
}
document.onload = setTimeout("erzeuge()",500);
var x=-10,y=-10;
function erfasse()        //erfasst die Mauskordinaten
{
        x = window.event.x + document.body.scrollLeft;
        y = window.event.y + document.body.scrollTop;
}
document.onmousemove = erfasse;
var X=0,Y=0,winkel=0;
function neue_koordinaten(x1,y1)        //richtet das letzte Objekt ganz nach vorne
{
        X = abstand1 * Math.sin(Math.atan2(y-y1,x-x1));
        Y = abstand1 * Math.sin(Math.atan2(x-x1,y-y1));
winkel= Math.atan2(x-x1,y-y1);
}
var b=anzahl-1;
var c=anzahl;
var d=anzahl-Math.ceil(anzahl*0.75);
var j=0;
function laufen()
{
        neue_koordinaten(document.all["wurmX"+d].style.pixelLeft,document.all["wurmX"+d].style.pixelTop);
        document.all["wurma"+b].style.pixelTop  = document.all["wurmX"+c].style.pixelTop + X + Math.sin(j)*radius;
        document.all["wurmb"+b].style.pixelTop  = document.all["wurmX"+c].style.pixelTop + X + Math.sin(j + Math.PI/3*2)*radius;
        document.all["wurmc"+b].style.pixelTop  = document.all["wurmX"+c].style.pixelTop + X + Math.sin(j + Math.PI/3*4)*radius;
        document.all["wurmX"+b].style.pixelTop  = document.all["wurmX"+c].style.pixelTop + X;

        neue_koordinaten(document.all["wurmX"+d].style.pixelLeft,document.all["wurmX"+d].style.pixelTop);
        document.all["wurma"+b].style.pixelLeft =document.all["wurmX"+c].style.pixelLeft + Y +Math.cos(j)*radius;
        document.all["wurmb"+b].style.pixelLeft =document.all["wurmX"+c].style.pixelLeft + Y +Math.cos(j + Math.PI/3*2)*radius;
        document.all["wurmc"+b].style.pixelLeft =document.all["wurmX"+c].style.pixelLeft + Y +Math.cos(j + Math.PI/3*4)*radius;
        document.all["wurmX"+b].style.pixelLeft =document.all["wurmX"+c].style.pixelLeft + Y;

j+=1/6;
        b--; if(b<=0) b=anzahl;
        c--; if(c<=0) c=anzahl;
        d--; if(d<=0) d=anzahl;
        setTimeout("laufen()",10);
}

</script>
Die bunten Punkte folgen der Maus !
