• processing.org

1. Das Programm  (Processing-IDE)

2. Zeichenfläche

2.1 Größe des Sketchfensters

//Processing-Sketch: NAME_1a.pde

3. Visuelle Grundelemente

3.1 Punkt

3.2 Linie

3.3 Rechteck / Quadrat

//Processing-Sketch: NAME_1a.pde

3.4 Ellipse

3.5 Viereck

• quad(x1, y1, x2, y2, x3, y3, x4, y4) zeichnet ein Viereck in Zeichenfläche.
  
• Bestimmt durch 4 Punkte, jeweils eine x und y Koordinate, beschreiben die Lage der Fläche. quad()

  quad (12, 19, 31, 85, 67, 74, 80, 19);

4. Graustufen

//Processing-Sketch: NAME_1a.pde

• 1 Wert Grauton, deckend
• 2 Werte Grauton, mit Transparenzangabe
• 3 Werte RGB Farbtonangabe, deckend
• 4 Werte RGB Farbtonangabe, mit Transparenzangabe

5. Farben

5.1 Hintergrund einfärben

• background(r, g, b) löscht den Inhalt der Zeichenfläche durch homogenes Füllen mit einer Farbe.
  
• Diese wird durch die drei Kanäle r Rot, g Grün und b Blau bestimmt. background()

  background (231, 0, 89);

• input
• interaction
• mouse
• processing.org

1. Vorbereitung:

Fortlaufende Programme

• setup() wird direkt nach dem Programmstart einmalig ausgeführt.
• draw() wird nach dem Ablauf von setup() ins Leben gerufen und läuft in einer Schleife bis das Fenster geschlossen wird.

z.B.: Dauernd laufende Programmschleife

//Processing-Sketch: NAME_1a.pde

z.B.: Initialisierung & Fortlaufende

//Processing-Sketch: NAME_1a.pde

• frameRate beinhaltet die aktuell angestrebte Anzahl von Einzelbildern (frames) der Processing Sketches.
• frameRate() erlaubt das Steuern der Bildfrequnz (wie oft der draw() Block pro Sekunde abgearbeitet wird) durch Angabe einer Ganzzahl.
  
• Für Processing stellt es jedoch nur einen Richtwert dar - größere Abweichungen sind möglich.

z.B.: Bildfrequenz 0,5Hz

// Processing-Sketch: Bildfrequenz_1a.pdevoid setup () {  frameRate (0.5);      // festlegung der Bildrate auf ein Bild pro 2 Sekunde}void draw () {  fill (255,0,0, 10); // Füll-Farbe rot, transparent 10  rect (15,15, 70,70);}

2. Mausinteraktion

2.1 Mausposition

z.B.: aktuelle Mausposition 1

//Processing-Sketch: aktuelle Mausposition 1_1a.pdevoid setup() {  size(400, 400);    // Breite Höhe  background (200);  // hell-grau  rect(120, 70, 150, 80);}void draw () {  ellipse (mouseX, mouseY, 20, 20);  //print("mouseX = " + mouseX);  //println("   mouseY = " + mouseX);  //delay(75);      // Wartezeit}

z.B.: aktuelle Mausposition 2

//Processing-Sketch: aktuelle Mausposition 2_1a.pdevoid setup() {  size(400, 400);    // Breite Höhe}void draw () {  background (255);  // weiß  ellipse (mouseX, mouseY, 20, 20);  print("mouseX = " + mouseX);  println("   mouseY = " + mouseX);  //delay(75);      // Wartezeit}

Durch das Aufrufen des background() Befehls wird vor jedem Zeichnen eines Kreises die vorherige Arbeitsfläche vollflächig weiß gelöscht. 
Es scheint als würde sich ein und der selbe Kreis nach der Position der Mauszeigers bewegen.

Bsp.: aktuelle und vorherige Mausposition

//Processing-Sketch: Strich von der vorherige zur aktuellen Mausposition_1a.pdevoid setup() {  size(400, 400);    // Breite Höhe  frameRate (5);}void draw () {  background (255);  // weiß  line (pmouseX, pmouseY, mouseX, mouseY);}

Bei schneller Bewegung der Maus wird eine schwarze Linie sichtbar. 
Diese wird zwischen der vorherigen und der aktuellen Mausposition gezeichnet 
und stellt die während eines Zeichenvorgangs zurückgelegte Distanz dar. 
Das "p" in pmouseX und pmouseY steht dabei für den englischen Begriff previous (dt.: früher, vorig).

2.2 Maustasten

