Aufgabenblatt 2 - Animationen und Schleifen Aufgabe 1 Fingerübungen 1. Zeichne ein Strichmännchen, das bei jedem Durchgang der draw-methode die Arme senkt bzw. hebt. Vorüberlegungen: Wie funktioniert nochmal die draw-methode? Wie oft wird draw ausgeführt? Was ist der unterschied zu setup? Hinweis: Mit der Funktion framerate() lässt sich die Geschwindigkeit der draw-methode regulieren. 2. Zeichne die folgenden Figuren ohne für jede Linie einen eigenen Zeichbefehl hinzuschreiben. Vorüberlegungen: Wie kann eine Linie eindeutig beschrieben werden (vier Eigenschaften)? Die Linien in der ersten Figur unterscheiden sich alle nur durch eine einzige Eigenschaft. Welche könnte das sein? Durch welches Programmiersprachenelement werden Anweisungen wiederholt ausgeführt? Wie kann ich das nutzen, um eine Zahl hochzuzählen? 3. Zeichne einen animierten Ladebalken, der sich innerhalb einer vorgegebenen Zeit vollständig füllt. Diese Zeit soll über eine Variable duration eingestellt werden. 4. Füge deinem Ladebalken einen Anzeigetext hinzu, der angibt zu wieviel Prozent der Balken schon gefüllt ist. Aufgabe 2 Koordinatensystem Zeichne ein Raster aus waagerechten und senkrechten Linien über das gesamte Fenster. Das Raster soll sich über Variablen in seiner Auflösung einstellen lassen. Zusätzlich kannst du die Achsen in regelmäßigen Abständen mit Maßangaben beschriften. Nutze maximal zwei line-befehle. Aufgabenblatt 2 - Animationen und Schleifen 1/ 8
Aufgabe 3 Countdown Generiere einen Countdown, der von 10 in Sekundenschritten abwärts zählt. Bei 0 kannst Du dir irgendetwas lustiges ausdenken, was passieren soll (blinkender Hintergrund, ein Schriftzug,...). Vorüberlegung: Du weißt, wie du eine Variable hochzählen kannst. Kannst du auf die gleiche Art auch herunterzählen? Aufgabe 4 Dotplot Erstelle einen Dotplot, der Übereinstimmungen zwischen zwei DNA-Sequenzen sichtbar macht. Dazu musst du einfach nur die erste Sequenz (bestehend aus den Buchstaben AGCT) auf der x-achse und die zweite Sequenz auf der y-achse auftragen, um dann überall dort einen Kreis zu zeichnen, wo beide Sequenzen den gleichen Buchstaben haben. A C G C T G A C G T G A Aufgabe 5 Random Walk Schreibe ein Programm, dass einen random walk simuliert. Das heißt, Du beginnst im Zentrum des Bildes und bewegst dich in jedem draw-schritt zufällig einen Pixel nach links, rechts oben oder unten und färbst diesen Pixel schwarz. Pass auf, dass du nicht über die Ränder des Spielfelds hinaus malst. Hinweis: Du kannst mit deinem Programm auch hübsche abstrakte Bilder erzeugen, indem du auch den Farbton zufällig in kleinen Schritten variierst und mehrere Bewegungs- und Zeichenschritte in einem draw-durchgang ausführst. Aufgabenblatt 2 - Animationen und Schleifen 2/ 8
Aufgabe 6 Kreis treffen Zeichne einen Kreis an eine zufällige Stelle auf den Bildschirm. Wenn der Benutzer mit der Maus in den Kreis kommt, soll dieser an eine andere zufällige Position springen. Baue einen Zähler ein, der angibt, wie viele Treffer der Benutzer insgesamt und pro Sekunde erreicht hat. Vorüberlegungen: Wann ist ein Punkt in einem Kreis. Kannst du eine Formel aufstellen (Tipp: 7. Klasse Mathe ;-) )? Wo findet nochmal in Processing die Mausposition? Wie kann man die Position des Kreises speichern? Wie kann man die Positoin des Kreises auf zufällige neue Werte setzen? Aufgabe 7 Pong Baue das Spiel Pong (auch bekannt als Tennis) für einen einzelnen Spieler nach. Das Spiel besteht aus einem Ball, der an allen Rändern des Fensters abprallt außer dem rechten. Dort muss der Spieler mit einem Schläger, den er mit der Maus bewegen kann, den Ball treffen um ihn zurückzuschlagen. Vorüberlegungen: Wie kann man die Bewegung des Balles um n Pixel in x- und y-richtung im Programm darstellen? Wie lässt sich eine Richtungsänderung (beim Abprallen) erreichen? Was sind die Bedingungen für das Treffen der Wand? Was sind die Bedingungen für das Treffen des Schlägers (versuche erst, die vollständige Bedingung umgangssprachlich zu formulieren)? Aufgabe 8 Funktionen zeichnen Zeichne die folgenden Funktionen in unterschiedlichen Farben, wobei die Parameter a und b mit mousex und mousey angepasst werden sollen. Aufgabenblatt 2 - Animationen und Schleifen 3/ 8
f(x) = a sin( x b ) + 150 g(x) = a + h(x) = 100 + b 100 x b 100 x a 100 Du kannst natürlich das Programm auch noch etwas schöner machen, indem du ein ordentliches Koordinatensystem einzeichnest. Aufgabe 9 Wüfeln Simuliere das Werfen von n Würfeln mit jeweils s Seiten. Gib auf dem Bildschirm sowohl das Ergebnis der einzelnen Würfe an, wie auch das Gesamtergebnis. Lass den Benutzer mit der Maus die Variablen für s und n einstellen. Hinweis: Der Befehl int(random(n)) erzeugt eine zufällige ganze Zahl zwischen 0 (inklusive) und n (exklusive). Mit der Variable pmousex kannst du außerdem auf die vorangegangene Mausposition zugreifen und prüfen, ob die Maus bewegt wurde. Aufgabe 10 Kostenvoranschlag Erstelle ein Programm, das einen Kostenvoranschlag für den Bau eines Hauses errechnet. Die Höhe und Breite des Hauses soll mit der Maus einstellbar sein. Der Preis für den Hausbau richtet sich nach den Materialkosten für Beton (je nach Volumen des Hauses) und Glas (je nach Oberfläche des Hauses). Du kannst dabei annehmen, dass das Haus immer eine Quadratische Grundfläche hat. Aufgabe 11 Einfachpendel Simuliere ein einfaches an einer Schnur aufgehängtes Pendel. Die Berechnung der Pendelposition kannst du einfach Schritt für Schritt in jedem draw-durchgang durchführen. Der neue Zustand errechnet sich dabei aus dem alten mit den folgenden Regeln. α(t) = g sin(α(t 1)) l α(t) = α(t 1) + α(t) α(t) = α(t 1) + α(t) Dabei ist α der Winkel zwischen Pendel und Lot (gedachte senkrechte Linie vom Aufhängpunkt nach unten), α die Winkelgeschwindigkeit, α die Winkelbeschleunigung, g = 0.3 pixel Schritt die Gravitation und l = 100 pixel die Länge des Fadens. Aufgabenblatt 2 - Animationen und Schleifen 4/ 8
Aufgabe 12 DNA mit Gegenstrang Stelle einen DNA-Strang den du in einer String-Variablen speicherst grafisch dar und zeichne den dazugehörigen Gegenstrang. Aufgabe 13 Analoguhr Programmiere eine normale analoge Uhr mit Stunden-, Minuten- und Sekundenzeiger. Hinweis: Die Funktion rotate alleine bringt dich noch nicht viel weiter. Versuche sie mit den Funktionen translate, pushmatrix und popmatrix zu verknüpfen. Aufgabe 14 Binäruhr Programmiere eine Uhr, die in jedem draw-durchgang die aktuelle Zeit binär codiert darstellt mit schwarzen bzw. weißen Blöcken für 1 und 0. Du kannst dabei jede Ziffer einzeln in ihre Binärdarstellung übersetzen. Aufgabe 15 7-segment-Uhr Stelle die aktuelle Zeit mit einer selbst programmierten 7-segment-Anzeige dar. Aufgabe 16 Linienalgorithmus Die Funktion line kann jeder benutzen. Kannst du auch einen eigenen Algorithmus schreiben, der eine Linie zwischen zwei beliebigen Punkten zeichnet und dafür als einzige Zeichenfunktion point Aufgabenblatt 2 - Animationen und Schleifen 5/ 8
verwendet? Aufgabe 17 Kreisfunktion Versuche das Zeichenergebnis von ellipse möglichst genau nachzubilden ohne dazu ellipse zu verwenden. Aufgabe 18 3D-Würfel Zeichne einen dreidimensionalen sechsseitigen Würfel, den der Benutzer mit einer schnellen Mausbewegung anstoßen kann. Der Würfel soll sich dann um sich selbst drehen und irgendwann wieder auf einer Seite anhalten. Aufgabe 19 Planetenmodell Simuliere einen Planeten, der um eine Sonne kreist mit einer korrekten Berechnung von Anziehungskräften. Dabei kann die gravitationsbedingte Beschleunigung des ersten Körpers anhand der Masse m 2 des zweiten Körpers und des Abstandes r zwischen beiden Körpern mit der folgenden Formel bestimmt werden: a 1 = G m2 r 2 Bei der Konstante G handelt es sich dabei um die universelle Gravitationskonstante. Ihr Wert beträgt normalerweise 6.67384 10 11 m2 kg s. Da wir aber nicht in Metern, sondern in Pixeln rechnen, 2 setzen wir sie stattdessen einfach auf den Wert 0.001. Der Richtungswinkel für diese Beschleunigung von Körper 1 lässt sich mit der folgenden Formel berechnen: α 1 = atan2 (y 2 y 1, x 2 x 1 ) Dabei ist der Punkt (x 1, y 1 ) das Zentrum von Körper 1 und der Punkt (x 2, y 2 ) das Zentrum von Körper 2. Die Funktion atan2 ist in Processing bereits vorhanden. Die Formeln für den Zweiten Körper erhält man natürlich entsprechend, indem man die Indices 1 und 2 vertauscht. Aufgabenblatt 2 - Animationen und Schleifen 6/ 8
Hinweis: Am Anfang hilft es sehr, die Animation erst einmal mittels noloop() anzuhalten und die Geschwindigkeit und Beschleunigung als farbige Linie kenntlich zu machen. Aufgabe 20 Fibonacci-Blume Die Anordnung der einzelnen Blüten in einer Sonnenblume wird oft als Beispiel angeführt für das Auftreten der Fibonacci-Zahlen bzw. des goldenen Schnitts in der Natur. Die Bildungsregel, die ein solches Muster erzeugt ist eigentlich sehr einfach, wie an folgendem Pseudocode ersichtlich wird: Beginne im Zentrum der Figur Wiederhole für i = 1 bis n: drehe dich um einen Anteil r einer vollen Drehung Bewege dich ein Stück vorwärts Zeichne eine Blüte Die Drehungsrate r ist dabei ein fester Wert. Nimmt man hier den goldenen Schnitt von ca. 0.618034, dann bekommt man ein Muster, dass dem der Sonnenblume tatsächlich sehr ähnlich ist. Es ist aber noch viel interessanter, einmal zu sehen, was man mit anderen Werten noch für Organisationen erreichen kann und warum der goldene Schnitt hier vielleicht evolutionäre Vorteile bringen könnte. Schreibe dazu einen Algorithmus der die Fibonacci-Blume für ein variables r zeichnet und lasse den Benutzer dieses r dann mit der Maus auswählen. Hinweis: Um die Figur hübscher zu machen, kann man die Schrittweite und die größe der Blüten in jedem Schritt etwas vergrößern. Aufgabe 21 Lissajous-Figuren Wenn man den Elektronenstrahl bei einem Oszilloskop in x- und y-richtung jeweils mit einer sinusförmigen Schwingung ablenkt, erhält man sogenannte Lissajous-Figuren (benannt nach dem Physiker Jules Antoine Lissajous). Aufgabenblatt 2 - Animationen und Schleifen 7/ 8
Quelle: Wikimedia, Omegatron (CC3) Diese Figuren lassen sich mit den folgenden (vereinfachten) Funktionen nachbilden: x(t) = 100 sin(a t) y(t) = 100 sin(b t) Dabei geben x(t) und y(t) jeweils die x- und y-koordinaten von Punkten auf der Lissajous-Linie. Mit fortlaufendem t entsteht die fertige Kurve. Lass den Benutzer die Parameter a und b mit der Maus einstellen (a = mousex 100, b = mousey 100 ) und zeichne die Lissajous-Figur von t = 0 bis t = 100 mit einer Schrittlänge von 0.1. Aufgabenblatt 2 - Animationen und Schleifen 8/ 8