Interaction Design WikiCreative Coding

Events und Functions (de)

In den vorangegangenen Beispielen haben wir Programme ohne Funktionen geschrieben. Diese Programme waren nicht interaktiv und beinhalten auch keine Animationen. Wie kann man also ein Programm so erweitern, dass zum Beispiel die Tastatur ausgelesen wird ? Die Antwort drauf sind sogenannte Programm-Events, also Ereignisse welche vom Programm erfasst und weitergeleitet werden. Hier eine kurze Liste von solchen Ereignissen:

Diese Ereignisse können abgefangen werden. Hierfür müssen wir nur Funktionen(mit von Processing definierten Namen) schreiben, die bei den jeweiligen Ereignissen automatisch aufgerufen werden.

Nehmen wir Beispiel 1 und erweitern dies mit den Ereignissen:

int length1 = 0;
int length2 = 0;

void setup() {
  size(300, 300); // define window size
  background(0); // define background colour
  stroke(255, 255, 255); // define line colour
}
void draw() {
  background(0);
  length1 = mouseX;
  length2 = mouseY;
  line(100, 10, 100, length1); // draw a line
  line(150, 10, 150, length2);
  line(200, 10, 200, 250);

  fill(0, 0, 0); // fill colour
  strokeWeight(5); // line thickness
  ellipse(100, length1, 50, 50); // draw an ellipse
  ellipse(150, length2, 50, 50); // draw an ellipse
  noFill(); // turn off fill
  ellipse(200, 250, 50, 50); // draw an ellipse
}


In diesem Programm nutzen wir zwei Funktionen:

Diese Funktionen haben keine Parameter und auch keinen Rückgabewert, daher steht an der Stelle des Rückgabe Typs einfach nur ‘void‘. Die Funktionsnamen sind Namen die Processing kennt, daher ruft Processing diese Funktionen auf,  sobald das entsprechende Ereignis eintrifft.

Weitere Funktiosnbeispiel

Diese Beispiel zeigt wie man Funktionen mit Rückgabewerte schreibt.

void setup()
{
  println(addition(1,2));
  println(addition(2,10));
}
 
int addition(int parameter1, int parameter2)
{
  return parameter1 + parameter2;
}


Dies Beispiel zeigt wie man Funktionen nutzen kann um den Code leserlicher und einfacher Gestalten kann(Stichwort Modularisierung).

void setup()
{
  size(300,300);
  smooth();
  stroke(255,255,255);
  noFill();
}
 
void draw()
{
  background(0);
 
  bommel(100,10,140,50);
  bommel(150,10,190,50);
  bommel(200,10,240,50);
}
 
void bommel(int x,int y,int length,int size)
{
  strokeWeight(1);
  line(x,y,x,y+length);
  strokeWeight(5);
  ellipse(x,y+length,size,size);
}


Und hier unser erstes interaktive Programm:

void setup()
{
  size(300,300);
  background(0);
}
 
void draw()
{}
 
void mousePressed()
{
  println("x:" + mouseX + ", y:" + mouseY);
}


Aufgabe

Erstelle ein Programm in welchem ein Kreis dem Mauszeiger folgt