Ein Grashalm, zwei Grashalme, Gras wächst, Gras bewegt sich, nach rechts, nach links, dreht sich, variable Geschwindigkeit, viele Grashalme bewegen sich, Grasfläche, etc.
Kapitel: Beispiele mit Funktionsbeschreibungen und Erläuterungen
1) Zeichnen in Processing
2) Variablen & Interaktion
3) Bedingungen
4) Schleifen & Dynamik
5) Bewegungen
6) Modularität und Bedingnungen
7) Bildbearbeitung und Video
8*) Arrays
1. Zeichnen in Processing
1a void setup() und void draw()
In jedem Processing Sketch gibt es feste Bauteile. Im void setup() steht alles was zu Beginn des Programms nur einmal ausgeführt werden muss, wie z.B. die Fenstergröße. Alles was im void draw() steht, wird dagegen 30mal/sekunde ausgeführt. diese beiden Hauptfunktionen werden mit einer geschweiften Klammer geöffnet und ebenso wieder geschlossen. In diesen Bodies stehen Funktionen, d. h. vorgefertigte Befehle, die noch mit Werten gefüttert werden müssen. Dazu gleich mehr… Jede Zeile wird mit einem Strichpunkt abgeschlossen.
void setup(){
funktion();
funktion();
funktion();
…
}
void draw(){
funktion();
funktion();
funktion();
…
}
1b Koordinatensystem
Der Koordinatenursprung beim Start von Processing liegt bei (0, 0), kann aber mit der funktion translate(x, y) verändert werden.
1c Funktionen
Um Objekte in processing zu zeichnen gibt es sog. Funktionen → funktion(Wert) Je nachdem wie viele Werte notwendig sind, um ein Objekt zu definieren, stehen diese zwischen den beiden Klammern hinter dem Befehl.
size() Breite, Höhe
point() x-Koordinate, y-Koordinate
line() 1. x-Koordinate, 1. y-Koordinate, 2. x-Koordinate, 2. y-Koordinate
rect() x-Koordinate, y-Koordinate, Breite, Länge
ellipse() x-Koordinate, y-Koordinate, horizontaler Durchmesser, vertikaler Durchmesser
triangle() x-Koordinate1, y-Koordinate1, x-Koordinate2, y-Koordinate2, x-Koordinate3, y-Koordinate3
Der größte Teil der Funktionen sind in der Reference aufgeführt und erklärt.
1d Farben
Die Standard-Hintergrundfarbe grau kann mit der Funktion background() verändert werden, die Strichfarbe mit der Funktion stroke() und die Füllfarbe durch fill(). Dabei gibt es mehrere Definitionsmöglichkeiten, der Wertebereich geht aber immer von 0 bis 255:
background(Wert) Grauwert/ 0=schwarz, 255=weiß
background(Wert, Wert) Grauwert, Alphawert für Transparenz
background(Wert, Wert, Wert) Rot, Grün, Blau
background(Wert, Wert, Wert, Wert) Rot, Grün, Blau, Alphawert
Um die Strichfarbe oder Füllfarbe auszuschalten gibt es die Befehle noStroke() oder noFill(). Da es hier keiner Werte bedarf, bleiben die Klammern leer.
Beispiel1: Punkt, Gerade, Rechteck und Ellipse
Aufgabe1:Zeichne ein Gesicht!
2.Variablen und Interaktion
Variablen sind Platzhalter für Wertebereiche, d.h. der Wert einer Variablen kann sich laufend verändern. Man öffnet sozusagen eine Schublade, die man aber erst später mit Sachen befüllt. Die Variablen werden vor dem void setup() eingeführt und bekommen einen Namen zugewiesen. Für bestimmte Verwendungsarten gibt es verschiedene Variablentypen. Da alles im void draw() 30mal/sek ausgeführt wird, wird der variablen dann genauso oft ein neuer Wert zugewiesen.
2a Variablentypen
int i= 12; nur ganze Zahlen, wie z.B. 2, 300, 397, -20735,...
float f= 14.7; Zahlen nach dem Komma, wie z.B. 3.5, 2.985, -0.19654...
boolean b=false; true/false; an/aus; 1/0; zwei Möglichkeiten
char letter= 'a' Zeichen
PFont schrift; Text
PImage bild; Bilder
Möchte man die Variablen interaktiv verändern so muss ihnen ein Wert im void draw() zugewiesen werden. Die x-und y-Koordinate kann mit den Befehlen mouseX und mouseY ausgelesen werden. Mit dem Befehl random(Wert, Wert); weißt man einen zufälligen Wert innerhalb eines definierten Wertebereiches zu.
2b Bilder in Processing
Hat man eine Variable für ein Bild eingeführt, muss man die Datei noch im Programm laden. Um den Computer zu schonen, empfiehlt sich dieser Schritt im void setup. Der Befehl
bild=loadImage("cdk.jpg/png/tiff");
Damit das Bild geladen werden kann, muss es noch im SketchFolder liegen (cntrl+k). Unter sketch/ AddFile können Dateien dorthin geladen werden. Hat man die Datei hinzugefügt, gibt es dort einen neuen Ordner data, in dem die Datei dann liegt. Die Funktion
bild=loadImage("NameBild.jpg/png/tiff");
lädt das Bild in den Cache (Programmspeicher). Eigentlich dargestellt wird das Bild aber dann erst durch
image(bild, xPosition, yPosition);
Der Ursprung eines Objektes, also auch eines Bildes lässt sich in verschiedenen Modi definieren:
imageMode(CORNER); Der Ursprung des Bildes liegt an der linken oberen Ecke des Objektes
rectMode(CENTER); Der Ursprung des Rects liegt genau in seiner Mitte
Beispiel2: Collage
2c Text einfügen
Ähnlich wie beim Einfügen von Bildern funktioniert auch die Textvariable. Damit der Text sichtbar wird, sind vier Schritte notwendig. Am Anfang muss die Variable wieder benannt werden, also:
PFont schrift;
Um auf eine Schrift zugreifen zu können, muss man erst eine Font-Datei erstellen. Unter Tools/Create Font stehen alle auf dem Rchner liegenden Fonts zur Verfügung. Man wählt eine aus und gibt die Größe an. Im data-Ordner liegt jetzt eine vlw-Datei. Diese wird im void setup() geladen:
schrift=loadFont("Arial.vlw");
Bevor man den eigentlichen Text editiert, muss die Schrift, die man verwenden möchte, definiert werden. Da man oft mehrere Fonts benutzt, bzw. unterschiedliche Größen ist dieser Schritt notwendig, also:
textFont(schrift, 24);
Direkt nach dieser Funktion kommt der egentliche Befehl zum Text editieren.
text("z.B. Mausposition auf der x-Achse : " + mouseX + "pixel" , xKoordinate, yKoordinate);
Werte, also zum Beispiel die Mausposition können an den eigentlichen Text, der zwischen Anführungszeichen geschrieben wird, mit einem ‘+’ angefügt werden.
2d void mousePressed()
void mousePressed() ist eine gleichwertige Funktion zu void setup() oder void draw(). Alles was in dieser Funktion steht wird nur ausgeführt, wenn die Maus gedrückt wird. So können sich z.B. die Bilder der Collage bei jedem Click neu anordnen.
void mousePressed(){
int xPos= random(0, width);
int yPos= random(0, height);
}
2e map()
Der map-Befehl ermöglicht es, einen Wertebereich einem neuen zuzuordnen. Im Beispiel soll sich der Grashalm , abhängig von der Mausposition auf der x-Achse von -90° bis 90° knicken. Die Werte des Knickwinkels werden von 0 bis width auf -90° bis 90° verteilt.
winkel=map(mouseX, 0, width, -90, 90);
Dieser Befehl funktioniert natürlich nur dann so, wenn die Variable winkel eine vom Typ float ist. Ansonsten sähe die Schreibweise so aus:
winkel=int(map(mouseX, 0, width, -90, 90));
Mit rotate(); können Objekte um den derzeitigen Ursprung rotiert werden. Um den Winkel in Grad angeben zu können, sieht der Befehl so aus:
rotate(radians(winkel));
Damit der Grashalm sich also um seine Wurzel dreht, wird das Koordinatensystem mit translate(); dort hinverschoben.
Beispiel3: Grashalm
float laenge=150;
float winkel;
void setup(){
smooth();
size(500, 500);
background(255);
}
void draw(){
//background(255);
fill(255, 20);
rect(0, 0, width, height);
stroke(0, 50);
strokeWeight(.5);
translate(width/2, height-50);
winkel=map(mouseX, 0, width, -90, 90);
rotate(radians(winkel));
line(0, 0, 0, -laenge);
strokeWeight(20);
point(0, -laenge);
strokeWeight(.5);
}
3 Bedingungen / Schleifen
Eine Funktion ein- oder ausschalten – um Funktionen nur zu bestimmten Zuständen ausführen zu können, muss man Bedingung definieren, z.B. “mache das, wenn ich in einem bestimmten Bereich klicke…”. Hier geht es darum einen Wert mit einem anderen Wert oder einem Ereignis in Beziehung zu setzen.
3a Relationale Operatoren
Um Bedingungen aufzustellen und abzufragen gibt es verschiedene Zeichen mit unterschiedlicher Bedeutung.
= ...Gleichheit, Wertzuweisung, Zahlen und boolean' Variablen
< ...kleiner als
> ...größer als
<= ...kleiner oder genauso groß
>= ...genauso groß oder größer
== ...Gleichheit, nur bei der if-Abfrage
=! ...Ungleichheit, nur bei der if-Abfrage
Außerdem können Variablen ihren Wert z.B. nur ab einer Bestimmten Mausposition ändern, auch hier muss eine Bedingung gestellt werden. Mehrere Bedingungen lassen sich je nachdem mit && (“und”) oder || (“oder”) verknüpfen Der Variablentyp für diese Bedingung heißt boolean. Ihr Wert wird in einer if-Schleife abgefragt.
3b if-Schleife
if(mouseX <= width/2);
rectZeichnen=true;
}else{
rectZeichnen=false;
}
if(rectZeichnen==true){
rect(mouseX, mouseY, 50, 50);
}
Einen Toggle schreibt man, indem man bei einem Ereignis eine boolean =! boolean setzt. Genau dann nämlich nimmt die Variable immer den Wert an, den sie gerade nicht hat. Die Frage ist, ob es immer sinnvoll ist, eine Funktion mit dem selben Button ein-und auszuschalten…in diesem Fall aber definitiv! Hier noch ein einfaches Beispiel für parametrische Buttons :
Mit dem Befehl dist(); lassen sich entfernungen zwischen zwei Punkten berechnen. In der Klammer steht also:
dist (xKoordinate1, yKoordinate1, xKoordinate2, yKoordinate2);
Da eine Gerade gemessen wird, kann ein runder Button so abgefragt werden.
3c for-Schleife
Damit Ereignisse öfter passieren, also z.B. mehrere Objekte gezeichnet werden, ohne immer wieder einen Befehl wiederholen zu müssen, kann man die Anzahl der Ausfürungen innerhalb einer for-Schleife vergrößern und begrenzen. Die Syntax dafür sieht so aus:
void draw(){
background(255);
ellipseMode(CENTER);
translate(width/1.85, height/3.8);
smooth();
stroke(0, 30);
for(int i=0; i<360; i=i+10){
rotate(radians(10));
translate(20, 0);
stroke(0.7*i);
line(0, 0, 100, 0);
}
}3d pushMatrix(); / popMatrix();
pushMatrix(); und popMatrix(); ermöglichen es, Objekte unabhängig voneinander verschiedenen Koordinatensystemen zuzuweisen und sie unabhängig voneinander zu rotieren. Im Code kann das von Vorteil sein, sobald man mehrere Objekte an verschiedenen Stellen mit verschiedener Rotation zeichnen möchte. Alles was innerhalb der beiden Befehle steht, passiert in einer eigenen, seperaten Matrix. Dabei können mehrere Matrizen in einem Sketch generiert werden.