• if (Bedingung ) also "falls" eine von uns genannte Bedingung "wahr" ist(true), wird der darauf folgende Abschnitt in geschweiften Klammern ausgeführt ( {…} )

• mousePressed ist die Maustaste gedrückt, oder nicht.

z.B.: Drücken der Maustaste 1

// Processing-Sketch: Drücken der Maustaste 1_1a.pde// beim zeichnen kommt nun nichts weiter hinzu als die Abfrage,// ob die Maus gedrückt ist mit Hilfe der "if" Abfrage (Statement)void setup() {  size(300, 300);      // Breite Höhe}void draw() {  background (200);    // lösche den Hintergrund und fülle ihn mit hell-grau  if (mousePressed) {  // wenn die Maus gedrückt ist    ellipse (mouseX, mouseY, 40, 40);  // zeichne eine Ellipse an der Mausposition  }  rect (90, 90, 20, 20);   // Rechteck (unabhängig vom Mauszustand)}

Bei einer if-Abfrage wird immer zwischen Ja und Nein entschieden. 
Im oberen Beispiel haben wir den Status der Maustaste als Bedingung festgelegt - 
und zeichnen bei "Wahrheit" einen Kreis. 
Als Gegenstück zum Ja-Abschnitt können wir einen Bereich definieren der nur ausgeführt wird wenn die Maustaste nicht gedrückt wird. 

• else leitet einen Programmblock ein der bei Nichtzutreffen der if-Bedingung abgearbeitet wird.
  
• Dieser Block wird ebenfalls von zwei geschweiften Klammern umfasst ( {...} ).

Bsp.: Drücken der Maustaste II

// Processing-Sketch: Drücken der Maustaste 2_1a.pde// beim zeichnen kommt nun nichts weiter hinzu als die Abfrage,// ob die Maus gedrückt ist mit Hilfe der "if" Abfrage (Statement)void setup() {  size(300, 300);      // Breite Höhe}void draw() {  background (200);    // lösche den Hintergrund und fülle ihn mit hell-grau  if (mousePressed) {  // wenn die Maus gedrückt ist    ellipse (mouseX, mouseY, 40, 40);  // zeichne eine Ellipse an der Mausposition}  else {    // zeichne ein Rechteck an der Mausposition    // wenn die Maustaste nicht gedrückt ist    rectMode (CENTER);    rect (mouseX, mouseY, 25, 25);   // Rechteck (unabhängig vom Mauszustand) }}

3. Anwendungsbeispiele:

Mausinteraktion Kreis

• data
• data types
• processing.org
• variables

1. Datentypen

• boolean speicher nur »Ja« oder »Nein« (true oder false, z.B. ist die Maustaste gedrückt, oder nicht?) boolean
• int für ganzzahlige Werte (integer) 0, 1, 2, -3, ... bis zu zwei Billionen int
• float für Gleitkommazahlen (floating point number). Die Notation wird wie im Englischen durch einen Punkt durchgeführt (falsch: 1,42 richtig: 1.42) float
• String Zeichenkette die in doppelten Anführungszeichen anzugeben ist, z.B. "Creative Coding" String

boolean jaNein;int ganzzahl;float gleitzahl;String textabschnitt;

boolean jaNein = true; // boolean Variable mit dem Wert 'ja' ('wahr')int ganzzahl = 40; // ganzzahlige Variable mit dem Wert 40float gleitzahl = 36.9; // Variable mit dem gleitkomma Inhalt 36.9String textabschnitt = "Creative Coding"; // Variable die den Text "Creative Coding" beinhaltet

• print() gibt einen Inhalt bzw. Wert einer Variable in der Konsole aus. print()
• println() gleiche Funktion wie print(), jedoch wird bei jedem Aufruf eine neue Zeile zur Ausgabe genutzt. println()

// erstellt eine ganzzahlige Variable names "zahl" und gib ihr den Wert 39int zahl = 39;println (zahl); // Ausgabe in der Konsolezahl = zahl + 1; // erhöhe den Wert von "zahl" um einsprintln (zahl); // Ausgabe im Nachrichtenfensterzahl = zahl + 1; // erhöhe den Wert von "zahl" um einsprintln (zahl); // Ausgabe im Nachrichtenfenster

//Processing-Sketch: NAME_1a.pde

