Diana Lange. GENERATIVE GESTALTUNG Komplexe Datentypen: PShape

Transkript

1 Diana Lange GENERATIVE GESTALTUNG Komplexe Datentypen: PShape

2 EINFÜHRUNG In diesem Foliensatz geht es um den Import und die Darstellung von vektorbasierten Bildmaterial in Processing. 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: Links: Rastergrafik Rechts: Vektorgrafik Quelle:

3 ZUSATZINFORMATIONEN VERSCHOBENE INITALISIERUNG Bisher haben wir immer Variablendefinition und Initalisierung in einem Schritt gemacht: /* * Definition einer int-variable mit dem Namen num und * Initalisierung mit dem Wert 5 */ int num = 5;

4 ZUSATZINFORMATIONEN VERSCHOBENE INITALISIERUNG Bisher haben wir immer Variablendefinition und Initalisierung in einem Schritt gemacht: /* * Definition einer int-variable mit dem Namen num und * Initalisierung mit dem Wert 5 */ int num = 5; Es ist aber auch möglich, die zwei Teile in zwei Schritten auszuführen. Dies ist vor allem notwendig, wenn man eine globale Variable benötigt, aber den Initalwert erst zu einem späteren Zeitpunkt setzen kann. int num; // Variablendefinition ohne Initalisierung void setup() { size(500, 500); num = 5; // Initalisierung }

5 GEFAHREN DER VERSCHOBENEN INITALISIERUNG Die verschobene Initalisierung bietet eine gefährliche Fehlerquelle. Denn: solange keine Initalisierung getätigt wurde, solange ist auch kein Zugriff auf den Variablenwert möglich. Zwei Beispiele: int num; // Variablendefinition ohne Initalisierung void setup() { size(500, 500); println(nu m); // Fehler!!! // num ist nicht initalisiert und // hat deswegen auch keine Inhalt } int num; // Variablendefinition ohne Initalisierung void setup() { size(500, 500); num = num + 5; // Fehler!!! // num ist nicht initalisiert und // kann deswegen auch nicht erhöht // werden }

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 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.

7 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 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.

8 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 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.

9 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.

10 VORBEREITUNG ILLUSTRATOR 4 Da die Positionierung der Grafik in Processing anhand der Zeichenfläche geschieht, sollte diese möglichst sinnvoll gesetzt sein. Fraustregel: Die Zeichenfläche sollte in etwa so groß wie das darauf gezeigte sein. Die Zeichenfläche lässt sich 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.

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

12 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.

13 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:

14 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 / ß). Ändere nichts an den Standardeinstellungen.

15 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«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.

16 SVG Die SVG-Datei ist im Prinzip nichts anderes als eine Auflistung von Koordinaten- und Farbinformationen. 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 (in diesem Beispiel ist»hintergrund«der Ebenenname) und korriegiere ggf. den Ebenenname im Editor.

17 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

18 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.

19 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).

20 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);

21 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:

22 PSHAPE EBENEN Über die Ebenennamen könne die einzelnen Ebenen einer Vektorgrafik in einzelne Variablen abgespeichert und gezeichnet werden. Beispielcode: 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); }

23 PSHAPE EBENEN 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; } }

24 PSHAPE STILE Vektorbilder werden standardmäßig mit den Farben (Füllung und Kontur) gezeichnet, die in 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(); // Stil deaktivieren fill(0); // schwarze Faellfarbe setzen shape(blatt, 50, 50); // schwarzes Blatt wird gezeichnet } blatt.enablestyle(); // Stil aktivieren // blatt ignoriert jetzt fill() shape(blatt, 50, 50); // grünes Blatt wird gezeichnet Beispielcode: