Bewegungen 2 – Woche 6
Aufgaben
F1: Wiederholungen, immer nur Wiederholungen
Entwirf eine Grafik, die aus einfachen grafischen Elementen besteht, die wiederholt eingesetzt werden. Dabei sollen die Farbe zufällig gewählt werden. Lasse dein Programm öfter laufen, und wähle besonders gelungene Kompositionen aus.
Beispiel: Dreifache Wiederholung von zufällig gefärbten Elementen
F2: BouncingBall
Erweitere das Bewegungs- und Kollisionsbeispiel aus der Vorlesung so, dass sich der Punkt auch vertikal bewegt. Füge dazu analog zur x-Kollisionsprüfung eine y-Prüfung ein.
Variante: Lösche dann den Hintegrund nicht jedesmal.
Variante: Ändere die Initialwerte der Geschwindigkeitsvariablen und beobachte, was passiert.
F3: Interaktive Grafik
Zeichne zufällig positionierte Kreise, deren Aussehen abhängig von Tastatur-Interaktion ist. Zum Beispiel könnte die Größe jedes neuen Kreises davon abhängig sein, ob man die Taste S, M oder L drückt.
Variante: Mache zwei verschiedene Eigenschaften der Kreise von Tasten abhängig.
Projekt 1: Kontrast
Erstelle einen Sketch zum Thema "Kontrast". Deine Grafik oder dein interaktives Programm soll den Gegensatz zweier Ideen vermitteln. Zum Beispiel: - Hase und Igel (schnell und langsam) - Tag und Nacht (hell und dunkel) - Krieg und Frieden (aggresiv und sanft) - Regen und Sonne (dunkel/naß und hell/trocken) - Im Auge des Sturms (ruhig und wild)
Dokumentation
Schreibt als Kommentar am Anfang in euren Code:
- Vollständige Namen aller Gruppenmitglieder
- Projektbeschreibung: Was ist die Idee/der Hintergrund? Was macht das Programm?
- Eventuelle Schwierigkeiten, bzw. Unvollständigkeiten in der Umsetzung
Style
Achtet darauf, dass ihr den Code formattiert, sinnvolle, aussagekräftige Variablennamen verwendet und – vor allem – gut kommentiert. (Siehe auch den Style Guide)
Abgabe
Die Projekte müssen im Intranet der BTK eingereicht werden. Archiviert euren Sketch (Processing Menü > Tools > Archive Sketch) und ladet diese Zip-Datei bei der entsprechenden Aufgabe hoch.
Letzter Abgabetermin ist Donnerstag, 07.06.07 um 23:59 Uhr.
Bewegung & Kollision
Eine Bewegung ist eine Veränderung der Lage über die Zeit. Mittels Software kontrollieren wir fortlaufend die Position von visuellen Elementen und erzeugen somit den Eindruck einer Bewegung. Kontinuierliche Bewegungen entstehen, da wir die Bilder der Einzelschritte mental zusammen legen, und so Bewegung wahrnehmen.
Bevor wir eine Bewegung durch einen Code umsetzen, müssen wir entscheiden, welcherlei Bewegung entstehen soll. Dazu schauen wir uns beispielhaft einige Bewegungen an, bzw. stellen uns vor, wie
- sich ein Mensch fort bewegt
- ein Stift auf den Boden fällt
- ein Gummiball wiederholt hüpft
- ein Auto im Straßenverkehr beschleunigt und abbremst
- eine Fliege im Zimmer umherschwirrt.
Wir können uns also die Fragen stellen: Wie simulieren wir solche Bewegungen? Wie können wir die Umwelt imitieren und interessante, "natürliche" Bewegungen erzeugen?
Im Folgenden lege ich Schritt für Schritt (und teils wiederholt) dar, wie man einfache Bewegungen programmiert.
Lineare Bewegung
Einfache gradlinige Bewegung für ein visuelles Element kann erzeugt werden, in dem die Position dieses Elements fortlaufend verändert wird.
Im Beispiel wird dies erreicht, da die x-Position ständig um 1 erhöht wird: Der Punkt wandert also nach rechts.
Geschwindigkeit
Der Wert, mit der die Variable x verändert wird, kann als die Geschwindigkeit bezeichnet werden. Hierfür können wir wiederum eine Variable
einführen.
Im folgenden Code wird eine Variable v (für velocity) eingeführt, mit dessen Wert die x-Position geändert wird.
Jetzt wird der Punkt pro Schritt um 2 Pixel bewegt; die Geschwindigkeit hat sich somit erhöht.
Wenn der Wert der Variablen v negativ wäre (also bspw. v = -3;), dann würde sich der Punkt folglich nach links bewegen.
Möchte man nun noch eine Beschleunigung und Abbremsung simulieren, könnte man die Geschwindigkeitsvariable v wiederrum
über die Zeit ändern.
Kollision & Abprall
Wenn wir eine Kollision in Processing erkennen wollen, d.h. das Aufeinandertreffen zweier visueller Elemente, müssen wir bestimmte Bedingungen prüfen. Und zwar, ob diese beiden Elemente kollidiert sind, also ob sie sich an gleicher Position befinden.
Wenn x größer/gleich der Weite ist, dann bedeutet dies, dass der Punkt den rechten Rand berührt, er also mit dem Rand kollidiert.
In diesem Fall soll die Geschwindigkeit umgedreht werden, so dass sich der Punkt danach nach links bewegt.
Dies kann nun analog auch für den linken Rand geprüft werden:
Interaktion 2
Damit eine computergenerierte Grafik oder ein anderes Programm auf Nutzeraktionen reagieren kann, muss der Computer Informationen aus der realen, physischen Welt aufnehmen können. Hierzu gehören inbesondere die Maus und die Tastatur, natürlich aber auch viele weitere Eingabegeräte wie etwa
- Mikrophon
- Kamera
- MIDI-Keyboard
- andere Sensoren, wie z.B. elektronische Thermometer.
Wir haben bereits gesehen, wie auf einen Mausklick reagiert wird. Im Folgenden schauen wir uns an, wie User weitere Interaktionsmöglichkeiten erhalten – wie sie mit Hilfe der Maus und wie mit Hilfe der Tastatur mit einem Programm interagieren können.
mouseButton
Mit Hilfe der Processing-Variable mouseButton können wir abfragen, welche Maustaste geklickt wurde. Dazu können wir
prüfen, ob der Wert in mouseButton einen der folgenden drei Variablen gleicht:
LEFT(für die linke Maustaste)CENTER(für die mittlere)RIGHT(für die rechte)
Wichtig ist hierbei, dass für die Prüfung zwei Gleichheitszeichen verwendet werden (und nicht nur eins). Siehe hierzu Relationale Operatoren.
keyPressed
Um mit der Tastatur interaktiv in das Programmgeschehen eingreifen zu können, muss unser Code abfragen, ob eine Taste gedrückt wurde.
Dies geschieht mit Hilfe der Variablen keyPressed und ist äquivalent zur Maus-Abfrage mousePressed.
key
Nun können wir — wie bei der Maustaste — abfragen, welche Taste der User gedrückt hat und auf diese reagieren.
Hierzu verwenden wir key und prüfen, ob diese Processing-Variable den Wert eines bestimmten Zeichens hat. Die
Zeichen geben wir vom Datentyp char (Character) an, die von einfachen Anführungszeichen umrahmt werden.
Hinweis
mouseButton wie auch key sollten meist nur abgefragt werden, wenn auch geprüft wurde, dass
die Maus, bzw. eine Taste gedrückt wurde. Ansonsten werden die Anweisungen innerhalb des if-Blocks immer wieder
ausgeführt, da die Variablen (mouseButton und key) noch den alten Wert besitzen.
Änderungsoperatoren
Häufig verwendete Änderungen von Variablen können wir auch kürzer schreiben. Statt die Zuweisung a = a + 1 zu verwenden, können wir
auch a++ benutzen. Neben diesen Incrementer (increment: englisch für Zuwachs) gibt es noch weitere Operatoren,
die kürzere Schreibweisen haben, und dadurch den Code lesbarer halten.