Die Simulation einer fortschreitenden Welle hat Gemini in der Einstellung Canvas durch die Eingabe von "Programmiere die Simulation einer Welle" hergestellt.
Beispiel aus der Google-Site "JavaScript lernen mit Mathematik und Physik"
Diese Simulation nutzt das Euler-Verfahren, das in der Physik oft als "Prinzip der kleinen Schritte" bezeichnet wird. Anstatt komplexe mathematische Formeln für die gesamte Bewegung zu nutzen, berechnet der Computer die Werte immer nur für einen winzigen Augenblick in der Zukunft.
Im Code findest du ein Objekt namens state. Hier speichern wir die drei wichtigsten physikalischen Werte:
s (Weg/Position): Wo befindet sich der Ball?
v (Geschwindigkeit): Wie schnell ist der Ball gerade?
a (Beschleunigung): Wie stark wird der Ball angeschoben?
dt (Delta Time): Ein winziger Zeitschritt (hier 1/60 Sekunde).
Die Funktion loop wird etwa 60 Mal pro Sekunde aufgerufen. Wenn die Simulation läuft, passieren jedes Mal zwei entscheidende Rechenschritte:
state.v += state.a * state.dt;
Die neue Geschwindigkeit ist die alte Geschwindigkeit plus die Beschleunigung mal dem winzigen Zeitschritt.
state.s += state.v * state.dt;
Die neue Position ist die alte Position plus die aktuelle Geschwindigkeit mal dem Zeitschritt.
Damit wir die Bewegung sehen, muss der Computer die Zahlen in Bilder verwandeln:
Bildschirm löschen (Die saubere Tafel): Mit ctx.clearRect(0, 0, canvas.width, canvas.height); wird vor jedem neuen Bild die gesamte Zeichenfläche geleert. Ohne diesen Befehl würde der Ball eine dauerhafte Spur hinterlassen, da die alten Positionen nicht „weggewischt“ würden.
Koordinaten-Umrechnung: Da Computer in Pixeln rechnen, nutzen wir meterToPixel, um die physikalischen Meter auf die Bildschirmgröße anzupassen.
Das Daumenkino-Prinzip: Der Befehl requestAnimationFrame(loop); am Ende der Funktion sorgt dafür, dass sich der Computer immer wieder selbst aufruft, sobald der Bildschirm bereit für ein neues Bild ist. So entsteht eine flüssige Animation.
Event Listener: Die Schieberegler und Buttons lauschen auf deine Eingaben (input oder click) und ändern direkt die Werte im state-Objekt.
Stopp-Logik: Eine einfache if-Abfrage prüft ständig: currentTotalPixels >= canvas.width. Wenn der Ball den Rand berührt, wird die Animation angehalten.
Diese Art der Programmierung ist sehr nah an der echten Welt. In der Realität ändern sich Dinge auch in winzigen Augenblicken. Wenn du lernst, solche Simulationen zu bauen, verstehst du nicht nur Informatik besser, sondern "siehst" auch direkt, wie die Naturgesetze der Physik funktionieren!