Zum Inhalt springen

Beispiele zum Javascript »AI-Turtle-L-Parser« für Adobe Illustrator 2023

25 Beispiele, die mithilfe von Turtle Graphics in Adobe Illustrator 2023 oder früher erstellt wurden.

(Info:) Die ausgewählten Beispiele zum Javascript »AI-Turtle-L-Parser« für Adobe Illustrator 2023 zeigen die Automatisierung mit dem Lindemayer-System. Das L-System, wie es auch genannt wird, basiert auf Turtle Graphics, die in JavaScript programmiert wurde. Die so erzeugten Bilder sind auflösungsunabhängig und Sie können sie daher beliebig vergrößern, verkleinern oder bearbeiten. Diese Art der Automation erlaubt, es überdies mit wenigen Befehlen komplexe Grafiken vom Computer erstellen zu lassen.

(Tipp:) Bitte lesen Sie jedoch auch den vorherigen Artikel »Javascript »AI-Turtle-L-Paser« für Adobe Illustrator 2023«. Dort finden Sie auch den Download des Javascripts »AI-Turtle-L-Parser.jsx« mit den allen 40 Beispielen, die Sie nun hier in einer Auswahl kennenlernen werden. Damit es schneller geht, hier noch einmal der Link zum Download:

(Download:) Download des Javascripts »AI-Turtle-L-Paser« für Adobe Illustrator 2023

RECHT Für den privaten Gebrauch ist das Javascript kostenlos. Wollen Sie es kommerziell einsetzen, dann benötigen Sie eine Lizenz, die auf Ihre Bedürfnisse speziell angepasst werden kann. Fragen Sie mich unverbindlich per Kontaktformular. Copyright: Die Javascripts sind urheberrechtlich geschützt. Enthaftungserklärung: Der Einsatz der folgenden Javascripts geschieht auf eigene Gefahr. Der Autor übernimmt keine Haftung für eventuell auftretende Schäden.
(Hilfe:) Probleme beim Download?

(Download:) Das Javascript »AI-Turtle-L-Paser_bin-jsx« (0,2 MByte). Enthalten im ZIP-Archiv (Entpacker für macOS oder Windows) sind das verschlüsselte, binäre Javascript und 40 Beispiele als Textdatei (L-System) zum selber ausprobieren. Wenn Sie an dem unverschlüsselten Quellcode interessiert sind, dann schreiben Sie mir bitte via Kontaktformular.

Inhaltsverzeichnis

Ein einfaches Quadrat

Das erste der Beispiele zum Javascript »AI-Turtle-L-Parser« für Adobe Illustrator 2023 ist das einfache Quadrat. Es zeigt das Prinzip des L-Systems, das aus Parametern und Regeln besteht. In den Parametern sehen Sie erstens, dass die Schrittlänge auf 180 Einheiten steht, die Winkel auf jeweils 90 Grad, die Zufallswerte auf 0, und dass die Skalierung für jeden Grad sich durch den Wert von 1 nicht ändert. Der Grad für das Quadrat beträgt 2. Die einfache Regel lautet, ersetze »F« durch »F+F«, wobei der Buchstabe »F« für eine Bewegungen mit der angegebenen Schrittlänge besteht und »+« eine Drehung um den angegebenen Winkel, hier 90 Grad. Durch das zweimalige (Grad = 2) Selbstaufrufen (Rekursion) entsteht eine Befehlsfolge »F+F+F+F«, was einem Quadrat entspricht. Diese Befehlsfolge wird dann als Turtle Graphics im Illustrator als Vektordatei automatisch gezeichnet. ((siehe:) Datei: Turtle-L-System-Bsp01)

// Beispiel für ein L-System: Ein Quadrat
// Parameter
M = 180 // Schrittlänge
L = 90 // Linker Winkel
R = 90 // Rechter Winkel
C = 0 // % Chance = Zufall für Schrittlänge
D = 0 // % Zufall für Winkel
S = 1 // Skalierung pro Grad
G = 2 // Grad
// Regeln
F : F+F // Regel
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Ein einfaches Quadrat als L-System.

Das auf der Ecke stehende Quadrat

Wie bereits im vorherigen Beitrag beschrieben, ist der Startwinkel 0 Grad und schaut nach Norden (oben). Um den Startwinkel auf einen anderen Wert zu ändern, zum Beispiel auf 45 Grad, damit das Quadrat auf der Ecke steht, ergänzen Sie nach dem Grad ein Startaxiom. Dies ist die erste Regel, die das Javascript ausführt. Außerdem fügen Sie vor die F-Regel die Regel für den Startwinkel ein. ((siehe:) Datei: Turtle-L-System-Bsp02)

...
G = 2 // Grad
A = wF // Startaxiom
// Regeln
w : 45 // start with rotate 45
F : F+F
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Das auf der Ecke stehende Quadrat wird durch eine zusätzliche Regel für den Startwinkel ermöglicht.

