Versions Compared

Version Old Version 3 New Version 4
Changes made by

Moritz Kemper (Unlicensed)

Moritz Kemper (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

P01_1_BouncingBall_ohne_Vektoren

Code Block
languagejava
titleBeispiel P01_1_BouncingBall_ohne_Vektoren
collapsetrue
//Spatial Interaction
//ZHdK, Interaction Design
//iad.zhdk.ch
//Beispiel 01: Bouncing Ball ohne Vektoren

float x = 100;
float y = 100;
float xspeed = 2;
float yspeed = 2;
float size = 50;

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

void draw() 
{
  background(255);

  //1.Speed und Position addieren = neue Position
  x = x + xspeed;
  y = y + yspeed;

  //2.Kanten erkennen
  if ((x > width-size/2) || (x < 0+size/2)) 
  {
    xspeed = xspeed * -1; //Umkehren
  }
  if ((y > height-size/2) || (y < 0+size/2)) 
  {
    yspeed = yspeed * -1; //Umkehren
  }

  //3.Ball darstellen
  stroke(0);
  strokeWeight(2);
  fill(127);
  ellipse(x, y, size, size);
}

 

Um den Einstieg in Processing zu schaffen schauen wir uns zunächst ein einfaches kleines Beispiel an (P01_1_BouncingBall_ohne_Vektoren). In diesem Beispiel sehen wir die uns vertraute Umgebung, sowie die grundlegende Programmstruktur von Processing mit
void setup() //Wird einmal aufgerufen
und
void draw() //Wird permanent ausgeführt
Wenn wir das Beispiel laufen lassen, sehen wir einen Ball, welcher sich innerhalb der mit size(width,heigth) festgelegten Grenzen bewegt. In der draw()-Routine sind dafür drei wesentliche Schritte nötig:

...

Links:  x<0+size/2
Rechts: x>width-size/2
Oben:  y<0+size/2
Unten:  y>height-size/2

Processing01_1

3.Ball darstellen

Zuletzt legen wir fest, wie unser Ball dargestellt werden soll. Dazu geben wir ihm eine Farbe für die Umrandung stroke(0), legen fest, wie dick diese sein soll strokeWeight(2) und legen eine Füllfarbe fest fill(127). Danach zeichnen wir eine Ellipse an der Position, welche wir vorher berechnet haben ellipse(x,y,size,size).

 

Processing02_2

Merke!

- Position ist eine x und y Koordinate auf dem Screen
- Geschwindigkeit ist die Veränderung einer Position (Richtung und Betrag)

P01_1_BouncingBall_mit_Vektoren

Code Block
languagejava
titleP01_1_BouncingBall_mit_Vektoren
collapsetrue
//Spatial Interaction
//ZHdK, Interaction Design
//iad.zhdk.ch
//Beispiel 02: Bouncing Ball mit Vektoren

PVector location;
PVector velocity;

float size = 50;

void setup() 
{
  size(650, 200);
  smooth();
  //Variablen initialisieren
  location = new PVector(100,100);
  velocity = new PVector(2,2);
}

void draw() 
{
  background(255);

  //1.Speed und Position addieren = neue Position
  location.add(velocity);

  //2.Kanten erkennen
  if ((location.x > width-size/2) || (location.x < 0+size/2)) 
  {
    velocity.x = velocity.x * -1; //Umkehren
  }
  if ((location.y > height-size/2) || (location.y < 0+size/2)) 
  {
    velocity.y = velocity.y * -1; //Umkehren
  }

  //3.Ball darstellen
  stroke(0);
  strokeWeight(2);
  fill(127);
  ellipse(location.x, location.y, size, size);
}

 

Das obige Beispiel lässt sich mit Hilfe von Vektoren vereinfachen. Vektoren erlauben uns die Position und die Geschwindigkeit anders zu schreiben:
float x;
float y;
float xspeed;
float yspeed;
wird zu:
Pvector location;
PVector velocity;
Vektoren erlauben es uns also zwei Werte in einer Variablen zu speichern – bewegen wir uns im 3D Raum können auch drei Werte gespeichert werden. Vektoren sind also die Bezeichnung für eine Differenz zwischen sei Punkten in einem Raum.

...

- Schaut euch die Beispiele 3 bis 6 an und versteht das Vorgehen.

Code Block
languagejava
titleP01_3_Vektoren_Subtrahieren
collapsetrue
//Spatial Interaction
//ZHdK, Interaction Design
//iad.zhdk.ch
//Beispiel 03: Vektoren subtrahieren

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

void draw() 
{
  background(255);
  
  PVector mouse = new PVector(mouseX,mouseY);
  PVector center = new PVector(width/2,height/2);
  mouse.sub(center);
  
  translate(width/2,height/2);
  strokeWeight(2);
  stroke(0);
  line(0,0,mouse.x,mouse.y);
  
}
Code Block
languagejava
titleP01_4_Vektoren_Subtrahieren
collapsetrue
 //Spatial Interaction
//ZHdK, Interaction Design
//iad.zhdk.ch
//Beispiel 04: Vektoren multiplizieren

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

void draw() 
{
  background(255);
  
  PVector mouse = new PVector(mouseX,mouseY);
  PVector center = new PVector(width/2,height/2);
  mouse.sub(center);
  
  mouse.mult(0.5);  
  
  translate(width/2,height/2);
  strokeWeight(2);
  stroke(0);
  line(0,0,mouse.x,mouse.y);
}
Code Block
languagejava
titleP01_5_Vektoren_Subtrahieren
collapsetrue
 //Spatial Interaction
//ZHdK, Interaction Design
//iad.zhdk.ch
//Beispiel 05: Vektoren vermassen

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

void draw() 
{
  background(255);
  
  PVector mouse = new PVector(mouseX,mouseY);
  PVector center = new PVector(width/2,height/2);
  mouse.sub(center);

  float m = mouse.mag();
  fill(0);
  noStroke();
  rect(0,0,m,10);
  
  translate(width/2,height/2);
  stroke(0);
  strokeWeight(2);
  line(0,0,mouse.x,mouse.y);
}
Code Block
languagejava
titleP01_6_Vektoren_Subtrahieren
collapsetrue
 //Spatial Interaction
//ZHdK, Interaction Design
//iad.zhdk.ch
//Beispiel 06: Vektoren normalisieren

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

void draw() 
{
  background(255);
  
  PVector mouse = new PVector(mouseX,mouseY);
  PVector center = new PVector(width/2,height/2);
  mouse.sub(center);
  
  mouse.normalize();
  mouse.mult(150);

  translate(width/2,height/2);
  stroke(0);
  strokeWeight(2);
  line(0,0,mouse.x,mouse.y);
  
}

Weiteres:

- PVector – Referenz auf processing.org
- PVector – Tutorial mit Darstellungen
- Nature Of Code – Shiffman Seiten 47-83