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