Startseite Skripte für das Wintersemester 2018/19 Interaction Design P5, Teil 2 Kleiner, aber wichtiger Unterschied


Kleiner, aber wichtiger Unterschied

schaut genau, wo Ihr die background-Angabe hinschreibt!

Der Code ist bis auf die Positionierung der Anweisung background() identisch mit dem vorherigen Sketch!

P5

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

function setup() {
  createCanvas(960, 200);
  // Hintergrund wird *NUR* beim Starten des Sketches gezeichnet
  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(){

  // hier fehlt die Angabe zum Background!

  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;
}