Im letzten Video habe ich euch gezeigt, wie man komplexe Polygone zeichnen kann. Dort habe ich
euch schon angekündigt, dass man das Ganze auch mit Kurven machen kann. In diesem Video zeige
ich euch drei verschiedenen Funktionen mit denen man Kurven generieren kann. Diese werden zunehmend
komplexer, aber mit der steigenden Komplexität haben wir auch mehr Kontrolle darüber wie die
Kurven genau gezeichnet werden. Die einfachste Variante ist die curveVertex. Hierfür müssen wir
einfach nur vertex durch curveVertex austauschen. Und dann versucht das System sozusagen eine Linie,
eine Kurve zu generieren, die durch alle Punkte geht die wir dem system mit gegeben haben,
oder zumindest daran entlang gehen. Hier haben wir so gut wie gar keine Kontrolle darüber,
wie diese Kurven, die Winkel genau entsprechend angelegt werden. Bei den nächsten werde ich das
Ganze mal auf eine einzige Kurve reduzieren, um das Ganze noch besser zu veranschaulichen.
Der erste vertex, dafür nehmen wir die normale vertex Funktion, um sozusagen einen Startpunkt
herzustellen. und die Funktion die wir als nächstes benutzen ist der quadraticVertex
Unterschied zu den ersten beiden zu vertex und curveVertex, dass wir hier zwei Punkte
mitgeben. Der erste Punkt ist der Kontrollpunkt, der bestimmt wie unsere Kurve generiert wird. Ihr
könnt euch das im Grunde so vorstellen, wie es in einer Grafik Software ist. Dort könnt ihr ja auch,
wenn ihr Kurven bearbeitet, über diese kleinen Handles, über diese kleinen Kontrollpunkte den
Verlauf der Kurve beeinflussen. Und genau so müsst ihr euch das hier auch vorstellen. Also
als erstes geben wir einen Kontrollpunkt mit, den setzt sich jetzt auf 250 und dann das Ziel,
also wo die kurve hingehen sollen und das machen wir genau wie vorher auf 300/100. Und wenn ich
das jetzt abspeicher. Ich nehme das CLOSE mal raus hier. Sehen wie hier jetzt schön
diese Linie generiert wird. Um das nochmal besser zu veranschaulichen, werde ich ein paar
Kontrollpunkte jetzt manuell reinschreiben, um das noch mehr sichtbar zu machen. Dafür erhöhe ich den
strokeWeight setzte jetzt ein paar Kontrollpunkte. Also haben einmal unseren Startpunkt,
und unseren Endpunkt und dann haben wir unseren Kontrollpunkt und der ist bei 250.
Und in der Grafik software kennt man das ja,
dass die dann meistens noch mal mit kleinen Linien miteinander verbunden sind.
Also von 100/100 auf 250 und in die andere Richtung 300/100 auf 250. Genau das zeigt
jetzt im Grunde wie diese Kurve jetzt genau generiert wird. Dafür definiert noch mal
ganz kurz den Y-Punkt damit wir den gleich einfach mal hin und her schieben können,
um das ein bisschen zu veranschaulichen.
Wenn ich den jetzt mal zum beispiel auf 400 setze, sehen wir wie sich jetzt die Kurve
dadurch anders gestaltet. Also im Grunde genau wie ihr es aus Grafik-Software kennt. Und sich
solche Hilfspunkte zu zeichnen, ist durchaus gut um am Anfang ein Verständnis dafür zu bekommen,
wie sich diese Kurven eigentlich generieren. Also gerade wenn ihr komplexere Formen vielleicht
noch mit einem FOR-Loop baut, ist es sehr hilfreich sich solche Kontrollpunkte zu
setzen. Genauso können wir natürlich auch die X-Position unseres Punktes verändern.
Der muss natürlich nicht mittig da drin sitzen. Ich mache mal das Y ein bisschen kleiner. Also
sehen, auch das ist variable möglich. Aber auch wenn wir das bisher noch nicht hatten,
es kommt in einem der nächsten Videos, könnten wir zum Beispiel auch, einfach
nur mal um das zu demonstrieren, das Ganze an die aktuelle Maus-Koordinate dranhängen. Dann
müssen wir natürlich den noLoop unten aufhören und sehen jetzt sozusagen,
wie die aktuelle Maus-Koordinate als Kontrollpunkt hier dient. Es geht dann noch
einen Schritt weiter. Es gibt darüber hinaus und das kennt ihr auch aus Grafik-Software,
den bezierVertex. Beim bezierVertex haben wir nicht nur einen Kontrollpunkt,
sondern haben zwei Kontrollpunkte und das Ganze füge ich jetzt auch mal hier hinzu.
Das heißt wir haben einen Kontrollpunkt der das Ende unserer Kurve definiert und einen
Kontrollpunkt der den Anfang definiert. Und darüber können wir sehr sehr genau
kontrollieren wie unsere Kurve verläuft. Können sehr smoothe Übergänge zwischen
verschiedenen Kurvenelementen machen und dadurch ganz komplexe und interessante Formen generieren