Spirograph

Einen kleinen Maus-Spirographen bietet dieses Javascript.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- /*********************** Spirograph-Skript Anfang *****************************/ /*** WWW.WerIstFelix.de *** Felix at Antifas dot de ***/ var anzahl = 100; //die Länge des Spirographen var abstand1 = 5; //abstand zwischen den einzelenen punkten der seele in pixel var radius = 20; //wie weit dich die fäden von der seele entfernen document.write("<span id='AAA' class='wurm'></span>"); function erzeuge() //erzeugt die ausrichtbaren Grafiken { var a=1; var text=""; while(a<=anzahl) { text +="<span id='wurmX"+a+"' style='position:absolute; top:-10px; left:-10px; color:#808080; margin:0;'>.</span>"; //die graue seele text +="<span id='wurma"+a+"' style='position:absolute; top:-10px; left:-10px; color:#FF0000; margin:0;'><b>.</b></span>"; //der rote faden text +="<span id='wurmb"+a+"' style='position:absolute; top:-10px; left:-10px; color:#00FF00; margin:0;'><b>.</b></span>"; //der grüne faden text +="<span id='wurmc"+a+"' style='position:absolute; top:-10px; left:-10px; color:#0000FF; margin:0;'><b>.</b></span>"; //der blaue faden a++; } document.getElementById("AAA").innerHTML = text; laufen(); } document.onload = setTimeout("erzeuge()",500); var x=-10,y=-10; function erfasse(e) //erfasst die Mauskordinaten { x = (e)?e.pageX:window.event.x + document.documentElement.scrollLeft; y = (e)?e.pageY:window.event.y + document.documentElement.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() { neux=(parseFloat(document.getElementById("wurmX"+c).style.left.replace(/px/, ""))); neuy=(parseFloat(document.getElementById("wurmX"+c).style.top.replace(/px/, ""))); neue_koordinaten(neux, neuy); document.getElementById("wurma"+b).style.top = (parseFloat(document.getElementById("wurmX"+c).style.top.replace(/px/, "")) + X + Math.sin(j)*radius) + "px"; document.getElementById("wurmb"+b).style.top = (parseFloat(document.getElementById("wurmX"+c).style.top.replace(/px/, "")) + X + Math.sin(j + Math.PI/3*2)*radius) + "px"; document.getElementById("wurmc"+b).style.top = (parseFloat(document.getElementById("wurmX"+c).style.top.replace(/px/, "")) + X + Math.sin(j + Math.PI/3*4)*radius) + "px"; document.getElementById("wurmX"+b).style.top = (parseFloat(document.getElementById("wurmX"+c).style.top.replace(/px/, "")) + X) + "px"; neue_koordinaten(neux, neuy); document.getElementById("wurma"+b).style.left = (parseFloat(document.getElementById("wurmX"+c).style.left.replace(/px/, "")) + Y +Math.cos(j)*radius) + "px"; document.getElementById("wurmb"+b).style.left = (parseFloat(document.getElementById("wurmX"+c).style.left.replace(/px/, "")) + Y +Math.cos(j + Math.PI/3*2)*radius) + "px"; document.getElementById("wurmc"+b).style.left = (parseFloat(document.getElementById("wurmX"+c).style.left.replace(/px/, "")) + Y +Math.cos(j + Math.PI/3*4)*radius) + "px"; document.getElementById("wurmX"+b).style.left = (parseFloat(document.getElementById("wurmX"+c).style.left.replace(/px/, "")) + Y) + "px"; 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> <!-- präsentiert von kostenlose-javascripts.de --><br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/mausverfolger/spirograph/" target="_blank">kostenlose-javascripts.de</a> <br />