Processing 02 (19.02.2013)

OOP + Klassen

→ Shiffman S. 121 - 137 ♦ Objects (gleich wie bei Shiffman) Bestimmt kennt Ihr Klassen schon. Dennoch ist es sicher gut, diese nochmals anzusehen. Ein Beispiel einer Kreisklasse. Aufgabe: Definiert eine eigene Klasse für ein grafisches Objekt, welches sich bewegen und die Farbe ändern kann.

Arrays

→ Shiffman S. 141 - 161 Aufgaben:

1. Verwende Arrays, analog zum Beispiel im Buch, für dein grafisches Objekt.
2. Generiere 10 random Koordinatenpaare, speichere diese in einen Array und verwende das Array um 5 Linien zu zeichnen.

Graphiken Exportieren

♦ save() Die auf dem 'Display Window' erstellte Graphik lässt sich mit dem Befehl save() exportieren Aufgabe: Erweitere Dein Programm, dass mit der Taste 's' das Displaywindow gespeichert wird.

Translate

Innerhalb der draw() Funktionlässt sich die 0,0 Koordinate mit  ♦ translate() (siehe auch ♦ translate) verschieben. Dadurch lassen sich Elemente einfach verschieben.

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

void draw(){
  background(100);
  noStroke();
  fill(255);

  // zeichne einen kreis an koordinate 0,0
  ellipse(0,0,30,30);

  fill(200);
  // verschiebe die 0,0 koordinate
  translate(100, 100);
  ellipse(0,0,30,30);

  fill(150);
  // verschiebe die 0,0 koordinate erneut
  translate(50, 50);
  ellipse(0,0,30,30);
  // beim nächsten aufruf von draw
  // gilt wieder der urspruengliche nullpunkt
}

Aufgaben:

1. Zeichne einen Smiley.
2. Zeichne den selben Smiley an unterschiedlichen Positionen mit Translate.

Matrix Push + Pop

Mit pushMatrix() wird die aktuelle Matritze auf den Matritzen Stapel (Engl. stack) gelegt. Was soviel bedeutet wie: Das aktuelle Koordinatensystem wird abgespeichert. Mit popMatrix() wird die zuletzt auf den Stapel gelegte Matritze zurückgeholt. Stell dir einen Siebdruckrahmen vor. Du legst ihn zur Seite, zeichnest etwas/ arrangierst die Schablone und holst anschliessend den Rahmen wieder zurück. Sinnvoller Weise muss dein Code gleich viele push wie pop Anweisungen haben. ♦ pushMatrix() ♦ popMatrix() Ein einfaches Beispiel

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

void draw(){
  background(255);

  fill(255);
  rectMode(CENTER);

  translate(200,200);

  // zeichne ein quadrat an koordinate 0,0
  rect(0,0,50,50);

  pushMatrix();
  rotate(radians(45));
  rect(0,0,50,50);
  popMatrix();

 }

Ein Beispiel mit Strichen

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

void draw(){
  background(255);
  stroke(0);

  // verschieb den nullpunkt in die mitte
  translate(width/2,height/2);

  for (float i=0; i<360; i+=10){     // alle 10 winkelgrad
    pushMatrix();                    // speicher die ausgangsmatritze
    rotate(radians(i));              // rotiere
    line(0,0,150,0);                 // zeichne eine linie
    popMatrix();                     // kehr zur ausgangsmatritze zurück
  }

}

Aufgabe: Erweitere das obige Beispiel so, dass an jedem Ende der gezeichneten Striche ein Stern gezeichnet wird.

Display Window und Offscreen Buffer

♦ createGraphics() ♦ PGraphics() ♦ beginDraw(), endDraw() Bis jetzt haben wir immer direkt in das Displaywindow gezeichnet. Es kann aber auch sinnvoll sein in einen Offscreen Buffer zu zeichnen und diesen anschliessend auf dem Display darzustellen.

// Deklaration PGraphics Objekt
PGraphics pg;

void setup() {
  size(400, 400);
  pg = createGraphics(100, 100, P2D);  // Initialisierung des pg Objekts
}

void draw() {
  stroke(0);
  line(0,0,width,height);              // eine schwarze linie direkt im display window

  pg.beginDraw();                      // Start Zeichnen im Offscreen Buffer pg
  pg.background(10, 100, 200);
  pg.smooth();
  pg.stroke(255);
  pg.line(50, 50, mouseX, mouseY);
  pg.endDraw();                        // Ende Zeichnen im Offscreen Buffer

  image(pg, 10, 10);                   // kopiert den Offscreen Buffer ins Display Window
  image(pg, 120, 120);                 // kopiert den selben Inhalt noch einmal

  strokeWeight(10);
  stroke(255,0,0);
  line(0,height,width,0);              // eine rote linie im display window
}