Processing kann SVG-Vektorgrafiken (z.B. aus Illustrator oder das kostenlose Inkscape) verarbeiten und darstellen. Damit lassen sich grafische Elemente bequem in Illustrator erstellen und dann in Processing animieren.
Klasse PShape
Dazu gibt es die Klasse „PShape“. Mit der Funktion „loadShape()“ können wir ein PShape Objekt von einer SVG-Datei erzeugen. (Die SVG Datei muss dazu im „data“ Verzeichnis des Processings Sketches liegen. Man kann aber auch einfach die SVG Datei ins Processing Fenster ziehen und Processing kopiert sie automatisch an die richtige Stelle).
PShape s = loadShape( test.svg );
Anschliessend können wir die Vektorgrafik mit der Funktion „shape()“ zeichnen:
shape( s );
Der Shape Funktion übergeben wir als Parameter das PShape-Objekt, dass wir zeichnen wollen. Optional können wir auch noch die x- und y Position und die Breite und Höhe übergeben.
shape( s, mouseX, mouseY, 80, 80 );
Wie gehabt können wir mit translate(), rotate() und scale() das Koordinatensystem verschieben, rotieren und skalieren, bevor wir den Shape zeichnen.
Beispiel:
PShape svg;
void setup() {
size(500, 500);
smooth();
// Lade Shape
svg = loadShape("test.svg");
}
void draw() {
background(255);
// Verschiebe Koordinaten auf Fenstermitte
translate( width / 2, height / 2 );
// Zeichne Shape
shape( svg);
}
Herunterladen: SVG_Simple
Mit translate( width / 2, height / 2 ) wird das Koordinatensystem so verschoben, dass die Grafik in der Fenstermitte liegt. Processing benutzt beim Positionieren der Grafik immer die Koordinaten, mit denen es in Illustrator angelegt wurde. Am besten, man zentriert die Objekte in Illustrator immer um den 0-Punkt.
Ein sehr cooles Feature von PShape ist, dass das Shape Objekt Unterobjekte enthalten kann, die wiederum Shapes sind. Schaut euch dazu die Datei “test.svg” im “data” Verzeichnis mal in Illustrator an. Im obigen Beispiel enthält die SVG-Datei 3 Ebenen: „kreis“, „zeiger1“ und „zeiger2“.
Mit der Funktion getChild() des Shape Objektes kann man dessen Unterobjekte ermitteln:
Die Funktion erwartet den Namen der Ebene im SVG File (in doppelten Anführungszeichen) und liefert (falls es die Ebene gibt) ein neues Objekt vom Typ PShape, welches nur für diese Ebene gilt. Das können wir dann in einer Variablen speichern.
PShape kreis = svg.getChild( „kreis“ );
Jetzt haben wir das Objekt “kreis” in einer Variablen mit gleichem Namen gespeichert und können es wie ein ganz normales PShape-Objekt verwenden, z.B. zeichnen:
shape( kreis );
Damit kann man jetzt die Teile einer SVG Dstei unabhängig voneinander animieren. Zunächst brauchen wir eine Variable für die SVG Datei und für jedes ihrer Elemente:
Beispiel:
PShape svg; PShape kreis; PShape zeiger1; PShape zeiger2; float rot = 0
Die Variablen definieren wir gleich am Anfang außerhalb der Funktionen setup() und draw(), damit wir sie von dort aus benutzen können. Die Variable “rot” brauchen wir später zum Animieren.
Zu Beginn des Programms laden wir die SVG Grafik und speichern die Unterobjekte in den Variablen:
void setup() {
size(500, 500);
smooth();
// SVG-Datei laden
svg = loadShape("test.svg");
// Elemente ermitteln und in Variablen speichern
zeiger1 = svg.getChild("zeiger1");
zeiger2 = svg.getChild("zeiger2");
kreis = svg.getChild("kreis");
}
In der draw() Funktion löschen wir zunächst den Hintergrund und zentrieren die Grafik im Fenster. Dann zeichnen wir das erste Element, rotieren um einen kleinen Betrag (rot) und zeichnen das zweite Element. Dann rotieren wir noch etwas mehr und zeichnen das dritte Element:
void draw() {
background(255);
translate( width / 2, height / 2 ); // im Fenster zentrieren
shape(kreis ); // Kreis zeichnen
rotate( rot ); // ein bisschen rotieren
shape( zeiger1 ); // und den ersten Zeiger zeichnen
rotate( rot * 2 * PI ); // noch etwas mehr rotieren
shape( zeiger2 ); // zweiten Zeiger zeichnen
rot += 0.005; // Variable für Rotation etwas erhöhen
}
Herunterladen: SVG_Children