Wir haben im vorherigen Kapitel bereits Formen auf dem Bildschirm zur Bewegung gebracht. Bisher bewegen sich diese Formen jedoch immer aus dem Bildschirm heraus. Um dies zu ändern, muss das Programm zur Laufzeit überprüfen können, wo sich das Objekt auf dem Bildschirm befindet.
Vorbereitungen (Wiederholung)
Wir wollen nun ein Rechteck Programmieren, das umdreht, wenn es den Rand erreicht. Somit deklarieren wir zuerst die nötigen Attribute für die Position des Objektes auf dem Bildschirm.
int xRechteck; //Zahl xRechteck
int yRechteck;
int vRechteck; //Zahl für die Bewegung nach rechts
Mit den Attributen können wir nun x und y Koordinate des Rechtecks zur Laufzeit verändern. Als nächstes implementieren wir die setup() Methode, damit wir einen Oberfläche der Größe 500x400 haben und das Rechteck an einer passenden Position erstellt wird.
void setup()
{
size(500,400); //setzt Größe der Anzeige
xRechteck = 100; //Zuweisung x wird 100
yRechteck = 40; //Zuweisung y wird 40
vRechteck = 1; //Bewegungsgeschwindigkeit 1
rect(xRechteck, yRechteck, 20, 20); //Rechteck zeichnen
}
Damit nun das Rechteck sich bewegt brauchen wir die draw() Methode, die die x Koordinate verändert und das Rechteck neu zeichnet.
void draw()
{
background(0,0,200); //neu zeichnen des Frames
xRechteck = xRechteck+vRechteck; //Rechteck bewegen
rect(xRechteck, yRechteck, 20, 20); //Rechteck zeichnen
}
Die bedingte Anweisung
Die Entscheidung, die Das Programm nun zur Laufzeit treffen muss geschieht immer nachdem die Position des Rechtecks um eins nach links verschoben wurde:
WENN das Rechteck nach rechts aus der Anzeige geht
DANN Bewegungsrichtung umdrehen
Im Struktogramm der 7. Klasse dargestellt sieht das dann aus wie rechts.

In Code übersetzt, brauchen wir die englische Formulierung für eine Bedingung:
if(xRechteck>500)
{
vRechteck=vRechteck*(-1);
}
//Start mit if für WENN
//Start der Bedingten Anweisung
//vRechteck dreht um
//Ende der Bedingten Anweisung
Dieser Befehl muss nun nur noch an der passenden Stelle in der draw() Methode eingefügt werden und schon dreht unser Rechteck um.
Eine einseitige bedingte Anweisung hat die Syntax:
if(Bedingung) { //Das mache ich wenn die Bedingung erfüllt ist }Eine Bedingung ist ein Ausdruck, der entweder WAHR oder FALSCH ist.
Merksatz 2.1.1
Aufgabe 1:
Bei den Aufgaben verwenden wir die Entwicklungsumgebung Processing. Wenn du einen Befehl suchst, schaue auf https://processing.org/reference nach!
- Deklariere Attribute für die Zahlen
breite,hoehe,xRechteckundyRechteck. - Implementiere die
setup()unddraw()Methoden. Dabei soll die Größe des Fensters auf Breite500und Höhe400gesetzt werden. - Deklariere zusätzlich ein Attribut
vRechteck. - Weise den globalen Attributen eigene Werte in der
setup()Methode zu. - Ermögliche mit der
draw()Methode die Bewegung des Rechtecks nach rechts aus dem Bildschirm.
Aufgabe 2:
Wir sorgen nun dafür, dass das Rechteck am Rand abprallt:
- Baue eine Bedingte Anweisung in deiner
draw()Methode ein, die dem Struktogramm rechts folgt.

- Zeichne ein Struktogramm einer Bedingten Anweisung, die dein Rechteck auch von der linken Seite abprallen lässt und setze es in Code um.
Aufgabe 3:
- Überlege, welche Erweiterungen nötig sind, damit dein Rechteck sich auch in y-Richtung bewegt und von allen Rändern abprallt.
- Achte darauf, dass das Rechteck immer mit seinem Rand von den Seiten abprallt und nicht aus der Anzeige verschwindet und dann umdreht.
Aufgabe 4:
- Erweitere dein Programm um eine Ellipse, die gleich wie das Rechteck an allen Rändern abprallt. Die Ellipse sollte dabei kleiner als das Rechteck sein.
- Lasse deine Objekte die Farbe wechseln, je nachdem in welche Richtung sie sich bewegen.
Aufgabe 5: (Advanced Stuff)
- Überlege, an welcher Stelle im Code du ansetzen müsstest, um deine Ellipse von deinem Rechteck abprallen zu lassen. Zeichne passende Struktogramme für den nötigen Code und setze sie in deinem Code um.
- Sorge dafür, dass dein Rechteck die Farbe wechselt, wenn es vom Ball getroffen wird.
- Wie könntest du erreichen, dass der Ball schneller wird, wenn er vom Rechteck erwischt wird? Könntest du beiden Formen eine Masse geben, so dass Ihre Geschwindigkeiten sich realistisch beim Abprallen verändern?
- Processing bietet automatisch die (unsichtbaren) globalen Attribute
mouseXundmouseYzum Abfragen, welche Position auf der Zeichenfläche der Mauscursor hat. Baue eine Form ein, die automatisch deinem Mauszeiger folgt. - Sorge dafür, dass deine anderen Formen von deinem Mauscursor-Objekt abprallen.
- Die
mouseClicked()Methode wird ausgeführt, wenn die linke Maustaste gedrückt wird. Lasse damit die Farbe deines Rechtecks wechseln (zwischen drei vordefinierten Farben). - Kannst du in der Referenz einen Befehl finden um eine Score auf dem Bildschirm anzuzeigen?
Lösungen der Aufgaben (nur für Abonnenten):
Hier findest du alle Lösungen der Aufgaben dieses Kapitels.