JavaScripts › Mathematik

Drehender Kreis 3

Hundert Punkte laufen auf einer Kreisbahn und kippen dabei um die X- und die Y-Achse — eine kleine Animation aus reiner Trigonometrie.

Dieses Javascript von Albert Kluge erzeugt einen Kreis aus hundert einzelnen Punkten, der sich gegen den Uhrzeigersinn dreht und dabei gleichzeitig um die X- und die Y-Achse kippt. Weil beide Kippbewegungen doppelt so schnell laufen wie die Drehung, scheint der Kreis abwechselnd zu einer waagerechten und einer senkrechten Linie zusammenzuschrumpfen und sich wieder zu öffnen — ein räumlicher Eindruck ganz ohne 3D-Technik.

Ihr müsst nichts bedienen: Die Animation startet von selbst, sobald die Seite geladen ist, und läuft dauerhaft weiter. In der Urfassung übernahmen die Punkte die ganze Bildschirmmitte; in dieser Fassung laufen sie in einer eigenen Fläche, damit sie den Rest der Seite nicht überdecken.

Mathematisch steckt dahinter nur die Kreisgleichung: Ein Punkt auf einem Kreis mit Radius r und Winkel α liegt bei x = r · cos(α) und y = r · sin(α). Verteilt man hundert Punkte gleichmäßig, liegt zwischen zweien jeweils ein Hundertstel des Vollkreises — das sind die 0,0628 im Script, denn ein Vollkreis misst im Bogenmaß 2 · π ≈ 6,283. Die zusätzliche Multiplikation mit sin bzw. cos des doppelten Winkels staucht den Kreis und erzeugt so die Kippbewegung.

Aus derselben Familie gibt es bei uns außerdem den Drehenden Kreis 1 und den Drehenden Kreis 2. Wer sehen will, wie Sinus und Kosinus rechnerisch zusammenhängen, findet das bei den trigonometrischen Berechnungen.

Mathematik Baujahr 2005 läuft in deinem Browser

Die Animation läuft automatisch, sobald die Seite geladen ist.

Script von Albert Kluge (jjam.de)

So funktioniert das Script

Das Script hat nur zwei Teile: Beim Start erzeugt es hundertein Punkt-Elemente und legt sie in eine Liste, danach verschiebt eine Funktion diese Punkte alle 50 Millisekunden auf neue Positionen. Weil sich der Winkel dabei jedes Mal ein Stückchen weiterdreht, entsteht der Eindruck einer flüssigen Bewegung.

for (let i = 0; i < 101; i++) {
  const punkt = document.createElement("div");
  punkt.style.position = "absolute";
  punkt.textContent = ".";
  buehne.appendChild(punkt);
  punkte[i] = punkt.style;
}

document.createElement("div") erzeugt ein neues Element, appendChild hängt es in die Bühne ein. Entscheidend ist position: absolute: Nur so lässt sich ein Element frei über left und top platzieren, statt vom Textfluss geschoben zu werden. In der Liste punkte merkt sich das Script nicht die Elemente selbst, sondern gleich deren style-Objekte — das spart bei jedem Bild hundert Suchvorgänge im Dokument. Die Urfassung schrieb die Punkte noch mit document.write() in die Seite, was moderne Browser nach dem Laden nicht mehr zuverlässig unterstützen.

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

Hier steckt die ganze Animation. Math.cos() und Math.sin() liefern die waagerechte und die senkrechte Position auf einem Kreis, die 100 davor ist der Radius in Pixeln. Der Term 0.0628 * p verteilt die hundert Punkte gleichmäßig über den Vollkreis, denn 100 × 0,0628 ergibt ungefähr 2 · π. Die Faktoren Math.sin(alpha * 2) und Math.cos(alpha * 2) stauchen den Kreis in der Breite bzw. in der Höhe — das ist die Kippbewegung. Das angehängte "px" ist Pflicht: CSS-Positionen brauchen immer eine Einheit.

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

Nach jedem Durchlauf wird der Winkel um 0,01 verkleinert — das negative Vorzeichen sorgt für die Drehung gegen den Uhrzeigersinn. setTimeout(move, 50) ruft die Funktion nach 50 Millisekunden erneut auf, sie startet sich also selbst immer wieder neu; das ergibt etwa 20 Bilder pro Sekunde. Im Original stand hier setTimeout("move()", 50) mit dem Funktionsaufruf als Text — diese Schreibweise gilt heute als unsicher und langsam, weil der Browser den Text jedes Mal neu als Code auswerten muss.

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

Der Mittelpunkt wird bei jedem Bild neu aus der Größe der Bühne bestimmt. Dadurch bleibt der Kreis auch dann zentriert, wenn das Fenster verändert wird. Die Urfassung nutzte an dieser Stelle window.innerWidth und window.innerHeight, also die Mitte des gesamten Browserfensters.

Zum Anpassen: Die 100 vor den Winkelfunktionen ist der Radius — kleinere Werte ergeben einen kleineren Kreis. Über die 0,01 stellt ihr das Tempo ein, über die 50 in setTimeout die Bildrate. Und statt des Punktes in punkt.textContent = "." dürft ihr jedes beliebige Zeichen einsetzen, etwa einen Stern oder einen Buchstaben.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Mathematik