Processing Introduction

Wo finden sich Antworten?

- Shiffman, Learning Processing - Getting Started - Beschreibung der Programmierumgebung - Basic Tutorials nach Themen geordnet - Dokumentation online - Find in Reference Funktion (Apfel + Shift + F  oder Kontextmenü) - Libraries für später - Processing Forum mit einer hilfreichen Suchfunktion (Deine Fragestellung hatte sehr wahrscheinlich schon jemand vor dir.)

Zeichnen

1 Eine Auswahl Grundlegender Zeichnungsbefehle

size(400,400);    // def. fenstergroesse
background(255);  // def. hintergrundfarbe
smooth();         // aktiviere antialiasing
stroke(0,0,0);    // def. zeichenfarbe
fill(200,0,0);    // def. fuellfarbe

line(0,0,width,height);  // linie von p1 nach p2,
                         // width = fenster breite
                         // height =  fenster hoehe
ellipse(200,200,110,180);  // zeichne eine ellipse mit zentrum im punkt(100,100)
                           // radiusX = 50, radiusY = 80

2 Komplexe Formen

Darstellung komplexer Formen mit dem Befehl beginShape() und endShape()

size(400,400);      // def. fenstergroesse
background(255);    // def. hintergrundfarbe

smooth();           // aktiviere antialiasing
stroke(0,0,0);      // def. zeichenfarbe
strokeWeight(8);    // linienbreite
strokeJoin(MITER);  // default - darstellung der ecken
//strokeJoin(BEVEL);
//strokeJoin(ROUND);
noFill();

beginShape();           // beginn der form
  vertex(10,10);           // koordinaten
  vertex(200,40);
  vertex(300,300);
  vertex(50,50);
endShape();           // ende der form

3 Transparenz

Formen können auch Transparent sein, hierfür nutzt man den Alpha-Kannal. Die Farbe wird einfach um einen 4.Parameter erweitert(RGBA). Je kleiner der Alpha-Wert, desto transparenter wird die Form dargestellt.

size(400,400);        // def. fenstergroesse
background(255);      // def. hintergrundfarbe

smooth();             // aktiviere antialiasing
strokeWeight(15);     // linienbreite
strokeJoin(ROUND);
noFill();

stroke(200,0,0,200);      // zeichenfarbe R,G,B,Alpha
ellipse(100,100,150,100); // koordinaten ellipse

stroke(0,0,0,100);        // zeichenfarbe R,G,B,Alpha
beginShape();
  vertex(10,310);
  vertex(200,40);
  vertex(300,300);
endShape();

4 Variablen

→ Shiffman S.45 - 58 - Variables - Integer & Float - Boolean - Globale & Lokale Variablen Ein ähnliches Beispiel wie oben, jedoch werden Variablen verwendet.

int radiusX = 200;  // definition der variablen radiusX
int radiusY = 100;  // definition der variablen radiusY

size(400,400);
background(255);

smooth();
strokeWeight(15);
strokeJoin(ROUND);
noFill();

stroke(200,0,0,100);      // zeichenfarbe
ellipse(100,100,radiusX,radiusY);   // verwendung der variablen

Grundstruktur

→ Shiffman S.31 - 37

Funktionen:

- setup() and draw() - frameRate() - loop() - noloop() - redraw()

Eigene Funktionen

→ Siehe Shiffman S.101 - 120 Definition einer eigenen Funktion - function() Eine Funktion ist wie folgt definiert:

[Rückgabe Type] Funktionsname([Parameter])
{
[Funktions Inhalt]
}

Beispiel einer Funktion mit Rückgabe Typ Void (nicht definiert)

void setup()
{
  size(400, 400);
  background(50);
  noStroke();
  smooth();
  noLoop();
}

void draw()
{
  drawSquare(50, 50, 50);
  drawSquare(80, 80, 80);
  drawSquare(120, 120, 120);
}

void drawSquare(int xloc, int yloc, int size)
{
  fill(random(256));
  rect(xloc, yloc, size, size);
}

Beispiel einer Funktion mit dem Rückgabe Typ Integer

void setup()
{
  size(400, 400);
  background(50);
  noStroke();
  smooth();
  noLoop();
}

void draw()
{
  // calculate the position - getting an int back
  int x2 = position(50);
  int y2 = position(50);
  fill(random(256));     // set the fill color
  ellipse(y1,y2,20,20);  // draw an ellipse
}

// the function to calculate a random position
// returning an int
int position(int seed){
  int result = int(seed /2) + int (random(width - seed));
  println(result);
  return result;
}

// redraw on mouseclick
void mousePressed() {
  redraw();
}

Bedingungen

→ Shiffman S.59 - 80 - Conditionals 1 - Conditionasl 2 - Logic Operators In der Programmierung gibt es Befehle mit denen man Bedingungen abbilden kann. Durch solche Bedingungen kann man Programmteile ausführen oder nicht. Hierfür nutzt man den Befehl ‘if’, z.B.:

if (x == 10)  // Bedingung
{  // falls x = 10 ist, wird dieser Block wird ausgefuehrt
}
else
{  // sonst wird der zweite Block ausgefuehrt
}

Die Bedingung ist ein Boolescher Ausdruck, hierfür gibt es folgende Operatoren: - gleich                   == - ungleich              != - grösser  als          > - kleiner   als          < - grösser gleich    >= - kleiner gleich     <= - logisch Und        && - logisch Oder       ||

Schleifen

→ Shiffman S.81 - 98 - Iterations for + while

Interaktion

→ Shiffman S.35 - 41 - Maus Funktionen - Maus Signale - Debug mit println

Aufgaben

1. Zeichne einen Punkt.
2. Zeichne eine Linie, bestehend aus Einzelpunkten, mit einer for Schlaufe.
3. Zeichne mehrere Linien mit unterschiedlichen Farben.
4. Zeichne einen Kreis, welcher bei gedrückter Maustaste dem Cursor folgt.
5. Programmier ein Rechteck, welches wie bei einem Button, bei gedrückter Maustaste die Farbe ändert.
6. Programmier eine “Farb – Uhr” welche an Stelle von Zahlen Farbflächen darstellt.
7. Lass ein Quadrat mittels vier Keyboard Tasten auf, ab, links und nach rechts bewegen.