Lernpfad:Einführung in Processing/4

Vorheriger Schritt

Nächster Schritt

Die Befehle von Processing

Auf der Webseite von Processing] gibt es eine Übersicht aller Befehle: Die Referenz. (Leider momentan nur auf Englisch verfügbar.)

Datei:Logo Processing.png

Arbeitsauftrag

1. Lies in der Dokumentation des rect() Befehls nach wie dieser benutzt wird. Schreibe dann das Rechteckprogramm aus dem letzten Schritt mit seiner Hilfe neu.
2. 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.

Datei:Logo Processing.png

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:

• size()
• fill()
• circle()

1. Verändere die Eingabe (x und y) und beobachte, wie der Punkt wandert.
2. Ermittle aus deinen Beobachtungen, wie das Koordinatensystem von Processing aufgebaut ist. Wo befindet sich der Ursprung? In welche Richtung gehen die Achsen?
3. Zeichne zu deinen Beobachtungen ein Koordinatensystem, das dem System von Processing entspricht.

Zusatzaufgabe

Versuche mit dem bekannten line() Befehl das Koordinatensystem in Processing darzustellen. (Setze die Fenstergröße wie oben auf 400x400 Pixel.)

Tipp: Mit text() kannst du den Text für die Achsenbezeichnungen auf den Bildschirm schreiben.

Lösung

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