Diana Lange. Generative Gestaltung Komplexe Datentypen: PShape

Transkript

1 Diana Lange Generative Gestaltung Komplexe Datentypen: PShape

2 einführung Eine Rastergrafik, auch Pixelgrafik (englisch raster graphics image, digital image, bitmap oder pixmap), ist eine Form der Beschreibung eines Bildes in Form von computerlesbaren Daten. Rastergrafiken bestehen aus einer rasterförmigen Anordnung von so genannten Pixeln (Bildpunkten), denen jeweils eine Farbe zugeordnet ist. Quelle: k Vektorgrafiken basieren, anders als Rastergrafiken, nicht auf einem Pixelraster, in dem jedem Bildpunkt ein Farbwert zugeordnet ist, sondern auf einer Bildbeschreibung, die die Objekte, aus denen das Bild aufgebaut ist, exakt definiert. [...] Eines der wesentlichen Merkmale und Vorteile gegenüber der Rastergrafik ist die stufenlose und verlustfreie Skalierbarkeit. Quelle: k GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE

3 einführung Der Datentyp für vektorbasierte Bildinformationen in Processing lautet PShape. PShape gehört zu den Komplexen Datentypen und bietet einige Möglichkeiten, die geladene Vektordatei zu manipulieren (z.b. neu einfärben, einzelne Ebenen bearbeiten, usw.). Die Vektordaten müssen im Format.svg (= Scalable Vector Graphics) vorliegen. Das Dateiformat ist das Standardformat für Vektorbilddaten im Web. GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE.

4 Grundlegende Probleme Um in Processing gut mit Vektor-Daten arbeiten zu können bedarf es einiger Vorbereitungen und (strategische) Vorüberlegungen, wie das Vektorbild in Adobe Illustrator (oder in einem anderen vektorbasiertem Programm) am sinnvollsten vorzubeiten ist. Zum Beispiel erfolgt die Ausrichtung des Vektor-Bildes in Processing anhand der Zeichenfläche (hier grau dargestellt). Wenn man in Processing also beispielsweise angibt, dass die Grafik an Position X: 1o und Y:10 gezeichnet werden soll, dann beginnt die Zeichenfläche (mit der linken, oberen Ecke) an dieser Stelle, nicht aber die eigentliche Zeichnung (hier das Blatt). Beispiel-Vektordatei Die graue Fläche stellt die Zeichenfläche der Vektor-Datei dar.

5 Grundlegende Probleme Um in Processing gut mit Vektor-Daten arbeiten zu können bedarf es einiger Vorbereitungen und (strategische) Vorüberlegungen, wie das Vektorbild in Adobe Illustrator (oder in einem anderen vektorbasiertem Programm) am sinnvollsten vorzubeiten ist. Zum Beispiel erfolgt die Ausrichtung des Vektor-Bildes in Processing anhand der Zeichenfläche (hier grau dargestellt). Wenn man in Processing also beispielsweise angibt, dass die Grafik an Position X: 1o und Y:10 gezeichnet werden soll, dann beginnt die Zeichenfläche (mit der linken, oberen Ecke) an dieser Stelle, nicht aber die eigentliche Zeichnung (hier das Blatt). Beispiel-Vektordatei Die graue Fläche stellt die Zeichenfläche der Vektor-Datei dar. Desweiteren sollte man vorher überlegen, ob die Grafik in Processing gedreht werden soll. Denn die Drehung des Vektor-Bildes erfolgt über Matrixtransformationen. Somit dreht sich die Zeichnen standardmäßig um die linke, obere Ecke der Zeichenfläche der Vektor-Grafik.

