Die erste Grafik
Text auf der Konsole ist praktisch, aber man sieht wenig. Für alles Grafische verwenden wir in diesem Lernpfad die Bibliothek Scratch for Java. Wenn du Scratch aus der Mittelstufe kennst, kommt dir vieles bekannt vor: Es gibt eine Bühne (Stage) und darauf Figuren (Sprite).
Die Bühne
public class Buehne extends Stage– wir bauen eine eigene Bühne auf Grundlage der fertigen Bühne aus der Bibliothek.- Alles zwischen
public Buehne() {und der zugehörigen}wird ausgeführt, wenn die Bühne entsteht. new Sprite()erzeugt eine neue Figur,addCostume("bunny1_stand")gibt ihr ein Aussehen (ein Kostüm),this.add(hase)stellt sie auf die Bühne.- Ohne
this.add(...)bleibt die Figur unsichtbar – ein häufiger Anfängerfehler.
Das Koordinatensystem
Die Bühne ist 480 Pixel breit und 360 Pixel hoch. Der Punkt (0, 0) liegt in der Mitte. Die x-Achse zeigt nach rechts, die y-Achse nach oben.
flowchart LR
A["(-240, 180)<br>oben links"] --- B["(0, 180)<br>oben Mitte"] --- C["(240, 180)<br>oben rechts"]
D["(-240, 0)<br>links"] --- E["(0, 0)<br>Mitte"] --- F["(240, 0)<br>rechts"]
G["(-240, -180)<br>unten links"] --- H["(0, -180)<br>unten Mitte"] --- I["(240, -180)<br>unten rechts"]
Verändere im Programm oben die Zeile hase.setPosition(0, 0);.
a) Wohin musst du den Hasen setzen, damit er oben rechts steht?
b) Sage vorher, was bei setPosition(0, -150) passiert – und prüfe es dann.
Auflösung
a) Zum Beispiel hase.setPosition(180, 120);. Alles mit positivem x und positivem y liegt oben rechts.
b) Der Hase rutscht nach unten, denn negative y-Werte liegen unterhalb der Mitte. Wer das Koordinatensystem aus dem Matheunterricht kennt, ist hier im Vorteil – am Bildschirm ist es nämlich oft andersherum.
Mehrere Figuren
| Anweisung | Wirkung |
|---|---|
setPosition(x, y) |
setzt die Figur an die Stelle (x, y) |
setSize(150) |
skaliert die Figur auf 150 % ihrer Originalgröße |
say("Hallo") |
lässt die Figur in einer Sprechblase sprechen |
new Text(text, x, y, breite) |
erzeugt eine Textanzeige auf der Bühne |
Die Bibliothek bringt über 1700 fertige Kostüme mit – du brauchst keine eigenen Bilddateien.
Zeichnen mit dem Stift
Neben Figuren gibt es einen Stift (Pen). Er zeichnet eine Linie, solange er abgesenkt ist.
Der Stift ist keine Turtle. Er kennt kein „gehe 100 Schritt vorwärts“ und kein „drehe dich um 90 Grad“. Du gibst ihm immer die Zielkoordinaten:
setPosition(x, y)– dorthin bewegendown()– Stift absenken, ab jetzt wird gezeichnet- jedes weitere
setPosition(x, y)zieht eine Linie up()– Stift anheben
Aufgabe 1: Ein Haus
Zeichne mit dem Stift ein einfaches Haus: ein Quadrat mit einem Dreieck als Dach.
a) Zeichne das Haus zuerst auf Papier in ein Koordinatensystem und trage die Koordinaten aller Eckpunkte ein.
b) Setze es danach im Programm um.
Tipp 1: Welche Eckpunkte brauche ich?
Ein Quadrat mit der Seitenlänge 120, mittig auf der Bühne, hat die Ecken (-60, -80), (60, -80), (60, 40) und (-60, 40).
Die Dachspitze liegt genau darüber in der Mitte, also bei x = 0 und einem y-Wert oberhalb von 40.
Tipp 2: In einem Zug
Du kommst mit einem einzigen down() aus, wenn du eine Reihenfolge findest, bei der du kein Stück doppelt fahren musst. Fang unten links an, umrunde das Quadrat, und hänge das Dach an, sobald du wieder oben angekommen bist.
Aufgabe 2: Figuren anordnen
Stelle fünf Münzen nebeneinander auf die Bühne, mit gleichem Abstand, alle auf derselben Höhe.
Was fällt dir beim Schreiben des Programms auf? Notiere, was dich daran stört.
Auflösung zur zweiten Frage
Du musst denselben Block viermal zusätzlich abtippen und dabei jedes Mal nur eine einzige Zahl ändern. Das ist mühsam, fehleranfällig und unübersichtlich.
Genau dafür gibt es Variablen (Kapitel 2) und Schleifen (Kapitel 3). Merk dir dieses Gefühl – es ist der Grund, warum es diese Werkzeuge gibt.
Zusatzaufgabe
Zeichne mit dem Stift ein Koordinatensystem: eine waagerechte und eine senkrechte Achse durch den Punkt (0, 0), jeweils über die ganze Bühne, in unterschiedlichen Farben. Setze an die Enden der Achsen Textanzeigen mit den Koordinaten.