Bewegungen 2 – Woche 6

Aufgaben

F1: Wiederholungen, immer nur Wiederholungen

Lösung

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

Ein paar andere Entwürfe:

Lösung

Lösung

F2: BouncingBall

Lösung

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

Lösung

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: Beziehungen

Erstelle einen Sketch zum Thema "Beziehungen". Deine Grafik oder dein interaktives Programm soll das Konzept "Beziehung" kommunizieren. Vorrangig soll es hierbei um die Grundidee gehen, und nicht etwa aufwändige Animationen erstellen. Ihr dürft nur schwarz, weiß und drei weitere Farben verwenden.

Im Folgenden einige Beispiele (dies sind nur Anregungen):

• Beziehung zwischen zwei Menschen oder Gruppen symbolisch umsetzen
• Soziale Relationen aufzeigen (siehe Soziale Netze, Web2.0)
• Verbindungen zwischen Objekten/Ideen visualisieren (etwa die Beziehung zwischen Tag und Nacht)

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 Mittwoch, 28.05.08, 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.

• Processing Reference: mouseButton
• Processing Reference: ==

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.

• Processing Reference: keyPressed

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.

• Processing Reference: key

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.