Willkommen auf unserem Seminar-Blog

Immer auf dem aktuellen Stand bleiben

Dieser Seminar-Blog befindet sich noch im Aufbau und wird in den kommenden Tagen entsprechend verfeinert.

Member Login

Lost your password?

Registration is closed

Sorry, you are not allowed to register by yourself on this site!

You must either be invited by one of our team member or request an invitation by email at viad.info {at} zhdk {dot} ch.

3 | Mi 23. Feb | OOP + Offscreen Buffer

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
}