Verzweigungen

Ein neues Programmelement

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);
}

Aufgabe 1 - Das Beispiel verstehen

Vollzieht das Beispiel nach und beschreibt mit eigenen Worten was das Programm tut. Achtet dabei besonders auf die Stelle mit den Fragezeichen.

Lösungsvorschlag Aufgabe 1

Das Programm zeigt einen roten Punkt, der immer wieder von links nach rechts läuft. An der Stelle mit den Fragezeichen wird überprüft, ob der Kreis sich rechts aus dem Fenster heraus bewegt hat. Wenn dies der Fall ist, wird seine x-Koordinate wieder auf null gesetzt. Er wird somit wieder an den linken Rand zurück gesetzt. Es handelt sich hierbei um eine sogenannte Verzweigung.

Aufgabe 2 - Fachkonzept Verzweigung

Lest euch das Fachkonzept: Verzweigung durch und beantwortet folgende Fragen:

Wie ist eine Verzweigung aufgebaut?
Wofür werden Verzweigungen benötigt?

Aufgabe 3 - Übung zur Verzweigung

a) Ändere das obige Programm so ab, dass der Punkt alle 150px seine Farbe ändert.

b) Ändere das Programm so ab, dass der Punkt sich von links oben nach rechts unten bewegt und zunehmend größer wird.

Lösungsvorschlag Aufgabe 3

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);
}

Wie schreibt man Algorithmen eigentlich übersichtlich auf?

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:

info:sek-ii:e2:processing:einstiegsbeispiel.png

Aufgabe 4 - Programm zu PAP schreiben

Schaut euch den PAP genau an und versucht nachzuvollziehen, was dieser bewirkt. Schreibt dann ein Processing-Programm dazu.

Aufgabe 5 - Fachkonzept PAP

Lest euch das Fachkonzept: Programmablaufpläne (PAPs) durch und beantwortet folgende Frage:

Aus welchen Komponenten kann ein PAP bestehen?

Lösungsvorschlag Aufgabe 4

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);
  }
}

Aufgabe 6 - PAP und Code erstellen

Erstellt zu den Aufgaben jeweils sowohl einen PAP (per Hand oder mit draw.io) als auch den Sketch in Processing.

a) Ein Ball soll sich auf der Zeichenfläche von links nach rechts bewegen und dann jeweils von der Seite abprallen und sich wieder zurückbewegen. Bei jedem Abprall ändert er zudem seine Farbe.

b) Der Ball soll sich nun beliebig auf der Zeichenfläche bewegen und jeweils vom Rand abprallen. (Auf die Farbänderung kann nun verzichtet werden.)

Lösungsvorschlag Aufgabe 6

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);
}

Entweder oder…

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);
}

Aufgabe 7 - Das Beispiel verstehen

Vollzieht das Code-Beispiel nach und versucht zu verstehen, was es tut.

Aufgabe 8 - Fachkonzept Bedingungen

Lest das Fachkonzept: Bedingung und beantwortet folgende Frage:

Welche Möglichkeiten gibt es, Bedingungen miteinander zu verknüpfen?

Aufgabe 9 - Farbwechsel

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.

Lösungsvorschlag Aufgabe 9

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;
  }
}

Vorbereitung für Programmierprojekt

Was für ein Projekt???

Vermutlich haben die meisten von euch Spaß an Computerspielen. Daher ist es das Ziel dieser Einheit, dass ihr am Ende ein kleines Computerspiel programmiert¹⁾. Die Entwicklung von Computerspielen macht auf der einen Seite sehr viel Spaß, auf der anderen Seite werden dort viele Programmierkenntnisse und auch etwas Physik gebraucht. Keine Panik, wir werden jetzt nicht tief in die Physik einsteigen. Wir müssen uns hier aber ein paar Dinge anschauen, damit ihr sie später nutzen könnt.

Ihr braucht für die Umsetzung der Beispiele nicht viel mehr als das, was ihr bisher gelernt habt. Folgende Funktionen kommen nun noch hinzu:

radians(): In Processing müssen Winkel im sogenannten Bogenmaß angegeben werden. Dieses können wir mit Hilfe der radians()-Funktion aus den bekannten Winkelgrößen berechnen.
sin(), cos(), tan(): Die Winkelfunktionen brauchen wir häufiger, um z.B. Seitenlängen in Dreiecken zu berechnen.
pow(): Mit der pow()-Funktion können Zahlen potenziert werden.

Recherchiert für die Aufgaben jeweils zunächst die passenden Formeln. Es werden Formeln benötigt, die jeweils einem x ein y bzw. f(x) zuordnen.

Aufgabe 10 - Freier Fall

Eine schwere Kugel rollt mit einer Anfangsgeschwindigkeit v zur Kante und fällt dann zu Boden. Wenn sie dort aufschlägt, rollt sie weiter bis zum rechten Rand und bleibt dann liegen. Um eine realistische Darstellung zu erhalten, muss man mit der Zeitvariable und der Framerate etwas experimentieren.

Lösungsvorschlag Aufgabe 10

//Startpunkt der Kugel
float x = 10;
float y = 90;
//Festlegung der Startgeschwindigkeit
float v = 4;
//Startwert für die Zeitvariable (t>0)
float t = 0.1;
 
void setup() {
  size(400, 600);
  frameRate(30);
}
 
void draw() {
  background(0);
 
  //Zeichnen der Kante
  fill(255);
  rect(0, 100, 150, 500);
 
  if (x < 150) {
    //Bewegung der Kugel vor der Kante
    x = x + v;
    y = 90;
  } else {
    //Fall der Kugel
    x = x + v * t;
    y = y + 0.5 * 9.81 * t * t;
  }
 
  //Auftreffen der Kugel am Boden und Weiterrollen
  if (y > height - 10) {
    x = x + v;
    y = height - 10;
  }
 
  //Halten der Kugel an der Wand
  if (x > width - 20) {
    x = width - 10;
    y = height - 10;
  }
 
  //Zeichnen der Kugel
  fill(255);
  ellipse(x, y, 20, 20);
 
  //Aktualisierung der Zeitvariable
  t = t + 0.05;  
}

Aufgabe 11 - Schiefe Ebene

Eine Kugel rollt eine Schiefe Ebene hinab. Als Erweiterung kann man die Kugel zum rechten Rand weiterrollen lassen. Zu diesem Zweck benötigt man die Geschwindigkeit der Kugel am Ende der schiefen Ebene.

Lösungsvorschlag Aufgabe 11

//Position des Kreises
float y;
float x;
//Neigungswinkel der schiefen Ebene
float alpha = radians(10);
//Die Position wird 60 mal pro Sekunde aktualisiert, also t = 1/60
float t = 0.167;
 
void setup() {
  size(1800, 800);
}
 
void draw() { 
  //Hintergrund um den Nachzieheffekt zu vermeiden
  background(0);
 
  //Schiefe Ebene
  fill(255);
  triangle(0, height - 400, 0, height, (height - 400) / sin(alpha), height);
 
  //Positionsveränderung
  //Teiler 60 um die Darstellung flüssiger zu machen
  y = (y + 0.5 * 9.81 * pow(t,2)) / 60;
  x = y / tan(alpha);
 
  //Zeichnen der Kugel
  ellipse(x, y + (height - 420), 40, 40);  
 
  //Aktualisierung der Zeitkomponente
  t = t + 0.167;
}

Aufgabe 12 - Freier Fall

Das Programm zeigt die Flugbahn eines Projektils bei verschiedenen Abschusswinkeln und Abwurfhöhen an.

Lösungsvorschlag Aufgabe 12

float alpha = radians(30);
float x = 0;
float y; 
float v = 10;
 
void setup() {
  size(1200, 800);
}
 
void draw() {
  if (y > height - 30) {
    y = height - 20;
    noLoop();
  }
 
  y = 700 - x * tan(alpha) + (9.81 * pow(x, 2)) / (2 * pow(v * cos(alpha), 2)) / 100;
  stroke(255, 0, 0);
  strokeWeight(3);
  fill(255);
  point(x, y);
 
  x = x + 8;
}

¹⁾

Details dazu folgen noch