Startseite Skripte für das Wintersemester 2018/19 Interaction Design P5, Teil 2 kontinuierliche Animationen


kontinuierliche Animationen

Während das Programm läuft, wird die X-Koordinate laufend um 6px erhöht – das erzeugt die Animation

Klickt doch auf den Sketch – damit fängt die Animation wieder von vorne an (siehe mousePressed())!

P5

var x = 0; // X-Wert des Punktes
var d = 80; // Durchmesser des Punktes

function setup() {
  createCanvas(960, 200);
  background(255);
  noStroke();
  frameRate(30); // 30 Bilder pro Sekunde
}

// dies läuft immer wieder ab
// abhängig von der "frameRate) dauert dies unterschiedlich lang
function draw(){
  background(255);
  fill(255,0,0);

  ellipse(x, height/2, d, d);

  // hiermit bewegt sich der waagrecht
  // umso größer die Zahl ist, desto schneller (und ruckliger)
  // bewegt sich der Kreis!
  x = x + 6;
}

// Damit fängt die Animation wieder von vorne an
function mousePressed(){
  background(255);
  x = 0;
}