Wellen

Wenn du dir nun sagst, “Hm, das ist ja alles ganz schön, aber was ich eigentlich will, ist eine Welle auf den Bildschirm zu zeichnen”, dann ist jetzt deine Zeit gekommen. Wir haben nämlich 90 % des Weges schon geschafft. Wenn wir einen einzelnen Kreis entsprechend seiner Sinusfunktion nach oben und unten schwingen lassen, sehen wir einen einzelnen Punkt auf der x-Achse des Wellenmusters. Mit ein bisschen mehr Tamtam und einer for-Schleife können wir eine ganze Reihe dieser schwingenden Kreise nebeneinander erzeugen.

Dieses Wellenmuster kann man zum Beispiel verwenden, um den Körper oder Körperteile eines Tieres oder eine weiche Oberfläche (wie etwa Wasser) darzustellen.

Hier werden wir nun auf dieselben Fragen von Amplitude und Periode stoßen. Anstatt die Periode abhängig von der Zeit zu definieren können wir aber, da wir ja die ganze Welle betrachten, von der Periode als die Breite (in Pixel) eines gesamten Wellenzyklus sprechen. Wie bei der einfachen Oszillation haben wir die Option, das Wellenmuster abhängig von der genauen Periode zu berechnen, oder einfach entsprechend dem Modell der Winkelgeschwindigkeit.

Nehmen wir mal den einfacheren Fall, die Winkelgeschwindigkeit. Wir wissen, dass wir mit einem Winkel, einer Winkelgeschwindigkeit, und einer Amplitude beginnen müssen:

var angle = 0;
var angleVel = 0{,}2;
var amplitude = 100;

Dann gehen wir in einer Schleife durch alle x-Werte, bei denen wir einen Punkt auf der Welle zeichnen wollen. Nehmen wir erst mal alle 24 Pixel. In diesem Loop wollen wir drei Dinge tun:

Die y-Position entsprechend der Amplitude und dem Sinuswert des Winkels berechnen.
Einen Kreis an der Position (x, y) zeichnen.
Die Winkelgeschwindigkeit zum Winkel addieren.

for (var x = 0; x <= width; x += 24) {
    // Berechne y mit Amplitude und Sinuswert des Winkels
    var y = amplitude * sin(angle);
    // Zeichne einen Kreis an Position (x, y)
    ellipse(x, y+height/2, 48, 48);
    // Addiere die Winkelgeschwindigkeit zum Winkel
    angle += angleVel;
}

Schauen wir uns die Ergebnisse mit unterschiedlichen Werten für angleVel an:

Beachte, wie die Periode immer kürzer wird, je höher die Winkelgeschwindigkeit wird, obwohl wir die Periode der Welle nicht genau berechnen. Ebenfalls bemerkenswert ist dass, wenn die Periode kürzer wird, es immer schwieriger wird, die Wellenform zu erkennen, da der Abstand zwischen den einzelnen Punkten zunimmt. Eine Option ist es, beginShape() und endShape() zu verwenden, um die Punkte mit einer Linie zu verbinden.

Das obere Beispiel ist statisch. Die Welle ändert sich nie, sie schlängelt sich nicht, aber auf diesen Punkt arbeiten wir hin. Der zusätzliche Schritt, die Welle zu animieren, wird ein bisschen knifflig. Dein erster Gedanke mag vielleicht sein: “Hey, kein Problem, wir machen einfach den Winkel zur globalen Variable und lassen ihn mit draw() von einem Zyklus zum anderen inkrementieren.”

Nun, das ist ein guter Gedanke, aber es wird nicht funktionieren. Wenn du dir die statisch gezeichnete Welle anschaust, passt das rechte Ende nicht zum linken. Wo die Welle in einem Zyklus von draw() endet, fängt sie im nächsten nicht wieder an. Was wir stattdessen brauchen ist eine Variable, die nur dafür da ist, den Wert des Winkels aufzuzeichnen, mit dem sie beginnen soll. Dieser Winkel (den wir startAngle nennen werden) inkrementiert mit seiner eigenen Winkelgeschwindigkeit.

Hier ist die Welle, mit dem dazugehörigen Startwinkel. Ändere die verschiedenen Zahlen, um zu sehen, was mit der oszillierenden Welle passiert.

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.

Willst du an der Diskussion teilnehmen?

Anmelden

Sortiere nach:

Noch keine Beiträge.

Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.