Processing 2.0

Auch für Bilder bringt Processing mit PImage einen eigenen Datentyp mit. Um ein Bild auszugeben geht man also folgendermaßen vor: Man deklariert eine Variable (genauer ein Objekt) vom Typ PImage. Dann weist man ihr mit der Funktion loadImage(„dateiname“) einen Wert zu.  Um sie dann anzuzeigen verwendet man die Funktion image(var,  x, y, breite,  höhe). Processing kann Bilder der Formate jpg, gif und png verarbeiten.

Beispiel: starte Applet

PImage foto;//deklariert die Variable foto;

void setup(){
 size(300, 300);
 foto = loadImage("blume.JPG");
//weist der Variablen foto die datei blume.jpg zu
}

void draw(){
 image(foto, 0, 0, 300,300);
//gibt die Variable foto auf dem Bildschirm aus
}

Um Bilder zu verändern kann man beispielsweise die Funktion tint(); verwenden, die wie fill() und stroke() verwendet werden können.

Aufgabe: Schreibe ein Programm die Blume je nach Mausposition rot und grün einfärbt.

Will man komplexere Veränderungen vornehmen, kann man mit der Methode loadPixels() kann man die einzelnen Bildpunkte als Daten vom Typ Color in ein Array laden.

Siehe Projekt: Bild aus Text

Processing 2.0

Für die Erstellung von Grafiken sind Sinus-Kurven und Spiralen von essentieller Bedeutung. Mit Processing sind diese Formen sehr einfach umzustzen.

Zuerst aber etwas Mathematik. Winkel können in Grad ° und in Rad angegeben werden, wobei eine volle Umdrehung 360° oder 2 π (PI) Rad entspricht. π ist also 3,14. In Processing gibt es dafür die Konstanten PI, QUARTER_PI, HALF_PI und TWO_PI.

Zum Umrechnen dienen die Funktionen radians() – rechnet Grad in Rad, oder degrees() – rechnet Rad in Grad um.

sin und cos

Immer wenn in Processing ein Winkel anzugeben ist, wird dieser vom Programm in Rad erwartet. Wenn man lieber in Grad arbeitet, muss man ihn eben umrechnen (mit radians()).

Beispiel: Sinus starte Applet

size (300,300);
noStroke();

float winkel = 0.0;
for (int x=0; x<= width; x+=1) { //die Schleife ist notwendig, um alle x-Werte zu zeichnen.
fill(0);
float y= 150 + (-sin(radians(winkel))*50.0);//berechnet die y-Werte für eine Sin-Kurve
rect(x,y,1,1);
fill(160);
y= 150 + (-cos(radians(winkel))*20.0);//berechnet die y-Werte für eine Cos-Kurve
rect(x,y,1,1);
winkel += 1; //definiert die Skalierung der Wellen
}

Mit der Sinus- und Cosinus-Funktion kann man auch Kreise und Spiralen aus Objekten generieren.

Beispiel: Kreis starte Applet

noStroke();

size(300,300);
int radius =120;
for (int grad =0; grad<360; grad +=12) {
float winkel = radians(grad);
float x = 150 + (cos(winkel)*radius);
float y =150 + (sin(winkel)*radius);
ellipse(x,y,15,15);
}

Beispiel Spirale: starte Applet

noStroke();

size(300,300);
int radius =10;
for (int grad =0; grad<3600; grad +=12) {
float winkel = radians(grad);
float x = 150 + (cos(winkel)*radius);
float y =150 + (sin(winkel)*radius);
ellipse(x,y,15,15);
radius += 2;
}

Hier wird einfach für jeden Winkel der Radius erhöht. Das bewirkt, dass aus dem Kreis eine Spirale wird.

Aufgabe: Ändere das Programm so um, dass es eine schöne Spirale zeichnet.

Beispiel Vieleck: starte Applet

int ecken = 5; //Anzahl der Ecken!
int winkel;// wird später aus der Anzahl der Ecken berechnet
float x1, y1, x2, y2;

void setup() {
size(300, 300);
}

void draw() {
//die 2 folgenden Anweisungen lassen die Objekte nach kurzer Zeit verblassen
fill(255, 20);
rect(0, 0, width, height);
//Aufruf der Funktion mit den Parametern:
//Eckenzahl, MauspositionX, MauspositionY, RadiusX, RadiusY
vieleck(ecken, mouseX, mouseY, 80, 80);
}
// Funktion zeichnet Vielecke
void  vieleck (int seiten, int x, int y, int radiusX, int radiusY) {

// winkel entspricht dem Abstander der Ecken in Grad
// z.B.: 3 Ecken:120°; 4 Ecken:90° usw.
winkel = (int) 360/seiten;
//die Schleife wird der Anzahl der Ecken entsprechend aufgerufen
//z.B.: 3 mal beim 3-Eck oder 4 mal beim 4_eck
for (int grade=0; grade<360; grade+=winkel) {
// erster Punkt
x1 =sin(radians(grade))*radiusX+(x);
y1 =cos(radians(grade))*radiusY+(y);

// zweiter Punkt
x2 =sin(radians(grade+winkel))*radiusX+(x);
y2 =cos(radians(grade+winkel))*radiusY+(y);

//zeichnet Linie zwischen Punkt 1 und Punkt 2
line(x1, y1, x2, y2);
}
}

In diesem Beispiel wird eine Funktion verwendet, um ein Vieleck mit beliebig vielen Punkten um die Mausposition am Bildschirm zu zeichnen. Dies wird erreicht, indem man den vollen 360°-Winkel durch die Anzahl der Eckpunkte des Vieleckes teilt.

z.B.: 3 Eckpunkte: 360/3 = 120°

Danach beginnen wir in einer Schleife bei Null° und addieren jeweils den Winkel, der bei der vorherigen Division herausgekommen ist. Bei 360° angekommen brechen wir die Schleife ab.

bei 3 Eckpunkten gibt die Schleife nach der Reihe die Winkel 0,120,240 aus.

Wir berechnen dann aus dem Sinus und dem Cosinus der 3 Winkel die Koordinaten der 3 Punkte des Dreiecks.

Der erste Punkt kommt unter der aktuellen Mausposition zu liegen, da wir die X-Achse mit dem Sinus und die Y-Achse mit dem Cosinus berechnen. Bei Null° bleibt also der X-Wert gleich, da der Sin von 0 ebenfalls 0 ist. Der Cos von 0 ist aber 1 und somit verschiebt sich der erste Punkt in pos. Y-Richtung nach unten. Dann werden die weiteren 2 Punkte nach dem gleichen Schema berechnet.

Um dann noch aus den einzelnen Punkten eine Form zu bekommen, brauchen wir in jedem Schleifendurchlauf noch einen weiteren Punkt, der entweder dem aktuellen um den Winkel voraus- oder nacheilt.