Page Comparison

...

P01_1_BouncingBall_ohne_Vektoren

//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:

...

P01_1_BouncingBall_mit_Vektoren

...

...

P01_1_BouncingBall_mit_

...

Vektoren

...

 

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.

...

language	java
title	P01_3_Vektoren_Subtrahieren
collapse	true

...

.

...

Code Block
language java title P01_4_Vektoren_Subtrahieren collapse true
//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
language java title P01_5_Vektoren_Subtrahieren collapse true
//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); }

...

language	java
title	P01_6_Vektoren_Subtrahieren
collapse	true

...

Weiteres:

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