Drehender Kreis 2

So funktioniert das Script

Das Script hat zwei Teile: Zuerst werden die 100 Punkt-Elemente erzeugt und in der Animationsfläche abgelegt, danach verschiebt die Funktion move() sie alle 50 Millisekunden auf neue Positionen — daraus entsteht die Bewegung, Bild für Bild wie in einem Daumenkino.

for (let i = 1; i <= 100; i++) {
  const punkt = document.createElement("div");
  punkt.textContent = ".";
  punkt.style.position = "absolute";
  punkt.style.left = "-300px";
  punkt.style.top = "-300px";
  buehne.appendChild(punkt);
  punkte.push(punkt);
}

Jeder Bildpunkt ist schlicht ein <div> mit einem Punkt als Text. document.createElement() erzeugt das Element, appendChild() hängt es in die Fläche ein — das ersetzt das document.write() des Originals, das auf modernen Seiten nicht mehr verwendet werden sollte. Mit position: absolute lässt sich jeder Punkt später frei über left und top platzieren; bis zum ersten Animationsbild parken alle unsichtbar außerhalb der Fläche. Alle Elemente werden zusätzlich im Array punkte gemerkt, damit move() sie nicht bei jedem Durchlauf neu suchen muss.

stil.left = mitteX + 100 * Math.cos(alpha + 0.0628 * p) * Math.cos(alpha * 2) + "px";
stil.top  = mitteY + 100 * Math.sin(alpha + 0.0628 * p) + "px";

Das ist das Herz der Animation. Grundgerüst ist die Parameterdarstellung des Kreises: x = 100 · cos(winkel), y = 100 · sin(winkel) — die 100 ist der Radius in Pixeln. Jeder der 100 Punkte bekommt seinen eigenen Winkel alpha + 0.0628 * p: Der Abstand 0,0628 ist ein Hundertstel von 2π (≈ 6,28), sodass sich die Punkte gleichmäßig über den ganzen Kreis verteilen. Der Clou ist der zweite Faktor Math.cos(alpha * 2) in der x-Koordinate: Er pendelt zwischen −1 und 1 und staucht damit die Kreisbreite rhythmisch zusammen — mal voller Kreis, mal schmale Ellipse, mal Strich. Genau das erzeugt die Illusion, die Scheibe würde um die senkrechte Achse kippen.

alpha = alpha - 0.01;
setTimeout(move, 50);

Nach jedem Bild wird der Grundwinkel alpha um 0,01 verkleinert — deshalb wandern die Punkte gegen den Uhrzeigersinn. setTimeout(move, 50) ruft move() nach 50 Millisekunden erneut auf, rund 20 Bilder pro Sekunde. Beachtet, dass hier die Funktion selbst übergeben wird und nicht wie im Original ein Text "move()" — das Auswerten von Code aus Zeichenketten gilt heute als schlechte Praxis.

const mitteX = buehne.clientWidth / 2;
const mitteY = buehne.clientHeight / 2;

Der Mittelpunkt wird in jedem Durchlauf frisch aus der aktuellen Größe der Animationsfläche berechnet (clientWidth/clientHeight). Das Original nahm stattdessen window.innerWidth und ließ die Punkte über die ganze Seite wandern — mit der Fläche als Bezug bleibt der Kreis in seinem Kasten und rückt sogar automatisch in die Mitte, wenn sich die Fenstergröße ändert.

Zum Anpassen: Der Radius steckt in den beiden Hundertern der Positionsformeln, das Tempo in alpha - 0.01 und den 50 Millisekunden. Größere oder farbige Punkte bekommt ihr, indem ihr beim Erzeugen z. B. punkt.style.color = "teal" und punkt.style.fontSize = "24px" ergänzt. Und wer Math.cos(alpha * 2) testweise in die y-Zeile verschiebt, lässt den Kreis um die waagerechte Achse kippen.