Es lebe die Schildkröte: TurtleGFX und P5.js

P5.js
Turtle
TurtleGFX
JavaScript
Creative Coding
CodeGuppy
Autor:in

Jörg Kantel

Veröffentlichungsdatum

9. Juni 2024

Da habe ich mir am Freitag etwas eingebrockt: Die beiläufig in einem Nebenabsatz eingefügte Bemerkung, daß mir in P5.js so etwas wie Pythons Turtle fehlen würde, hat mir keine Ruhe gelassen und mich zum Sammeln von Material animiert, das mir helfen soll, CodeGuppys Bibliothek TurtleGFX, die Pythons Schildkröte in P5.js (und in CodeGuppy selber) implementieren will (und die auch in Numero Einzug gehalten hat), zu verstehen und in P5.js anzuwenden.

Die Beispielanwendungen, die ich gefunden habe, sind alle von Mr. CodeGuppy itselfs, Marian Veteanu, und in CodeGuppy implementiert. Da diese IDE doch in Teilen sehr stark von P5.js abweicht, ist erst einmal die Lektüre des Beitrags »Getting started with CodeGuppy.com for P5.js Developers« zu empfehlen. Danach kann man sich die übrigen Beiträge zu TurtleGFX eigentlich (mit einer Ausnahme) in beliebiger Reihenfolge reinziehen. Ich empfehle diese Abfolge:

  1. Turtle Lines: A simple line rotated using the turtle graphics library creates amazing patterns.
  2. Hilbert Curve: Generate Hilbert curve using turtle graphics.
  3. Turtle Polygons. Generate polygons using turtle graphics.
  4. Sierpinsky Triangle. Draw Sierpinski triangle using turtle graphics.
  5. Etch with Turtle. This is an implementation with Turtle Gfx of the famous Etch a Sketch.
  6. Fractal Tree. This program will show you how to generate a fractal tree using turtle graphics.
  7. Forest Walk. Explore a virtual forest of fractal trees generated using turtle graphics. (Dieser Beitrag ist die oben erwähnte Ausnahme, er setzt die Lektüre von »Fraktal Tree« voraus.)

Danach solltet Ihr und auch ich in der Lage sein, TurtleGFX in Eure (und ich in meine) P5.js-Sketche einzubauen. Wer dann Blut geleckt hat und wissen will, wie man eine eigene Turtle-Bibliothek implementiert, dem oder ihr sei noch dieser Beitrag empfohlen:

  1. Turtle Graphics: Turtle graphics is the flagship feature of Logo programming language. See how easy is to add Logo like commands to your favorite JavaScript language.

Jetzt fehlt mir eigentlich nur noch eine Bibliothek für die Mathematik mit komplexen Zahlen. Hier empfiehlt das Processing-Forum die JavaScript-Library Math.js mit dem Modul Complex Numbers, das man via NPM auch lokal installieren kann. Das sollte ich auch noch testen. Aber erst einmal ist die Schildkröte an der Reihe. Still digging!


Bild: Two Turtles drawing together, erstellt mit DreamStudio. Prompt: »A turtle and a python paint together at an easel, colored steampunk style«, Modell: stable-diffusion-xl-1024-v1-0, Style: Comic Book.