Variablen & Interaktion – Woche 2

Aufgaben

B1: Zeichenprogramm

Lösung

Zeichne einen Punkt, wo je die Maus ist. Dabei soll der gezeichnete Weg bestehen bleiben.

B2: Spinne

Lösung

Erstelle eine interaktive Linien-Zeichnung.

Beispiel: Acht Linien, die zur Maus zeigen.

B3: Dynamische Komposition

Lösung

Zeichne eine Linie von Punkt 1 zu Punkt 2, und eine Linie von Punkt 3 zu Punkt 4. Ändere dann die Größe des Zeichenbereichs: Die Linien sollen weiterhin gleich aussehen.

B4: Dynamische Komposition 2

Lösung

Zeichne ein Quadrat so, dass der obere linke Eckpunkt in der Mitte des Zeichenbereichs liegt, und die Größe ein Viertel der Weite beträgt.

Verwende drei int-Variablen, und benenne sie x, y, und s.

bei 100×100 Pixel

bei 200×200 Pixel

B5: Mausi

Lösung

Zeichne ein visuelles Element so, dass es sich abhängig von der Maus bewegt. Dabei soll das Element aber nicht immer direkt an der Mausposition sein.

B6: Wachsender Kreis

Lösung

Zeichne einen Kreis (keine Ellipse!), dessen Größe von jeder Mausbewegung abhängt. Die Größe des Kreises soll sich ändern, wenn die Maus vertikal und auch wenn sie horizontal bewegt wird.

---

Variablen

Eine Variable ist ein Zeiger zu einer Speicherstelle im Computer. Man kann sich eine Variable als Platzhalter vorstellen, als eine Schublade, in der Daten zwischen gelagert werden. Computer verarbeiten immer nur eine Anweisung pro Zeit; mit Hilfe von Variablen können wir also Informationen an einem Schritt im Programm speichern, und an einem späteren wieder benutzen.

Eine Variable hat

• einen Namen und
• einen Typ.

Datentypen

Jede Variable hat einen bestimmten Typ, der vor der Benutzung explizit festgelegt werden muss. Dieser ist unveränderbar und bestimmt darüber, welche Daten in der Variable gespeichert werden können. Wir werden am häufigsten int, float und boolean verwenden. Alle hier genannten Typen sind sogenannte primitive Datentypen. Später werden wir noch andere Datentypen kennen lernen.

In Processing wird eine Variable definiert, in dem zunächst der Typ, dann der Name und schließlich der Anfangswert angegeben werden.

Nachdem wir eine Variable deklariert (also Typ und Name festgelegt) haben, können wir die Variable im Programm beliebig oft verwenden und auch ändern. Hierzu muss man nur noch den Namen angeben, zum Beispiel:

Zuweisung

Die Änderung einer Variable geschieht über eine Zuweisung: variable = neuer Wert, z.B. x = 20; Dabei muss der neue Wert immer vom gleichen Typ wie die Variable sein (char letter = 10; ginge also nicht).

Ausdrücke

Computer wurden ursprünglich dafür erfunden, um uns Menschen Rechenarbeit abzunehmen (daher auch "Rechner"). Auch heute sind Berechnungen die grundlegende und in der Programmierung eine der wichtigsten Aufgaben. Um arithmetische Aufgaben zu berechnen, verwenden wir Ausdrücke.

Ausdrücke können auch direkt in Anweisungen eingesetzt werden:

Processing-Variablen

Processing definiert einige spezielle Variablen, die wir direkt verwenden können, ohne sie selbst deklarieren zu müssen. Dadurch ermöglicht Processing häufig wiederkehrende Aufgaben zu vereinfachen.

mouseX

Die horizontale Position des Mauszeigers

mouseY

Die vertikale Position des Mauszeigers

width

Die Weite des Zeichenbereichs

height

Die Höhe des Zeichenbereichs

mousePressed

Eine boolean-Variable, die den Wert true hält, wenn die Maustaste gedrückt ist, und false, wenn sie nicht gedrückt ist

setup() und draw()

Um nicht nur statische, sondern interaktive und dynamische Formen zeichnen zu können, muss setup() und draw() verwendet werden.

Innerhalb von setup() sollten allgemeine Einstellungen vorgenommen werden (z.B. Größe des Zeichenbereichs setzen oder Bilder laden). Die Anweisungen in setup() werden einmal am Anfang ausgeführt. In draw() können dann Formen gezeichnet werden, die sich über die Zeit verändern; etwa durch Berechnungen oder durch Interaktion. Anweisungen in draw() werden wiederholt ausgeführt, bis das Programm gestoppt wird.

• Processing Reference: setup()
• Processing References: draw()
• Processing Examples: Setup and Draw

Variablen in draw()

Um eine Variable fortlaufend zu verändern, muss diese Zuweisung in der draw-Funktion stehen. Die Deklaration der Variable aber muss außerhalb von setup und draw stehen.

Wie können einer Variable auch einen Ausdruck zuweisen, in der der Wert der Variable selbst verwendet wird (wie im Summenbeispiel aus der Vorlesung: sum = sum + 3)