Lernpfad:Einführung in Processing/4
< Lernpfad:Einführung in Processing
Version vom 27. Januar 2022, 21:24 Uhr von Jneug (Diskussion | Beiträge)
Was du in diesem Schritt lernst
- Die Befehlsreferenz benutzen.
- Aufbau des Koordinatensystems.
Die Befehle von Processing
Auf der Webseite von Processing gibt es eine Übersicht aller Befehle: Die Referenz. (Leider momentan nur auf Englisch verfügbar.)
Arbeitsauftrag
- Lies in der Dokumentation des rect() Befehls nach wie dieser benutzt wird. Schreibe dann das Rechteckprogramm aus dem letzten Schritt mit seiner Hilfe neu.
- Platziere das Rechteck genau in der Mitte des Fensters. (Das Fenster ist 100x100 Pixel groß.)
Lösung: Benutzung von rect()
Rechteckprogramm mit Hilfe des rect()
Befehls:
int a = 40;
int b = 80;
rect(0,0, a,b);
Lösung: Mittig platzieren
Die Mitte des Fensters liegt bei (50, 50)
. Wir müssen auf der x-Achse die Hälfte der Breite (a
) abziehen, auf der y-Achse die Hälfte der Höhe (b
).
int a = 40;
int b = 80;
rect(50-(a/2),50-(b/2), a,b);
Das Koordinatensystem von Processing
Das Koordinatensystem von Processing verhält sich etwas anders als das System, das du aus der Mathematik gewohnt bist.
Arbeitsauftrag
Das folgende Programm hat die Definition
Eingabe: zwei Zahlen (x und y) Ausgabe: ein schwarzer Punkt an der Koordinate (x,y)
int x = 20;
int y = 40;
size(400, 400);
fill(0);
circle(x, y, 4);
Du kannst die neuen Befehle in der Referenz nachlesen:
- Verändere die Eingabe (
x
undy
) und beobachte, wie der Punkt wandert. - Ermittle aus deinen Beobachtungen, wie das Koordinatensystem von Processing aufgebaut ist. Wo befindet sich der Ursprung? In welche Richtung gehen die Achsen?
- Zeichne zu deinen Beobachtungen ein Koordinatensystem, das dem System von Processing entspricht.
Lösung Sprinteraufgabe
Eine mögliche Lösung:
size(400, 400);
fill(0,0,0);
// x-Achse
line(4,4, 396,4);
line(396,4, 394,2);
line(396,4, 394,6);
text("x", 390, 16);
// y-Achse
line(4,4, 4,396);
line(4,396, 2,394);
line(4,396, 6,394);
text("y", 16, 390);