Ein Polygon mit acht Ecken

Allein durch die Änderung der Parameter bei gleicher Regel kann man statt des Quadrats auch andere regelmäßige Polygone (Vielecke) erzeugen. Gegenüber dem ersten Beispiel sind hier die Schrittlänge, die Winkel und der Grad verändert. Der dreifache Selbstaufruf (Rekursion) reicht aus, um mit der bekannten Regel acht Kanten entstehen zulassen. ((siehe:) Datei: Turtle-L-System-Bsp04)

// Beispiel für ein L-System: Ein Polygon (8-Eck)
// Parameter
M = 70 // Schrittlänge
L = 45 // Linker Winkel
R = 45 // Rechter Winkel
C = 0 // % Chance = Zufall für Schrittlänge
D = 0 // % Zufall für Winkel
S = 1 // Skalierung pro Grad
G = 3 // Grad
// Regeln
F : F+F
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Das Acht-Eck entsteht nur durch Änderungen der Parameter, während die Regel unverändert bleibt.

Fast ein Kreis – ein Polygon mit vielen Ecken

Verändern Sie die Parameter bei gleicher Regel noch weiter, dann können Sie ein Polygon erzeugen, dass bereits fast wie ein Kreis aussieht. Gegenüber dem letzten Beispiel sind hier die Schrittlänge, die Winkel und der Grad verändert. Der siebenfache Selbstaufruf (Rekursion) reicht aus, um mit der bekannten Regel dieses Polygon entstehen zulassen. ((siehe:) Datei: Turtle-L-System-Bsp05)

// Beispiel für ein L-System: Ein Polygon fast ein Kreis
// Parameter
M = 8 // Schrittlänge
L = 5 // Linker Winkel
R = 5 // Rechter Winkel
C = 0 // % Chance = Zufall für Schrittlänge
D = 0 // % Zufall für Winkel
S = 1 // Skalierung pro Grad
G = 7 // Grad
// Regeln
F : F+F
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Ein Polygon, das schon fast wie ein Kreis aussieht.

Der Drudenfuß

Das nächste der Beispiele zum Javascript »AI-Turtle-L-Parser« für Adobe Illustrator 2023 erzeugt einen Drudenfuß (Pentagramm) wiederum nur Verändern der Parameter bei gleicher Regel. Gegenüber dem letzten Beispiel sind hier abermals die Schrittlänge, die Winkel und der Grad verändert. Des weiteren kommen noch ein Startaxiom und eine Regel für den Startwinkel hinzu. Der dreifache Selbstaufruf (Rekursion) reicht aus, um den Drudenfuß entstehen zulassen. ((siehe:) Datei: Turtle-L-System-Bsp06)

// Beispiel für ein L-System: Drudenfuß
// Parameter
M = 151.41 // Schrittlänge
L = -90 // Linker Winkel
R = 144 // Rechter Winkel
C = 0 // % Chance = Zufall für Schrittlänge
D = 0 // % Zufall für Winkel
S = 1 // Skalierung pro Grad
G = 3 // Grad
A = wF // Startaxiom
// Regeln
w : 90
F : F+F
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Der Drudenfuß (Pentagramm) kann mit der gleichen Regel jedoch anderen Parametern erstellt werden.

Primitive Pflanzen als Beispiele zum Javascript »AI-Turtle-L-Parser« für Adobe Illustrator 2023

Das Lindemayer-System (L-System) wurde geschaffen, um Pflanzen zu beschreiben, als entdeckt wurde, dass oft Äste eine Ähnlichkeit zum Erscheinungsbild der ganzen Pflanze haben. Dies wird auch Selbstähnlichkeit genannt. Die Natur lässt sich durch Parameter und einfachen Regeln beschreiben. Hier bei der ersten primitiven Pflanze spielt der Zufall für Länge oder Winkel noch keine Rolle. Die eckigen Klammern erlauben die Verzweigung der Äste und dann wieder den Rücksprung der Astgabel, um von dort aus weiter zeichnen zu können. Der zweifache Selbstaufruf (Rekursion) reicht aus, um diese Pflanze entstehen zulassen. ((siehe:) Datei: Turtle-L-System-Bsp10)

// Beispiel für ein L-System: Primitive Pflanze
// Parameter
M = 25 // Schrittlänge
L = 26 // Linker Winkel
R = 26 // Rechter Winkel
C = 0 // % Chance = Zufall für Schrittlänge
D = 0 // % Zufall für Winkel
S = 1 // Skalierung pro Grad
G = 2 // Grad
// Regeln
F : F[+F]F[-F]F
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Eine einfache, primitive Pflanze mit Ästen, die eine Selbstähnlichkeit zur ganzen Pflanze haben.

Eine Pflanze mit Zufallswerten

