Projekt - Tag und Nacht

---

Es wird Zeit für ein erstes Projekt. Dabei werden wir alles einsetzen, was Sie bislang gelernt haben und Sie werden natürlich noch einiges Neues dabei kennenlernen.

Unser kleines Programm soll eine Tag-Nacht-Simulation sein. Dazu soll der Weg der Sonne über den Himmel animiert werden.

---

Prototyp

Zuerst erstellen wir ein Prototyp für die Programmoberfläche. Ein Prototyp ist eine gezeichnete Idee, wie die Oberfläche des Programms, das programmiert werden soll, aussehen könnte. Einen Prototyp erstellt man mit einem Grafikprogramm.

Hier verwenden wir das Online-Grafikprogramm Gravit. Öffnen Sie bitte folgenden Link in einem neuen Tab: Gravit starten (wenn Sie ein anderes Grafikprogramm bevorzugen, können Sie auch gerne Ihr favorisiertes Programm verwenden).

Hinweise zu Gravit:

• Legen Sie eine neue Zeichnung an, indem Sie auf New Design klicken. Geben Sie bei width (= Breite) die Zahl 400 und bei heigth (= Höhe) die Zahl 300 ein. Klicken Sie dann auf Create!.
• Wenn Sie die Maus über die Zeichenfläche bewegen, können Sie die Koordinaten sehen, es gibt auch für die Positionierung der Objekte Hilfslinien, die automatisch eingeblendet werden.
• In der rechten Eigenschaftsleiste können Sie die Farbe,... anpassen.
• Experimentieren Sie etwas mit dem Programm.

Zeichnen Sie zur Übung jetzt folgende Bilder mit Gravit nach.

Prototyp: Tag

Prototyp: Nacht

Diese beiden Grafiken sind Vorlagen für die Oberfläche, die jetzt programmiert werden soll.

---

Oberfläche: Tag

Nachdem das Aussehen der Oberfläche entworfen ist, muss diese programmiert werden. Als neue Sequenz benötigen Sie die Anweisungen, um einen Text auf dem Bildschirm auszugeben:

  fill('Black');
  textSize(30);
  textAlign(CENTER);  
  text('Vormittag', 200, 275);

• fill('Black'); setzt die Füllfarbe auf Schwarz
• textSize(30); setzt die Textgröße auf 30 Pixel
• textAlign(CENTER); setzt die Textausrichtung auf zentriert um die angegebenen Koordinaten
• text('Vormittag', 200, 275); schreibt den Text 'Vormittag' an die Koordinaten P(200/275) und zentriert den Text relativ zu diesen Koordinaten.

Programmieren Sie jetzt bitte die Oberfläche für den Tag.

Es folgt ein Lösungsvorschlag, den Sie bitte erst ansehen, wenn Sie Ihre Lösung selbst programmiert haben!

---

Oberfläche: Nacht

Als nächstes programmieren Sie bitte die Oberfläche für die Nacht.

Es folgt ein Lösungsvorschlag, den Sie bitte auch erst ansehen, wenn Sie Ihre Lösung selbst programmiert haben!

Die Oberfläche ist fertig, aber es passiert noch nichts.

---

Programmablauf

Die Oberfläche zu programmieren ist recht einfach, da noch keine komplizierten Abläufe erdacht werden müssen. Wenn die Bewegung der Sonne animiert werden und der Himmel sich je nach Tageszeit ändern soll, wird es schon aufwendiger. Deswegen denken wir zuerst in Ruhe darüber nach.

Sonnenaufgang

Zuerst soll die Sonne animiert werden.

Wie Sie bereits wissen, können wir die draw()-Schleife nutzen, wenn Anweisungen wiederholt werden sollen. Wenn sich die Sonne über den virtuellen Himmel bewegen soll, kann das nur funktionieren, wenn sich dabei die x- und y-Koordinate der Sonne ändern.

Idee: Bei jeder Schleifenausführung wird die x- und y-Koordinate der Sonne geändert. Dazu legen wir Variablen fest.

Die Variablen sollen sich verändern. Das geht mit folgender Anweisung:

sonne_x = sonne_x + 1;
sonne_y = sonne_y - 1;

Diese Zuweisung ist keine Gleichung wie in der Mathematik, sondern eine Zuweisung. Die linke Seite soll also nicht gleich der rechten Seite sein, sondern der linken Seite wird der Wert der rechten Seite zugeordnet. Der Wert der Variablen sonne_x wird also um 1 größer. Der Wert der Variablen sonne_y wird um 1 kleiner (die Sonne soll sich ja nach oben bewegen).

Die Anweisung zum Zeichnen der Sonne und die Anweisungen zum Ändern des Werts der Varaiblen wird in die draw()-Schleife geschrieben, damit diese immer wieder ausgeführt werden. Da die Bewegung der Sonne etwas schneller erfolgen soll, setzen wir die Anzahl der Wiederholungen pro Sekunde auf 50: frameRate(50);.