void draw() {  background (255, 255, 255);  // lösche die Zeichenfläche und fülle sie mit weiss  int grenze = 50;             // erstelle eine Variable mit dem Namen "grenze" und gib ihr den ganzzahligen Wert 50    if (mouseX < grenze) {     // wenn die Mausposition auf der x-Achse kleiner ist als unsere definierte Grenze...    ellipse (mouseX, mouseY, 10, 10); // zeichne eine kleine Kreis an der Mausposition  } 
    else {    ellipse (mouseX, mouseY, 50, 50); // zeichne eine große Kreis an der Mausposition  }  rect (80, 80, 10, 10);              // dieser Teil wird immer ausgeführt unabhängig vom der Mausposition}

2. Operatoren

2.1 Rechenoperationen

• + addiert zwei numerische Werte oder fügt zwei Zeichenketten (String) zusammen.
• - subtrahiert zwei numerische Werte oder negiert einen Wert.
• * multipliziert zwei numerische Werte.
• / dividiert zwei numerische Werte.
• ++ erhöht den Wert einer Variable um 1.
• -- verringert den Wert einer Variable um 1.

float a = 4.2;float b = 1.3;println (a + b); // Ausgabe im Nachrichtenfenster 5.5println (b - a); // Ausgabe im Nachrichtenfenster -2.8999999println ("Creative " + "Coding " + 1);  // Ausgabe: "Creative Coding 1"

int c = 5 ;int d=2;println (c * d); // Ausgabe: 10println (c/d);   // Ausgabe: 2

float e=5;float f = 2;println (e / f); // Ausgabe: 2.5

int zahl_1 = 94;println (zahl_1) ; // Ausgabe: 94zahl_1 ++;         // erhöht den Wert um 1println (zahl_1);  // Ausgabe: 95

2.1.5  Verringern

int zahl_2 = 94;println (zahl_2);  // Ausgabe: 94zahl_2 --;         // verringert den Wert um 1println (zahl_2) ; // Ausgabe: 93

2.2 Vergleichsoperationen

• == gleich
• != ungleich
• > größer als
• >= größer gleich als
• < kleiner als
• <= kleiner gleich als

String fruchtSorte = "apfel";String fruchtFarbe = "gruen";if (fruchtSorte == "apfel") {  if (fruchtFarbe == "gruen") {    println ("greif zu!");       // Ausgabe im Nachrichtenfenster "greif zu!"  }}

• alogrithms
• control structures
• flow
• loop
• processing.org
• statements

1. Schleifen

//Processing-Sketch: NAME_1a.pde

void setup () {  size(256, 101);  background (255, 255, 0);}void draw () {  line (0, 0, 200, 0);   line (0, 20, 200, 20);  line (0, 40, 200, 40);  line (0, 60, 200, 60);  line (0, 80, 200, 80);  line (0, 100, 200, 100);}

1.1 while-Schleife

//Processing-Sketch: NAME_1a.pde

void setup () {  size(256, 101);  background (255, 255, 0);}void draw () {  background (255, 255, 0);  float y=0;  while (y <= 100) {    line (0, y, 220, y);    y = y + 20;  }}

//Processing-Sketch: NAME_1a.pde

void setup () {  size(200, 101);  background (255, 255, 0);}void draw () {  background (255, 255, 0);  float y=0;  while (y <= 100) {    line (0, y, 150, y);    y = y + 2;  }}

1.2 for-Schleife

• Initialisierung beschreibt die Festlegung der Zählvariable zur Steuerung der Zählschleife. Als Variable hat sich die Verwendung von einer Ganzzahl mit dem einfachen Namen i, für Iterator, durchgesetzt.
• Test, Bedingung beinhaltet eine logische Abfrage die vor jedem Beginn eines Schleifendurchlaufs getestet wird. Bei Nichtzutreffen wird das Programm unterhalb des for-Blocks abgearbeitet.
• Aktualisierung der Zählvariable nach Ablauf eines Schleifendurchgangs.

//Processing-Sketch: NAME_1a.pde

void setup () {  size(200, 101);  background (255, 255, 180); // Hintergrund hell-gelb}void draw () {    for (int i=0; i < 5; i = i + 1) {    line (0, i * 20, 180, i * 20);  }}

//Processing-Sketch: NAME_1a.pde

void setup () {  size(255, 255);  background (255); // Hintergrund weiß}void draw () {  for (int i=0; i < mouseY; i++) {    stroke (i * 2, i, 0);     // weißt der Linienfarbe einen Farbwert mittels der Zählvariable "i" zu    line (0, i, width, i);    // zeichne eine horizontale Linie verwende den Wert der Zählvariable als y-Position  }}

//Processing-Sketch: NAME_1a.pde

void setup () {  size(260, 260);}void draw () {  background (200);   // fülle die gesamte Zeichenfläche mit hell-grau  smooth ();          // aktiviere Kantenglättung  noStroke ();        // deaktiviere outlines                      // führe die Schleife aus bis die Zählvariable "diameter" einen Wert erreicht der kleiner als 0 ist.                       // Verringere dabei ihren Wert nach jedem Durchgang um 12.  for (int diameter=255; diameter > 0; diameter = diameter - 12) {                      // setze die Füllfarbe neu    fill (diameter);    ellipse (width / 2, height / 2, diameter, diameter);   // zeichne den Kreis mit variablem Durchmesser  }}

//Processing-Sketch: NAME_1a.pde

void setup () {  size(200, 200);}void draw () {  background (255);   // fülle die gesamte Zeichenfläche mit weiß  noStroke ();    // deaktiviere Umrandungen   float x;  // erstelle  Variable zur späteren Ablage der X-Position  float y;  // erstelle  Variablen zur späteren Ablage der Y-Position    for (int i=0; i < 10; i = i + 1) {    // Schleife für die Matrix-Zeilen    for (int j=0; j < 10; j = j + 1) {    // Schleife für die Matrix-Spalten      // DIESER TEIL WIRD FÜR JEDEN KREIS AUSGEFÜHRT!      x = i * 20;        // Berechnung der X-Position      y = j * 20;        // Berechnung der Y-Position      fill (i * 25, 0, j * 25);  // bestimme die Füllfarbe und zeichne anschließend den Kreis      ellipse (x, y, 25, 25);    // Kreis    }  }}

• events
• input
• processing.org
• randomness

1. random

• random(a) erzeugt eine Zufallszahl zwischen 0 und a, wobei a eine rationale oder gebrochen rationale Zahl sein kann.
  
• Bei dieser Parameteranzahl legen wir demnach nur die Obergrenze des möglichen Wertebereiches fest.
  
• Die Untergrenze ist durch Processing auf 0 gesetzt.

println (random (1)); // z.B. 0.8751683

• random(a, b) erzeugt eine Zufallszahl zwischen a und b, wobei a und b rationale oder gebrochenrationale Zahlen seien können.
  
• Beide, Unter- und Obergrenze, werden von uns festgelegt.

println (random (1, 10); // z.B.: 3.9300842

//Processing-Sketch: NAME_1a.pde

void setup () {  size(200, 200);}void draw () {  ellipse (100, 100, random (200), random (200));}

//Processing-Sketch: NAME_1a.pde

void setup () {  size(256, 256);}void draw () {  // erstelle eine Variable "durchmesser" und lege in ihr einen zufälligen Wert zwischen 0 und 200 ab  float durchmesser = random (200);  // zeichne einen Kreis in die Mitte der Zeichenfläche und verwende für Breite und Höhe den Wert der Variable "durchmesser"  ellipse (width/2, height/2, durchmesser, durchmesser/2);  ellipse (width/2, height/2, durchmesser/2, durchmesser);}

//Processing-Sketch: Smarties_1a.pdevoid setup () {  size(300, 250);  // Grafik-Fenstergröße  smooth();        // aktiviert Kantenglättung  frameRate (2);   // begrenzung der Einzelbilder pro Sekunde auf 2 (besser für die Augen)}void draw () {  background (235); // Hintergrund hell-grau  float anzahl = random (40);    // bestimmung der Kreisanzahl für dieses Einzelbild (Maxima ist 40)  for (int i=0; i < anzahl; i = i + 1) {    // für jeden Kreis werden position und Farbe neu bestimmt    float posX=random (width);     // random Position auf der x-Achse    float posY = random(height);      // random Position auf der y-Achse    fill (random (255), random(255), random (255));      // random Werte für alle drei Farbkanäle RGB        ellipse (posX, posY, 35, 30); // zeichnen der Ellipse an den vorher ermittelten Koordinaten  }}

2. noise

• noise(x) Zufallszahl in eindimensionaler Abfolge.
• noise(x, y) Zufallszahl in zweidimensionaler Abfolge, z.B. für eine 2d Textur.
• noise(x, y, z) Zufallszahl in dreidimensionaler Abfolge, z.B. für eine räumlichen Wolke.
• noiseDetail(octaves) definiert die Anzahl an Wellen die addiert das Rauschen ergeben. Je größer die Anzahl - umso feiner die Varianz.
  
• Processing arbeitet standardmäßig mit vier Oktaven.