In der Natur spielt der Zufall eine große Rolle. Daher gibt es im L-System zwei Stellschrauben für den Zufall: Den Zufall (hier C = 70) für die Länge der Schrittlänge und den Zufall (hier D = 55) für den Winkel. Damit variieren die Werte der Schrittlänge und der Winkel bei jedem Selbstaufruf um 70 % bzw. 55 %. Pro Grad werden die Äste (Schrittlänge) mit der Skalierung mit dem Faktor 1.5 größer. Der vierfache Selbstaufruf (Rekursion) reicht aus, um diese Pflanze entstehen zulassen. ((siehe:) Datei: Turtle-L-System-Bsp15)

// Beispiel für ein L-System: Primitive zufällige Pflanze
// Parameter
M = 15 // Schrittlänge
L = 42 // Linker Winkel
R = 21 // Rechter Winkel
C = 70 // % Chance = Zufall für Schrittlänge
D = 55 // % Zufall für Winkel
S = 1.5 // Skalierung pro Grad
G = 4 // Grad
// Regeln
X : F[+X]F[-X]+X
F : FF
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Eine primitive Pflanze, deren Astlänge und Winkel durch Zufall stets unterschiedlich ausfallen.

Die Kochkurve im L-System

In den vorherigen Artikel wurde die Kochkurve, ein Fraktal bereits vorgestellt. Diese Fraktale lassen sich auch als L-System beschreiben. Die Winkel in der Kochkurve betragen stets 60 Grad. Der vierfache Selbstaufruf (Rekursion) reicht aus, um dieses Fraktal, das mal links- und mal rechtsherum seine Richtung ändert, entstehen zulassen. ((siehe:) Datei: Turtle-L-System-Bsp30)

// Beispiel für ein L-System: Koch-Kurve
// Parameter
M = 10 // Schrittlänge
L = 60 // Linker Winkel
R = 60 // Rechter Winkel
C = 0 // % Chance = Zufall für Schrittlänge
D = 0 // % Zufall für Winkel
S = 1 // Skalierung pro Grad
G = 4 // Grad
// Regeln
F : F-F++F-F
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Die Kochkurve als Fraktal im L-System beschrieben, ist, da der Startwinkel 0 beträgt, nach Norden (oben) ausgerichtet.

Die Sierpinki-Kurve im L-System

Die Sierpinki-Kurve, ebenfalls ein Fraktal, wurde bereits vorgestellt. Auch diese Kurve lässt sich auch als L-System beschreiben. Die Besonderheit ist, dass hier zum ersten Mal neben den Regeln auch Substitutionen benutzt werden. Dies ist nur eine abkürzende Schreibweise, dann die »L« und »R«, die bei den vierfachen Selbstaufrufen (Rekursion) erzeugt werden, werden dann durch die Befehlsfolgen von »F«, »+« und »« ersetzt. ((siehe:) Datei: Turtle-L-System-Bsp37)

// Beispiel für ein L-System: Sierpinki-Kurve
// Parameter
M = 7 // Schrittlänge
L = 60 // Linker Winkel
R = 60 // Rechter Winkel
C = 0 // % Chance = Zufall für Schrittlänge
D = 0 // % Zufall für Winkel
S = 1 // Skalierung pro Grad
G = 4 // Grad
A = wL // Startaxiom
// Regeln
w : 270 // Startwinkel
L : +R-L-R+
R : -L+R+L-
// Substitutionen
L > +F-F-F+
R > -F+F+F-
// end of file.

Beispiel zum Javascripts »AI-Turtle-Paser_bin.jsx«, das das automatisierte Zeichnen aufgrund des Lindenmayer-System (L-System) im Illustrator erlaubt.
Die Sierpinki-Kurve entsteht aus Parametern, Regeln und Substitutionen.

Fazit

Damit endet der fünfteilige Artikel über Turtle Graphics für Adobe Illustrator 2023. Sie haben drei Javascripts kennengelernt, die Ihnen das Nutzen von Turtle Graphics in diesem Vektorprogramm erlauben. Obwohl die Turtle Graphics aus den Anfängen der Informatik stammt, hat sie nichts von ihrer Faszination verloren. Das einfache und schnelle Programmieren von Grafiken in Javascript macht das Automatisieren interessant.

Die fünf Artikel über Turtle Graphics und das Lindemayer-System (L-System)

  1. Javascript »Turtle Graphics« für Adobe Illustrator 2023
  2. Beispiele zum Javascript »Turtle Graphics« für Adobe Illustrator 2023
  3. Javascript »AI-PathToTurtleGraphics« für Adobe Illustrator 2023
  4. Javascript »AI-Turtle-L-Paser« für Adobe Illustrator 2023
  5. Beispiele zum Javascript »AI-Turtle-L-Parser« für Adobe Illustrator 2023

ENDE

(Hilfe:) Wenn Sie eine Funktion zum Automatisieren in (AI:), (PS:), (IC:), (ID:) oder (FM:) benötigen, jedoch nicht selbst programmieren, dann sprechen Sie mich an. Ich übernehme gerne kleine Aufträge: zum Kontaktformular.