Die Sonne bewegt sich, aber es wird eine Linie auf den Bildschirm gezeichnet. Denken Sie kurz darüber nach, warum und ändern Sie das Programm oben entsprechend, so dass sich nur der Kreis bewegt, der die Sonne darstellen soll!

Lösungsvorschlag:

Bei jeder Ausführung der draw()-Schleife wird der Hintergrund neu gefärbt (background('SkyBlue');). Dass sich nur der Sonnenkreis bewegt klappt jetzt, aber die anderen Objekte sind verschwunden.

Damit diese weiterhin zu sehen sind, müssen deren Zeichen-Anweisungen hinter der background-Anweisung in der draw()-Schleife stehen.

Jetzt funktioniert es!

---

Sonnenuntergang

Die Erde dreht sich ständig weiter, also sollte die Sonne am Nachmittag auch wieder untergehen. Wie kann man das programmieren?

Jetzt ist wieder die Zeit für des Informatikers liebste Beschäftigung: Nachdenken.

Die Sonne wandert von links nach rechts über den Bildschirm. Das wird erreicht, indem bei jeder Schleifenausführung die x-Koordinate größer wird. Auch beim Untergehen soll sich die Sonne weiter nach rechts bewegen.

Bis zum Mittag bewegt sich die Sonne nach oben. Das wird erreicht, indem die die y-Koordinate kleiner wird (denken Sie daran wo der Ursprung des Koordinatensystems beim Computer ist: oben links).

Am Nachmittag soll sich die Sonne nach unten bewegen, also müsste dazu die y-Koordinate größer werden.

Zusammengefasst:

• Wenn die x-Koordinate kleiner als die Hälfte des Zeichenbereichs ist, dann soll die Sonne nach oben wandern, die y-Koordinate also kleiner werden
• Wenn die x-Koordinate größer als die Hälfte des Zeichenbereichs ist, dann soll die Sonne nach unten wandern, die y-Koordinate also größer werden

Darstellung als Ablaufdiagramm:

Im Kapitel "Verzweigung" haben Sie kennengelernt, wie man eine solche wenn-dann-Verzweigung programmiert. Hier sieht die Umsetzung der Verzweigung, wie im Ablaufdiagramm dargestellt, wie folgt aus:

if (sonne_x > 200 ) { 
  sonne_y = sonne_y + 1;
} else {
  sonne_y = sonne_y - 1;
}

In Worten:

Wenn (sonne_x > 200) dann 
  vergrößere den Wert der Variablen sonne_y um 1
sonst
  verkleinere den Wert der Variablen sonne_y um 1

Im Programm sieht das dann so aus (Start durch Klick auf Play):

Eines fehlt noch: wenn die Sonne ihre Bewegungsrichtung ändert, soll der Text sich von 'Vormittag' auf 'Nachmittag' ändern. Versuchen Sie das selbst hinzubekommen.

Lösungsvorschlag:

---

Tag-Nacht-Simulation

In der Nacht wird der Himmel schwarz und der Mond taucht auf. Jetzt genügt es nicht, dass nur abgefragt wird, ob sonne_x kleiner oder größer als 200 Pixel ist. Wir benötigen mehrere Abfragen.

Wenn es Nacht wird, ist sonne_x > 400 und wenn die Sonne überhaupt nicht mehr zu sehen sein soll, dann ist sonne_x > 420.

Während der Nacht lassen wir sonne_x einfach noch etwas weiterlaufen (denn die Sonne scheint ja auf der anderen Halbkugel der Erde). Wenn also z.B. sonne_x > 620 ist (mit etwas Zeitraffer), dann soll die Sonne wieder aufgehen.

Das bedeutet, dass es jetzt 4 Zeiträume/Zeitpunkte gibt, die abgefragt werden müssen:

1. sonne_x < 200: VORMITTAG (dann soll sonne_y kleiner werden und der Text 'Vormittag' erscheinen)
2. sonne_x >= 200 UND sonne_x < 420: NACHMITTAG (dann soll sonne_y größer werden und der Text 'Nachmittag' erscheinen)
3. sonne_x >= 420 UND sonne_x < 620: NACHT (dann soll der Hintergrund schwarz sein, der Mond auftauchen und der Text 'Nacht' erscheinen)
4. sonne_x >= 620: SONNENAUFGANG (dann soll die Sonne auf die Startposition P(-20/230) gesetzt werden und der Himmel wieder blau sein)

Das kann man in einem Ablaufdiagramm wie folgt darstellen:

Zwei Bedingungen werden mit dem Symbol && für UND verknüpft. Im Programm schreibt man das wie folgt auf. Diskutieren Sie über den Quelltext bis Sie jede Zeile verstanden haben. Im Programm wird noch die x-Koordinate als "Uhr" angezeigt.

---

---