Wir haben bisher bereits Programme geschreiben, in welchen sich Objekte bewegt haben. Hier ist nun wieder ein solches Programm dargestellt, allerdings mit einer kleinen Neuerung. Das Programm benötigt ihr für Aufgabe 1.
int xPos = 0; int v = 3; void setup() { size(600, 400); } void draw() { background(0); stroke(255, 0, 0); strokeWeight(10); xPos = xPos + v; // ??? if (xPos > width) { xPos = 0; } point(xPos, height / 2); }
Vollzieht das Beispiel nach und beschreibt mit eigenen Worten was das Programm tut. Achtet dabei besonders auf die Stelle mit den Fragezeichen.
- Wie ist eine Verzweigung aufgebaut?
- Wofür werden Verzweigungen benötigt?
a)
int xPos = 0; int v = 3; void setup() { size(600, 400); } void draw() { background(0); stroke(255, 0, 0); strokeWeight(10); xPos = xPos + v; // Verzweigung if (xPos > width){ xPos = 0; } // Änderung der Farbe des Punktes if (xPos > 150) { stroke(0, 255, 0); } if (xPos > 300) { stroke(0, 0, 255); } if (xPos > 450) { stroke(255, 255, 0); } point(xPos, height / 2); }
b)
float xPos = 0; float yPos = 0; // Geschwindigkeit angepasst an die Fenstergröße float v1 = 3; float v2 = 2; // Größe des Punktes float g = 10; void setup() { size(600, 400); } void draw() { background(0); stroke(255, 0, 0); strokeWeight(g); xPos = xPos + v1; yPos = yPos + v2; // Vergrößerung des Punktes bei jeder Aktualisierung g = g + 0.1; // Verzweigung if (xPos > width || yPos > height) { xPos = 0; yPos = 0; } // Änderung der Farbe des Punktes if (xPos > 150) { stroke(0, 255, 0); } if (xPos > 300) { stroke(0, 0, 255); } if (xPos > 450) { stroke(255, 255, 0); } point(xPos, yPos); }
Wir haben uns bisher meistens mit relativ übersichtlichen Programmen beschäftigt und selbst da wurde es teilweise schwierig nachzuvollziehen, was der Code eigentlich genau tut. Da wir nicht die einzigen sind, die dieses Problem haben, gibt es viele Möglichkeiten Algorithmen übersichtlich aufzuschreiben. Eine sehr weit verbreitete Variante sind die sogenannten Programmablaufpläne, kurz PAPs genannt. Um diese werden wir uns nun kümmern. Dazu hier ein Beispiel für einen solchen PAP:
Schaut euch den PAP genau an und versucht nachzuvollziehen, was dieser bewirkt. Schreibt dann ein Processing-Programm dazu.
- Aus welchen Komponenten kann ein PAP bestehen?
Das Programm füllt den Bildschirm abhängig von der Klick-Position:
- Pink, wenn linke Hälfte angeklickt wurde
- Weiß, wenn rechte Hälfte angeklickt wurde
void setup() { size(300, 300); } void draw() { noStroke(); rect(0, 0, width, height); } void mousePressed() { if (mouseX < width / 2) { fill(255, 0, 255); } else { fill(255, 255, 255); } }
a)
// Startpunkt x=10 statt x=0, da sonst die zweite Bedingung den Start blockiert float x = 10; // Geschwindigkeit float a = 5; void setup() { size(800, 400); // Farbe des Kreises bei Programmstart fill(255, 255, 0); } void draw() { background(0); // Abprallen von der rechten Kante. Richtungswechsel durch Vorzeichenumkehr bei der Geschwindigkeit if (x > width - 10) { a = -a; fill(255, 0, 0); } // Abprallen von der linken Kante if (x < 10) { a = -a; fill(255, 255, 0); } ellipse(x, 100, 20, 20); x = x + a; }
b)
// Startposition des Balles float x = 100; float y = 100; // Geschwindigkeit des Balles in x- bzw. y-Richtung float vX = 2; float vY = 6; void setup() { size(300, 300); } void draw() { background(0); // Bewegung des Balles x = x + vX; y = y + vY; // Überprüfen, ob der Ball abprallt if ((x > width - 10) || (x < 10)) { vX = -vX; } if ((y > height - 10) || (y < 10)) { vY = -vY; } // Ball zeichnen fill(255); ellipse(x, y, 20, 20); }
Bisher sind die Programme meistens mit bedingten Anweisungen ausgekommen. Technisch gesehen reichen diese auch aus um alles umzusetzen was wir brauchen. Häufig ist es jedoch hilfreich auch mal einen Alternativen Fall angeben zu können, also ein Entweder-Oder. Im Fachkonzept zu den Verzweigungen habt ih davon auch schon gelesen. Es handelt sich hier um das else
. Dieses werden wir im Folgenden Beispiel nutzen. Außerdem kommen noch verknüpfte Bedingungen hinzu. Somit lassen sich anspruchsvollere Bedingungen stellen als bisher.
void setup() { size(300, 300); } void draw() { background(0); if (mouseY < height / 2 && mouseX < width / 2) { fill(#16F5AC); } else if (mouseY < height / 2 && mouseX > width / 2) { fill(#AF49E8); } else if (mouseY > height / 2 && mouseX < width / 2) { fill(#FFF417); } else if (mouseY > height / 2 && mouseX > width / 2) { fill(#F5071B); } circle(mouseX, mouseY, 30); }
Vollzieht das Code-Beispiel nach und versucht zu verstehen, was es tut.
- Welche Möglichkeiten gibt es, Bedingungen miteinander zu verknüpfen?
In folgendem Feld bewegt sich ein Kreis fortlaufend von links nach rechts. Solange er im schwarzen Feld ist, ist er weiß, läuft er durch das weiße Feld, ist er schwarz. Löse das Problem mit einer if-else-Anweisung sowie verknüpften Bedingungen.
float x = 0; void setup() { size(300, 200); } void draw() { background(255); noStroke(); fill(0); rect(0, 0, 100, 200); rect(200, 0, 100, 200); if (x > 100 && x < 200) { fill(0); } else { fill(255); } ellipse(x, 100, 30, 30); x = x + 1; if (x > 300) { x = 0; } }