Nachdem wir unsere schönen Grafiken generiert haben, wollen wir diese natürlich auch
exportieren. Damit wir sie z.B. in einer anderen Software weiternutzen können oder
mit einem Fertigungsverfahren wie im Laser oder einem 3D-Drucker weiternutzen können. Hierfür gibt
es eine ganz einfache Funktionen. Diese Funktion nennt sich "save" und innerhalb von "save" können
wir dann noch einen Dateinamen reinschreiben, z.B. "bild.png". Wenn ich das jetzt ausführen würde,
wir erinnern uns die "draw"-Schleife läuft ja immer fort, würden jetzt ganz ganz viele Bilder
versucht werden zu speichern, deswegen, wenn ihr die "save" Funktion benutzt,
vergesst auf keinen Fall die noLoop Funktionen hinzuzufügen. Wenn wir das jetzt abspeichern,
sehen wir, dass ich hier sozusagen ein Speicher-Dialog sich öffnet,
um sozusagen unsere Datei abzuspeichern. Eine andere Variante, um sozusagen dieses
"noLoop" zu umgehen ist das wir das Ganze zum Beispiel in eine Funktion reinpacken. Hier
können wir zum Beispiel unsere "keyPressed" nehmen. Das sozusagen erst gespeichert wird,
sobald auf eine Taste gedrückt wird. Dann einfach unsere "save" Funktion hier rein.
Speichern das Ganze und erst wenn ich jetzt eine Taste drücke wird sozusagen das speichern
ausgelöst. Und sonst läuft der "draw"-Zyklus einfach weiter. Der normale Renderer von p5js
generiert uns Pixelbilder, heißt wir können PNGs und JPEGs exportieren. Aber gerade wenn
wir mit einem Vektor-Bearbeitungsprogramm oder wir später zum Beispiel mit dem Laser arbeiten wollen,
dann brauchen wir Vektordaten. Wie ich euch ganz am Anfang schon erzählt habe,
können wir den Render-Modus hier oben bei createCanvas umstellen, indem wir hier einfach
SVG reinschreiben und nun werden keine Pixel mehr generiertm sondern es werden SVGs generiert,
Vektordaten. Und deswegen kann ich dann auch hier unten bei "bild" als Extension
SVG reinschreiben. Und sobald ich jetzt auf speichern drücke und dann eine Taste drücke,
öffnet sich wieder der speichern-Dialog. Ganz wichtig wenn ihr den SVG-Modus benutzt,
gibt es ein paar Limitations. Zum Beispiel das umso mehr Punkte ihr zeichnet, umso größer wird
eure Vektordatei. Was bei Pixelbildern nicht das große Problem ist, aber bei Vektordaten ist
es irgendwann ein Problem. Wenn ihr z.B. Linien zeichnet und die Linien extrem komplex sind und
ganz viele Punkte entlang der Linien haben, gibt es irgendwann ein Limit bei mehreren 10.000,
wo zum Beispiel Vektorprogramme wie Illustrator oder Sketch oder selbst Adobe Acrobat Reader,
das nicht mehr anzeigen können. Deswegen wenn ihr mit SVG arbeitet, achtet ein bisschen auf
die Ressourcen. Achtet ein bisschen darauf, wieviel Shapes ihr generiert, weil das durchaus
später einen Einfluss auf die Performance eures Grafik-Bearbeitungsprogramms hat.