Schwingungen: Amplitude und Periode

Bist du schon begeistert? Im Kapitel zur Winkelbewegung haben wir einige coole Anwendungsfälle für den Tangens (um den Winkel eines Vektors zu bestimmen), Sinus und Cosinus (um von Polar- auf kartesische Koordinaten zu konvertieren) kennengelernt. Wir könnten jetzt hier aufhören und uns zurücklehnen. Aber das machen wir nicht! Dies ist erst der Anfang. Was Sinus und Cosinus f[r dich tun können geht weit über mathematische Formeln und rechte Winkel hinaus.

Schauen wir uns ein Diagramm der Sinusfunktion an, wo y = sin(x)

Du bemerkst, dass die Sinusfunktion eine gleichförmige Kurve welche zwischen 1 und -1 alterniert generiert. Dieses Verhalten wird auch Oszillation, eine periodische Bewegung zwischen zwei Punkten, genannt. Das Zupfen an einer Gitarrensaite, ein schwingendes Pendel oder ein hüpfender Springstock sind alles Beispiele von oszillierenden Bewegungen.

Und so entdecken wir den glücklichen Umstand, dass wir in ProcessingJS eine Oszillation simulieren können, indem wir eine Sinusfunktion für die Position eines Objektes verwenden. Beachte, dass dies der gleichen Methodik folgt, wie wir sie im Kapitel über Rauschen für Perlin-Noise verwendet haben.

Beginnen wir mit einem wirklich einfachen Szenario. Wir möchten, dass sich ein Kreis auf unserem Canvas horizontal von links nach rechts bewegt.

Dies ist auch als eine einfache harmonische Bewegeung (oder noch schicker, eine “periodische sinusförmige Schwingung eines Objektes”) bekannt. Dieses Programm wird einfach zu schreiben sein, aber bevor wir uns in den Code stürzen, wollen wir uns mit den Begriffen der Oszillation (und Wellen) vertraut machen.

Eine einfache harmonische Bewegung kann für jede Position (in unserem Fall die x-Position) und den folgenden zwei Elementen als Funktion der Zeit definiert werden:

Wenn wir uns das Sinus-Diagramm oben anschauen, sehen wir eine Amplitude von 1 und eine Periode von TWO_PI. Die Sinusfunktion steigt nie über 1 oder unter -1 und das Wellenmuster wiederholt sich alle TWO_PI rad (oder 360 Grad).

Aber was sind Amplitude und Periode in unserer ProcessingJS-Welt? Die Amplitude kann ganz einfach in Pixel gemessen werden. Im Beispiel eines Fensters von 200 Pixel Breite würden wir von der Mitte 100 Pixel nach rechts und 100 Pixel nach links oszillieren. Deshalb gilt:

Die Periode ist die Zeitdauer für einen Zyklus, aber was ist die Zeit in unserer ProcessingJS-Welt? Klar könnten wir sagen, dass wir den Kreis alle drei Sekunden oszillieren lassen wollen. Und wir könnten die verstrichenen Millisekunden in unserem Programm mit millis() verfolgen und uns einen aufwendigen Algorithmus für das Oszillieren eines Objekt nach der realen Zeit einfallen lassen.

Wir haben aber eine andere Möglichkeit: Wir können die Tatsache nutzen, dass Programme in ProcessingjS mit "Frames", und zwar standardmäßig mit 30 "Frames pro Sekunde", laufen. ProcessingJS hat eine Variable frameCount, welche uns den aktuellen Frame angibt, und die Funktion frameRate() um die Anzahl Frames pro Sekunde anzupassen. 30 FPS ist die Standard-Frame-Rate, da dies, um das menschliche Gehirn auszutricksen, eine gute Frame-Rate für flüssige Animationen ist. Manchmal, wie z.B. beim Bebuggen, kann es aber nützlich sein, die Frame-Rate zu reduzieren.

Wir können uns daher entscheiden, unsere Periode auf der Anzahl schon angezeigter Frames, welche nah an der realen Zeit liegt, basieren zu lassen. Wir können festlegen, dass die oszillierende Bewegung sich alle 30, 50 oder 1000 Frames wiederholt.

Sobald wir die Amplitude und Periode haben, wird es Zeit eine Formel für die Berechnung von x als Funktion der Zeit zu schreiben. Diese werden wir statt der aktuellen Frameanzahl verwenden.

Nehmen wir diese Formel auseinander und versuchen jede Komponente zu verstehen. Die erste ist wohl am einfachsten. Was auch immer aus der Sinus-Funktion kommt, multiplizieren wir mit der Amplitude. Wir wissen, dass der Sinus zwischen -1 und 1 oszilliert. Wenn wir diesen Wert mit der Amplitude multiplizieren, erhalten wir das gewünschte Resultat: ein Wert welcher zwischen -Amplitude und Amplitude oszilliert. Beachte: an dieser Stelle könnten wir auch die Funktion map() von ProcessingJS verwenden um den Wert von Sinus auf einen gewählten Bereich abzubilden.

Schauen wir nun mal in die Sinusfunktion hinein:

Was geht hier vor? Beginnen wir mit dem was wir kennen. Wir wissen, dass sich der Sinus alle 2*PI Bogenmaß wiederholt. D.h. er beginnt bei 0 und wiederholt sich bei 2*PI, 4*PI, 6*PI, etc.. Wenn die Periode 120 Frames ist, dann möchten wir, das die oszillierende Bewegung sich, wenn der frameCount bei 120, 240, 360, ... Frames ist, wiederholt. frameCount ist tatsächlich die einzige Variable. Sie beginnt bei 0 und zählt hoch. Schauen wir uns an, was die Formel mit diesen Werten zurückgibt.

frameCount dividiert durch die Periode gibt uns die Anzahl abgeschlossener Zyklen. Haben wir den ersten Zyklus schon zur Hällte durchlaufen? Haben wir schon zwei Zyklen abgeschlossen? Wenn wir diese Zahl mit TWO_PI multiplizieren, erhalten wir das gewünschte Resultat, da TWO_PI die Anzahl rad ist, welche der Sinus für eine Schwingung braucht.

Fassen wir all dies zusammen, erhalten wir ein Programm, welches die x-Position eines Kreises mit einer Amplitude von 100 Pixel und einer Periode von 120 Frames oszilliert.

Bitte merke dir auch, dass der Begriff Frequenz die Anzahl Zyklen pro Zeiteinheit bezeichnet. Die Frequenz ist gleich 1 dividiert durch die Periode. Wenn die Periode 120 Frames ist, dann werden in einem Frame nur 1/120tel eines Zyklus abgeschlossen und die Frequenz ist daher 1/120 Zyklen/Frame. Im Beispiel oben wählen wir einfach die Oszillationsrate im Bezug auf die Periode und brauchen daher keine Variable für die Frequenz.

Beachte, dass wir all dies mit der Sinusfunktion (sin() in ProcessingJS) programmiert haben. Wir hätten aber die gleichen Ideen auch mit dem Cosinus umsetzen können. Die Periode ist für beide gleich, der Hauptunterschied liegt nur darin, ob die Anfangsamplitude bei 1 oder bei 0 liegt.

Der Kurs "Natürliche Simulationen" ist eine Bearbeitung von "The Nature of Code" von Daniel Shiffman, und wird unter der Creative Commons Attribution-NonCommercial 3,0 Unported Lizenz verwendet.