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.

Punkt_Gerade_Rechteck_Kreis

2   Variablen und Interaktion

Bilder/Text darstellen, Interaktion über die Maus/ Tastatur, Werte-Mapping

map_groesse_rotate_
bild_mitte
text
grashalm_map

3   Bedingungen/Schleifen

if-Abfrage

bildZeigen_klick

parametrische Buttons; im runden Button ist ein rollover eingebaut

rectButton
roundButton_rollOver

4   for-Schleife, rotate, pushMatrix/popMatrix

for-Schleife

for_schleife
for_schleife1

pushMatrix(); / popMatrix();

pushMatrix1
for_schleife_matrix
for_schleife_Matrix1

5 Geschwindigkeit, Bewegung, …

blume
chinese_dragon