Beispiele zum Javascript »Turtle Graphics« für Adobe Illustrator 2023

Das erste Beispiel zeichnet mit den Befehlen der Turtle Graphics ein einfaches Dreieck mit einem rechten Winkel (90°). Die Kantenlänge von zwei Seiten des Dreiecks sind 100 Einheiten lang. Daher hat die dritte Seite die Länge von 142, die Sie mithilfe des Satzes des Pythagoras berechnen können.

Das zweite Beispiel zeichnet ein Dreieck mithilfe der Turtle Graphics. Doch statt die letzte Kante des Dreickecks per Befehl zu zeichnen, wird der Befehl »Turtle.close« verwendet, der automatisch einen Pfad vom aktuellen zum ersten Punkt zieht und so, das Dreieck schließt.

Wie das vorherige Beispiel zeichnet dieses Javascript per Turtle Graphic ein einfaches Dreieck. Wobei durch den Befehl »Turtle.fill(3)« Sie das Dreieck mit der »Farbe 3«, also gelb, füllen können.

Das vierte Beispiel zeichnet ein Quadrat mit Befehlen der Turtle Graphics. Dafür wird eine Schleife genutzt, die viermal die Befehle »Turtle.rotate(90); Turtle.move(100);« nutzt. Dies wurde jedoch auch schon im ersten Artikel »Javascript »Turtle Graphics« für Adobe Illustrator 2023« erklärt.

Mit diesem Javascript können Sie schließlich Polygone mit 3 oder mehr Ecken mithilfe von Turtle Graphics erstellen. Die Anzahl der Ecken bestimmen Sie richtigerweise im Javascript über die Variable »var vPoints = « verändern. Je größer die Anzahl der Ecken ist, desto mehr nähert sich die Form einem Kreis.

Der Drudenfuß oder auch Pentagramm oder Fünfstern genannt, ist eine geometrische Figur mit 5 Ecken. Die Konstruktion ist dergestalt, dass diese Form in einem Zug gezeichnet werden kann. Die Striche verbinden also jeweils den übernächsten Eckpunkt. Die Winkel in einem Drudenfuß beträgt 144°.

Das achte Beispiel zeichnet ein Achteck mithilfe von Turtle Graphics, bei dem ferner jede Kante eine andere Farbe und Stärke hat.

Zwar können Sie einen echten Kreis mit Turtle Graphics nicht zeichnen, jedoch wenn Sie 360 Bewegungen mit dem Winkel 1° und der Länge 2 zeichnen lassen, so erhalten Sie ein Polygon mit 360 Ecken; dies einem Kreis schon recht nahekommt.

Das zehnte Beispiel zeichnet nochmal ein Polygon mit 360 Ecken, also fast einen Kreis, der hingegen zusätzlich einen Strahlenkranz hat.

Das rudimentäre Uhrblatt, das Sie auch mit einer Turtle Graphics einfach zeichnen können, besteht erneut folgerichtig aus einem Polygon mit 360 Ecken. Zudem werden alle 30° Striche für die 12 Stunden gezeichnet, wie Sie es auf einem Zifferblatt finden.

Im zwölften Beispiel wird eine Spirale mithilfe der Turtle Graphics gezeichnet. Während sich die Funktion »fSpirale« selbst aufruft und verringert mit jedem Aufruf die Länge der Kanten um 3 Einheiten. Dieses Selbstaufrufen nennt man auch Rekursion. Dieses einfache Automatisieren zeigt den Vorteil der Programmierung, denn das Zeichnen der dieser Form von Hand wäre aufwendiger.

Das dreizehnte Beispiel zeigt schließlich die Möglichkeiten des Befehls »Turtle.back();«, der es erlaubt ohne den Winkel zu verändert eine gewisse Strecke zurückzulaufen.

Wie schon das Beispiel mit der Spirale, so nutzt dieses Javascript, das die Kochkurve erstellt, eine Rekursion, die jeweils folgerichtig um einen Grad verringert wird. Die Kochkurve gehört somit zu den sogenannten Fraktalen. Mehr Informationen finden Sie bei https://de.wikipedia.org/wiki/Koch-Kurve.

Dieses Beispiel, Nummer 15, nutzt die Kochkurve um eine geschlossene Form, die Kochwolke, zu erstellen. Dabei wird wieder bei jedem Aufruf der Grad um eins verringert.

In diesem Javascript, das Turtle Graphics zum Zeichnen nutzt, ruft ebenso eine Funktion (rekursiv) selbst auf. Dabei wird jeweils der Grad um eins verringert. Man nennt diese Sierpinski-Konstruktion oder -Kurve raumfüllend. Mehr Informationen finden Sie bei https://de.wikipedia.org/wiki/Sierpinski-Kurve.

Die mit diesem Javascript erstellte Peano-Kurve, ist ebenfalls eine raumfüllende Kurve. Die Funktion »fPeano« ruft sich neunmal selbst (rekursiv) auf, demgemäß wird dabei der Grad jeweils um eins verkleinert. Mehr Informationen finden Sie bei https://de.wikipedia.org/wiki/Peano-Kurve.

Mit diesem Javascript wird eine Hilbert-Kurve mit Turtle Gaphics erstellt. Die Funktion »fHilbert« ruft sich zweimal (rekursiv) selbst auf und verringert dabei jeweils den Grad um eins. Aufgrund der Konstruktion gehört auch die Hilbert-Kurve zu den Raumfüllenden. Mehr Informationen finden Sie bei https://de.wikipedia.org/wiki/Hilbert-Kurve.

Eine Drachenkurve kann von diesem Javascript mithilfe der Turtle Graphics erstellt werden. Ihre Form erinnert an eine abstrakte Wolke. Die Drachenkurve in ebenfalls ein Fraktal und ähnlich der Koch- und Hilbert-Kurve. Mehr Informationen finden Sie bei https://de.wikipedia.org/wiki/Drachenkurve.

Das zwanzigste Beispiel zeichnet mit Befehlen der Turtle Graphics einen ganz einfachen fraktalen Baum. Dies ist der Urahn der digitalen, dreidimensionalen Pflanzen, die Sie aus Kino und Spielen kennen.