6 Grundlegende Probleme Um in Processing gut mit Vektor-Daten arbeiten zu können bedarf es einiger Vorbereitungen und (strategische) Vorüberlegungen, wie das Vektorbild in Adobe Illustrator (oder in einem anderen vektorbasiertem Programm) am sinnvollsten vorzubeiten ist. Zum Beispiel erfolgt die Ausrichtung des Vektor-Bildes in Processing anhand der Zeichenfläche (hier grau dargestellt). Wenn man in Processing also beispielsweise angibt, dass die Grafik an Position X: 1o und Y:10 gezeichnet werden soll, dann beginnt die Zeichenfläche (mit der linken, oberen Ecke) an dieser Stelle, nicht aber die eigentliche Zeichnung (hier das Blatt). Beispiel-Vektordatei Die graue Fläche stellt die Zeichenfläche der Vektor-Datei dar. Desweiteren sollte man vorher überlegen, ob die Grafik in Processing gedreht werden soll. Denn die Drehung des Vektor-Bildes erfolgt über Matrixtransformationen. Somit dreht sich die Zeichnen standardmäßig um die linke, obere Ecke der Zeichenfläche der Vektor-Grafik Im folgenden werden einige Tipps gegeben, wie die Daten am besten in Illustrator vorzubereiten sind.

7 Vorbereitung Illustrator 1 Die Vektor-Daten sollten aus möglichst wenig Einzelformen bestehen. Verschmelze zusammengehöriges mit dem Pathfinder. Beispiel: Hier sind alle Linien, die die Blattadern darstellen, zu einer zusammengesetzen Form verschmolzen. 2 Alles, was sich in der Vektor-Datei befindet, wird in Processing auch gezeichnet werden - auch das, was außerhalb der Zeichenfläche ist. Lösche alles, was nicht in Processing gezeichnet werden soll (z.b. Elemente außerhalb der Zeichenfläche, unsichtbare Ebenen). 3 Lösche Hintergrundflächen. In der Regel wird der Hintergrund in Processing gestaltet und / oder die Vektor-Bilder sollen sich überlagern. Dafür wird natürlich eine freigestellte Grafik benötigt.

8 Vorbereitung Illustrator 4 Da die Positionierung der Grafik in Processing anhand der Zeichenfläche geschieht, sollte diese möglichst sinnvoll gesetzt sein. Faustregel: Die Zeichenfläche sollte in etwa so groß wie das darauf gezeigte sein. Tipp: Die Zeichenfläche lässt sich in Adobe Illustrator mit dem Zeichenflächenwerkzeug bearbeiten: 5 Oft ist es sinnvoll die Konturen in Flächen umzuwandeln. In Illustrator unter Objekt > Umwandeln... 6 Illustratorspezifische Effekte können nicht verwendet werden (z.b. Schlagschatten, Füllmethoden wie Multiplizieren). Auch Verläufe werden i.d.r. nicht richtig angezeigt (am ehesten funktionieren linieare Verläufe). Normale Transparenz ist kein Problem.

9 Vorbereitung Illustrator 7 Sortiere die Ebenen sinnvoll. Gruppiere ggf. zusammengehöriges. Gebe den Ebenen / Pfaden / Gruppen sinnvolle Name (ohne Leerzeichen, keine Sonderzeichen, keine Umlaute oder ß). Über die Ebenennamen kann man in Processing später wieder auf diese Ebenen zugreifen.

10 Vorbereitung Illustrator 8 Wenn die Grafik in Processing gedreht werden soll, überlege um welchen Punkt sich die Grafik drehen soll. Verschiebe die Grafik so, dass sich dieser»drehpunkt«links oben an der Zeichenfläche befindet (die Grafik befindet sich dann zum Großteil außerhalb der Zeichenfläche). Beispiel: Die graue Fläche ist der Bereich außerhalb der Zeichenfläche. Die weiße Fläche ist die Zeichenfläche. Das Blatt soll später in Processing um den Blattstiel gedreht werden. Daher wurde das Blatt so verschoben, dass dieser Stiel genau an der linken oberen Kante der Zeichenfläche liegt. Das jetzt das Blatt außerhalb der eigentlichen Zeichenfläche liegt ist kein Problem, da ja auch alles außerhalb der Zeichenfläche in Processing dargestellt wird.

11 Vektor-Grafik Speichern Vektor-Bilder werden in Processing im Format»SVG«importiert. SVG (Scalable Vector Graphics) ist das Standardformat für vektorbasierte Bilder im Web. siehe auch:

