In p5.js legen wir beim Programmstart den Bereich fest, in dem unser Programm ablaufen soll.
createCanvas(300, 500);Mit diesem Befehl wird ein Zeichenbereich mit der Breite 300 Pixel und der Höhe 500 Pixel festgelegt. Innerhalb dieses Zeichenbereichs können wir jetzt Objekte platzieren. Dazu müssen wir die Koordinaten des gewünschten Ortes angeben.
Mit Hilfe der Maus kannst du die Koordinaten des Zeichenbereichs erkunden.
Bewege die Maus auf dem Zeichenbereich.
An diesem Beispiel kannst du den Unterschied zwischen der Funktion setup(...) und der Funktion draw(...) studieren.
Lösche background(240); aus draw(...) und füge diese Zeile in setup(...) unterhalb von createCanvas(...); ein. Klicke auf Play und beobachte.
Wenn du die Maus über den Zahlenbereich bewegst, sind die Koordinaten bald nicht mehr lesbar, da alle Ziffern übereinander geschrieben werden, ohne die alten Ziffern zu löschen.
Erklärung: Wenn background(240); am Anfang von draw(...) steht, wird die Zeichenfläche mit der Farbe, die bei background(...); in Klammern steht übermalt. Die Zeichenfläche wird damit also gelöscht. Steht background(240); aber in setup(...), wird die Zeichenfläche nur am Anfang des Programms einmal gelöscht und danach werden alle Ziffern übereinandergeschrieben.
Jetzt solltest du den Programmablauf verstanden haben. In setup(...) wird der Zeichenbereich festgelegt. In draw(...) wird 60 Mal pro Sekunde der Zeichenbereich neu eingefärbt, geschaut, wo die Maus gerade ist und die aktuelle Position mit Hilfe zweier Zahlen auf dem Bildschirm ausgegeben.
Wenn du alles in setup(...) schreibst, wird nur die Startposition 0 0 ausgegeben, auch wenn du die Maus bewegst, da setup(...) nur ein einziges Mal ausgeführt wird.
Die Koordinaten sollen jetzt dort angezeigt werden, wo die Maus auch ist.
Bewege die Maus auf dem Zeichenbereich und versuche das Programm zu verstehen.
Erklärung: Das Programm gibt nicht nur die Mauskoordinaten aus, sondern schreibt diese auch an die Stelle, wo sich die Maus gerade befindet. Die x-Koordinate und y-Koordinate der Textausgabe müssen passend eingestellt werden.
Wie du gesehen hast, ist im Zeichenbereich, der mit dem Befehl createCanvas(breite, hoehe); festgelegt wird, oben links der Nullpunkt P(0/0) des Koordinatensystems. Die x-Koordinate wird nach rechts größer und die y-Koordinate wird nach unten größer.
Man kann ein Koordinatensystem in den Zeichenbereich zeichnen, das helfen kann die richtige Position für Objekte zu finden, die auf die Zeichenebene gemalt werden sollen. Du brauchst hier sicherlich noch nicht die Programmierung des Koordinatensystems verstehen, betrachte die Funktion koordinatensystem(...) als eine Hilfsfunktion, genauso wie die Funktionen aus der p5.js-Bibliothek.
Im folgenden siehst du, wie die geometrischen Grundformen Punkt, Kreis, Dreieck, Viereck,... mit Hilfe von p5.js gezeichnet werden können. In der Zeicheneben ist das Koordinatensystem eingezeichnet, damit du die Positionierung der Objekte besser beobachten kannst.
Verändere in den folgenden Beispielen die Koordinaten der geometrischen Grundformen und füge neue ein.
point(x1, y1);
An der Koordinate P(x1/y1) wird ein Punkt gezeichnet.
line(x1, y1, x2, y2);
Vom Punkt P(x1/y1) wird eine Strecke zum Punkt Q(x2/y2) gezeichnet.
triangle(x1, y1, x2, y2, x3, y3);
Durch die Punkte A(x1/y1), B(x2/y2), C(x3/y3) wird ein Dreieck gezeichnet.
rect(x1, y1, breite, hoehe);
Der Punkt A(x1/y1) ist der obere linke Punkt. Von dort aus wird das Rechteck nach rechts (breite) und nach unten (hoehe) gezeichnet.
quad(x1, y1, x2, y2, x3, y3, x4, y4);
Durch die Punkte A(x1/y1), B(x2/y2), C(x3/y3) und D(x4/y4) wird ein Viereck gezeichnet.
ellipse(x, y, breite, hoehe);
Um den Mittelpunkt M(x/y) wird eine Ellipse mit der angegebenen Breite und Höhe gezeichnet. Um einen Kreis zu zeichnen, muss die Breite und die Höhe gleich sein.
arc(x, y, breite, hoehe, startwinkel, endwinkel, modus);
Um den Mittelpunkt M(x/y) wird eine Ellipse mit der angegebenen Breite und Höhe gezeichnet. Die Ellipse startet beim Startwinkel und endet beim Endwinkel (diese werden im Bogenmass 0 = 0°, PI/4 = 90°, PI/2 = 180°, 3 PI/2 = 270°, 2 PI = 360° angegeben) und ganz unmathematisch im Uhrzeigersinn gezeichnet.