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