12 Vektor-Grafik Speichern Vektor-Bilder werden in Processing im Format»SVG«importiert. SVG (Scalable Vector Graphics) ist das Standardformat für vektorbasierte Bilder im Web. siehe auch: Wenn die Vorbereitungen in Illustrator abgeschlossen sind, gehe auf»speichern unter«. Wähle dort»svg«aus und vergebe einen sinnvollen Dateiname (ohne Leerzeichen, keine Sonderzeichen, keine Umlaute oder ß). Ändere nichts an den Standardeinstellungen.

13 Ordnerstruktur Processing sieht für alle Daten, die importiert werden sollen (z.b. Vektorbilder, Pixelbilder, Textdateien, usw.), eine bestimmte Ordnerstruktur vor. Im Sketch-Verzeichnis»svgImport«liegt die»svgimport.pde«datei und das neu erzeugte Untervezeichnis»data«. Ablauf: 1. Erstelle einen neuen Sketch. Beispiel: svgimport 2. Gehe in das Sketch-Verzeichnis (dort wo die.pde Datei liegt) 3. Erstelle in diesem Sketch-Verzeichnis einen Unterordner namens»data«achte auf die genaue Schreibweise, Groß- und Kleinschreibung wird auch hier unterschieden 4. Lege alle Dateien, die in Processing importiert werden sollen, in diesen»data«ordner. In»data«. liegen alle Dateien, die später in Processing importiert werden sollen.

14 SVG Die SVG-Datei ist im Prinzip nichts anderes als eine Auflistung von Koordinaten- und Farbinformationen (im XML Standard). Diese sind als Text lesbar; daher können SVG-Datein problemlos mit Texteditoren (z.b. Windows Editor) geöffnet werden und auch damit geändert werden. Anmerkung: In manchen Fällen speichert Illustrator leider nicht die richtigen Ebenennamen in die SVG-Datei. Falls das Laden einer Ebene in Processing nicht funktioniert, öffne die SVG Datei (z.b. mit Windows Editor), kontrolliere die dort gespeicherten Ebennamen und korriegiere ggf. den Ebenenname im Editor. Die Ebennamen sind als Werte des Attributs id im folgenden Format zu finden id = "ebenenname" (in diesem Beispiel ist z.b.»hintergrund«der Ebenenname)

15 PShape Vektorbilder werden in Processing in Variablen vom Datentyp PShape abgelegt. PShape / float height float width void disablestyle() void enablestyle() PShape[] getchildren() PShape getchild(string ebenenname) Hier gezeigt ist ein Ausschnitt der Methoden, die PShape mitliefert. Weitere Infos gibt es unter

16 PshaPe vektordaten laden Das laden der Vektordaten erfolgt in setup() über den Namen der Vektordatei. PShape blatt; void setup() { size(500, 500); blatt = loadshape("blatt.svg"); } loadshape() ist eine Funktion, die ein PShape zurückgibt. Anmerkung:»blatt.svg«sollte sich natürlich im Untervezeichnis»data«befinden. GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE

17 PshaPe verwenden shape(myshape, x, y); Die Funktion shape() stellt die Vektorgrafik auf der Zeichenfläche dar. x und y sind dabei die Koordinaten, an denen die Grafik dargestellt werden soll. Diese Koordinaten beziehen sich dabei auf die linke, obere Ecke der Zeichenfläche der Vektorgrafik. myshape ist die Grafik, die dargestellt werden soll. myshape ist ein Element vom Datentyp PShape. shape(myshape, x, y, breite, hoehe); Optional können bei der shape() Funktion noch zwei weitere Argumente mitgegeben werden. Diese bestimmen dann die Breite und Höhe der Grafik (bezieht sich wieder auf die Zeichenflächenbreite /-höhe). GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE

