Zeichnen II

Draw-Schleife

Die Draw-Schleife stoppen

Wenn man z.B. zufällige Werte benutzt, dann will man häufig nicht, dass das Design andauernd neugezeichnet wird. Um die Draw-Funktion zu stopppen, gibt es das noLoop() Kommando.

function draw() {
  noLoop();
  // your code
}

FrameRate

Normalerweise wird die Draw-Schleife ca. 60x pro Sekunde aufgerufen. Man kann die Geschwindigkeit aber auch verändern:

frameRate(Frames pro Sekunde:Zahl); 
function setup() {
  frameRate(10);
}

Die standardmäßge Framerate ist 60fs, complexe Zeichenabfolgen können die reale Framerate aber reduzieren. Für Animation, um diese z.B. in Filmen zu nutzen, sollte mindestens eine Framerate von 24fs erreicht werden.

Polygons

Nach all den abstrakten JavaScript Basics, zurück zum Zeichnen. Im Abschnitt zu den einfachen Formen, haben wir bereits Kreise, Rechtecke, etc. kennengelernt. All diese Formen bestehen aus Punkten, welche durch Linien verbunden werden und dadurch sogenannte Polygone formen. Die zugrundeliegenden Lininen können wir z.B. auch nutzen um eine Fräse oder einen Laser-Cutter zu kontrollieren. Fangen wir mit der Dekonstruktion eines einfachen Rechtecks an:

rect(0, 0, 40, 20);
point(0,0);
point(40,0);
point(40,20);
point(0,20);

Das Rechteck hat vier Eckpunkte. Wir könnten das Rechteck auch manuell erstellen:

vertex(x:Zahl, y:Zahl, z*:Zahl); 
beginShape();
vertex(0, 0);
vertex(40, 0);
vertex(40, 20);
vertex(0, 20);
endShape(CLOSE);

Mit dem Befehl beginShape(); sagen wir p5js, dass wir beginnen wollen eine neue Form zu zeichnen. Danach können wir beliebig viele vertex(x, y) Kommandos absetzen. x und y sind die Koordinaten wo die nächste Linie hingehen soll. Wenn die Form abgeschlossen ist, können wir den Zeichenprozess mit endShape(); abschließen. Wenn wir bei dieser Funktion CLOSE als Parameter übergeben, sagen wir p5js, dass der letzte Punkt mit dem ersten verbunden werden soll.

Wenn man komplexere Formen erstellt, sollte man darauf achten, dass die Punkte im Uhrzeigersinn angeordnet sind.

Polar Koordinaten

Eine einfache Form mit dem Polar-Koordinatensystem erstellen:

/lectures/2d/drawing2/polarsimple/sketch.jsView on GitHub

Verschachtelte Schleifen kombiniert mit dem Polar-Koordinatensystem (siehe auch extras/Mathe für mehr zum Thema Polar-Koordinatensystem):

/lectures/2d/drawing2/polarcomplex/sketch.jsView on GitHub

Quad & Triangle

Wenn man nur ein Polygon mit drei oder vier Punkten zeichnen möchte, kann man auch quad und triangle nutzen. Bei diesen beiden Funktionen wird einfach eine Liste an x/y-Paaren übergeben:

quad(x1:Zahl, y1:Zahl, x2:Zahl, y2:Zahl, x3:Zahl, y3:Zahl, x4:Zahl, y4:Zahl); 
quad(0, 0, 40, 0, 40, 20, 0, 20);
triangle(x1:Zahl, y1:Zahl, x2:Zahl, y2:Zahl, x3:Zahl, y3:Zahl); 
triangle(0, 0, 40, 0, 40, 20);

Kurven

Wenn wir mal als nur gerade Linien in unseren Formen haben wollen, können wir auch Kurven zeichnen. Hierfür stehen uns drei verschiedene Kurven-Funktionen zur verfügung:

curve(x:Zahl, y:Zahl); 
beginShape();
curveVertex(0, 0);
curveVertex(40, 0);
curveVertex(40, 20);
curveVertex(0, 20);
endShape(CLOSE);

curveVertex ist die einfachste Funktion, da hier die Kurven für uns generiert werden. Mit bezierVertex und quadraticVertex müssen wir die Kurven selber durch Kontrollpunkte konstruieren (ähnlich wie es auch in Grafik-Bearbeitungsprogrammen der Fall ist):

quadraticVertex(Kontrollpunkt-x:Zahl, Kontrollpunkt-y:Zahl, Ziel-x:Zahl, Ziel-y:Zahl); 
beginShape();
vertex(0, 0); // we need to add a startpoint
quadraticVertex(20, 20, 40, 0);
endShape();

quadraticVertex nimmt vier Parameter, die ersten beiden x-, y-Koordinaten sind der Kontrollpunkt und das zweite Paar sind der Zielpunkt der Kurve. bezierVertex nimmt noch einen weiteren Kontrollpunkt, um sowohl den Anfang, als auch das Ende der Kurve unabhängig manipulieren zu können:

bezierVertex(Start-Kontrollpunkt-x:Zahl, Start-Kontrollpunkt-y:Zahl, End-Kontrollpunkt-x:Zahl, End-Kontrollpunkt-y:Zahl, Ziel-x:Zahl, Ziel-y:Zahl); 
beginShape();
vertex(0, 0); // we need to add a startpoint
bezierVertex(10, 20, 30, 20, 40, 0);
endShape();

Am Anfang kann das Arbeiten mit Kurven verwirrend sein, wo genau die Kontrollpunkte positioniert werden müssen. Hier kann es helfen, wenn man sich die Punkte zusätzlich aufzeichnet, um ein besseres Gefühl für die Kurvenberechnung zu bekommen (verändere die Kontrollpunkte und beobachte wie sich die Kurven verändern):

/lectures/2d/drawing2/controlpoints/sketch.jsView on GitHub

Aufgabe: Polygon

Erstelle ein Polygon und versuche mit den verschiedenen Vertex-Kommandos zu arbeiten (Kurven).

Inspiration: Chaotische Kurven

/lectures/2d/drawing2/growingcurve/sketch.jsView on GitHub

Zurück zum Anfang