Form & Code: Grundlagen

Struktur II

Verhalten/Animation, Hintergrund, Variablen bei Animation, Bewegung, Interaktion: Mausposition, Mausklick, Gedächtnis, Eigene Methoden

Verhalten/Animation: Setup und Draw

Damit die generative Grafik zeitbasiert wird (Animation), wird alles was passiert in zwei "Funktionen"/"Methoden" zusammengefasst: setup und draw.

Im setup werden einmalige Einstellungen vorgenommen.

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
}

Im draw-Loop wird gezeichnet (oder alles andere gemacht, was sich wiederholt).

void draw() {
  strokeWeight(1);
  stroke(0,128);
  line(width/2, height/2, random(0,width), random(0,height));
}

↑

Hintergrund bei Animation

Jeder Frame wird über alle anderen gezeichnet.

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
}

void draw() {
  noStroke();
  fill(random(255),random(255),random(255));
  float groesse = random(50);
  ellipseMode(CENTER);
  ellipse(random(0,width), random(0, height), groesse, groesse);
}

Ansonsten: den background() in jedem Frame neu zeichnen, um die Leinwand zu löschen.

void setup() {
  size(400,300);
  frameRate(25);
}

void draw() {
  background(255);
  noStroke();
  fill(random(255),random(255),random(255));
  float groesse = random(50);
  ellipseMode(CENTER);
  ellipse(random(0,width), random(0, height), groesse, groesse);
}

↑

Variablen bei Animation

Variablen, die immer wieder gebraucht werden, werden außerhalb von setup und draw deklariert und können dann in beiden benutzt werden. Sie behalten ihren Wert, wenn man sie nicht ändert.

float zentrumX;
float zentrumY;

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
  
  zentrumX = 120;
  zentrumY = 90;
}

void draw() {
  strokeWeight(1);
  stroke(0,128);
  line(zentrumX, zentrumY, random(0,width), random(0,height));
}

Variablen, die in jedem Frame neu sein sollen, werden innerhalb von draw deklariert und sind dann nur beim Zeichnen vorhanden.

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
}

void draw() {
  noStroke();
  fill(0,128);
  float groesse = random(50);
  ellipseMode(CENTER);
  ellipse(random(0,width), random(0,height), groesse, groesse);
}

↑

Animation: Bewegung

Bewegung entsteht, wenn sich eine Position von Frame zu Frame verschiebt.

Dazu eine Position...

float px;
float py;

...einen Anfang...

void setup() {
  size(400,300);
  px = width/2;
  py = width/2;
}

..., sowie Zeichnen und Veränderung der Position.

void draw() {
  background(255);
  strokeWeight(12);
  point(px,py);
  px = px + random(-1,1);
  py = py + random(-1,1);
}

Wieder mit dem Beispiel von oben... (wanderndes Zentrum)

float zentrumX;
float zentrumY;

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
  zentrumX = width/2;
  zentrumY = height/2;
}

void draw() {
  strokeWeight(1);
  stroke(0,128);
  line(zentrumX, zentrumY, random(0,width), random(0,height));
  zentrumX = zentrumX + random(-4,4);
  zentrumY = zentrumY + random(-4,4);
}

↑

Animation: Gedächtnis

Variablen von Frame zu Frame merken.

Wieder mit einer Position...

float px;
float py;

..., einem Anfang...

void setup() {
  size(400,300);
  px = width/2;
  py = width/2;
  background(255);
}

..., sowie zwei neuen Variablen, die am Schluss für den nächsten Frame gespeichert werden.

void draw() {
  float pxNeu = random(0,width);
  float pyNeu = random(0,height);
  stroke(0,128);
  line(px, py, pxNeu, pyNeu);
  px = pxNeu;
  py = pyNeu;
}

↑

Interaktion: Mausposition

Interaktion entsteht durch den Zugriff auf Nutzereingaben. Am einfachsten durch das Nutzen fertiger Variablen - z.B. mouseX und mouseY (zu Interaktion und Interfaces in Processing später mehr).

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
}

void draw() {
  stroke(0,128);
  strokeWeight(12);
  point(mouseX,mouseY);
}

Oder mit gelöschtem Bildschirm.

void setup() {
  size(400,300);
  frameRate(25);
}

void draw() {
  background(255);
  stroke(0);
  strokeWeight(12);
  point(mouseX,mouseY);
}

Mit dem Beispiel von oben...

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
}

void draw() {
  strokeWeight(1);
  stroke(0,128);
  line(mouseX, mouseY, random(0,width), random(0,height));
}

↑

Interaktion: Mausklick

Klicks einfach: mousePressed und if.

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
}

void draw() {
  strokeWeight(12);
  if (mousePressed) {
    point(mouseX,mouseY);
  }
}

Wieder mit dem Beispiel von oben... (Zentrum verschieben mit Mausklick)

float zentrumX;
float zentrumY;

void setup() {
  size(400,300);
  frameRate(25);
  background(255);
  zentrumX = width/2;
  zentrumY = height/2;
}

void draw() {
  strokeWeight(1);
  stroke(0,128);
  line(zentrumX, zentrumY, random(0,width), random(0,height));
  if (mousePressed) {
    zentrumX = mouseX;
    zentrumY = mouseY;
  }
}

↑

Eigene Methoden

Anweisungen können immer in Methoden (wie setup() und draw()) zusammengefasst werden.

void setup() {
  size(400,300);
  background(255);
}

void draw() {
}

void vieleKreise() {
  noStroke();
  fill(0,128);
  for (int i=0; i<10; i++) {
    ellipse(random(0,width), random(0,height), 10, 10);
  }
}

Eigene Methoden werden aber nicht von selbst ausgeführt, sondern müssen aufgerufen werden.

void setup() {
  size(400,300);
  background(255);
}

void draw() {
  if (mousePressed) {
    vieleKreise();
  }
}

void vieleKreise() {
  noStroke();
  fill(0,128);
  for (int i=0; i<10; i++) {
    ellipse(random(0,width), random(0,height), 10, 10);
  }
}

Methoden können Argumente (Eingaben) bekommen (z.B. hier: wo zeichnen?).

void setup() {
  size(400,300);
  background(255);
}

void draw() {
  if (mousePressed) {
    vieleKreise(mouseX, mouseY);
  }
}

void vieleKreise(float woX, float woY) {
  noStroke();
  fill(0,128);
  for (int i=0; i<10; i++) {
    ellipse(woX+random(-20,20), woY+random(-20,20), 10, 10);
  }
}

↑