18 PshaPe verwenden shape(myshape, x, y); Die Funktion shape() stellt die Vektorgrafik auf der Zeichenfläche dar. x und y sind dabei die Koordinaten, an denen die Grafik dargestellt werden soll. Diese Koordinaten beziehen sich dabei auf die linke, obere Ecke der Zeichenfläche der Vektorgrafik. myshape ist die Grafik, die dargestellt werden soll. myshape ist ein Element vom Datentyp PShape. shape(myshape, x, y, breite, hoehe); Optional können bei der shape() Funktion noch zwei weitere Argumente mitgegeben werden. Diese bestimmen dann die Breite und Höhe der Grafik (bezieht sich wieder auf die Zeichenflächenbreite /-höhe). Wenn eine Breite und Höhe angegeben wird, kann die Grafik verzerrt werden. Ist eine Verzerrung nicht erwünscht, so kann sich auf die aktuelle Größe der Grafik bezogen werden. z.b. PShape blatt = loadshape("blatt.svg");... shape(blatt, 10, 10, blatt.width * 0.5, blatt.height * 0.5); GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE

19 PshaPe verwenden PShape blume; PShape blatt; void setup() { size(600, 600); blume = loadshape("blu me.svg"); blatt = loadshape("blatt.svg"); } void draw() { background(#ffed bc); shape(blume, width / 2, height / 2); shape(blatt, width/2, height/2, blatt.width*0.4, blatt.height*0.4); } Beispielcode: GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE

20 PshaPe Zeichnen Das Zeichnen der Vektorgrafiken erfolgt am einfachsten über die Matrix-Transformationen. D.h. die Positionierung des PShape, die Rotation davon und die (verzerrungsfreie) Skalierung erfolgt über translate(), rotate() und scale(). Tipp: Um eine Spiegelung zu erhalten, kann eine negative Breite und/ oder Höhe angegeben werden. void draw() { background(255); pushmatrix(); translate(width * 0.5, height * 0.5); rotate(pi * PI); scale(0.1); shape(vector, 0, 0, vector.width, vector.height); popmatrix(); } pushmatrix(); translate(width * 0.5, height * 0.5); rotate(-pi * PI); scale(0.1); shape(vector, 0, 0, -vector.width, vector.height); popmatrix(); Beispielcode: GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE

21 PshaPe ebenen Mit Hilfe der getchild() Methode kann über den Ebenennamen eine einzelnen Ebene (oder ein Pfad oder eine Gruppe) einer Vektorgrafik in einzelne Variablen abgespeichert und gezeichnet werden. Beispielcode: Die Ebenen von blatt.svg in Adobe Illustrator dargestellt. PShape blattoutline; PShape blattlinien; PShape blatthintergrund; void setup() { size(600, 600); PShape blatt = loadshape("blatt.svg"); blattoutline = blatt.getchild("kontur"); blattlinien = blatt.getchild("adern"); blatthintergrund = blatt.getchild("hintegrund"); } void draw() { background(#ffed bc); shape(blattoutline, 0, 0); shape(blattlinien, 100, 0); shape(blatthintergrund, 200, 0); GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE

22 PshaPe ebenen getchildren(): Es können alle Ebenen in ein PShape-Array abgelegt werden. Beispielcode: PShape[] blattebenen; void setup() { size(600, 600); PShape blatt = loadshape("blatt.svg"); blattebenen = blatt.getchildren(); } void draw() { background(#ffed bc); int i = 0; while (i < blattebenen.length) { shape(blattebenen[i], 0, 0); i = i + 1; } } GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE

23 PshaPe stile Vektorbilder werden standardmäßig mit den Farben (Füllung und Kontur) gezeichnet, die in Adobe Illustrator angelegt wurden. Wenn in Processing die Farben gesetzt werden sollen, müssen zuerst diese Stile deaktiviert werden. Die (Illustrator-) Stile können auch wieder aktiviert werden. Nach der Aktivierung wird die Grafik wieder mit den Farben, die in Illustrator angelegt wurden, gezeichnet. void draw() { background(255); blatt.disablestyle(); fi l l(0); shape(blatt, 50, 50); // Stil deaktivieren // schwarze Faellfarbe setzen // schwarzes Blatt wird gezeichnet } blatt.enablestyle(); shape(blatt, 50, 50); // Stil aktivieren // blatt ignoriert jetzt fill() // grünes Blatt wird gezeichnet Beispielcode: GENERATIVE GESTALTUNG. NATURE. WS DIANA LANGE. HAWK@DIANA-LANGE.DE