Déplacement linéaire

var x = 0;
var vitesse = 1;
function setup() {
createCanvas(800, 300);
ellipseMode(CENTER);
}
function draw() {
background(0);
ellipse(x,150,100,100);
x += vitesse;
}

var x = 0;
var vitesse = 2;
var d = 100; //diamètre
function setup() {
createCanvas(800, 300);
ellipseMode(CENTER);
}
function draw() {
background(0);
x += vitesse;
    if(x > width+d){
        x = -d;
    }
ellipse(x,150,d,d);
}

Déplacement linaire avec rebondissement sur les murs

var d = 100;
var x = 100;
var vitesse = 2;
var direction = 1;
function setup() {
createCanvas(800, 300);
ellipseMode(CENTER);
}
function draw() {
background(0);
x += vitesse * direction;
ellipse(x, 100, d, d);
if ((x > width-d/2) || (x< d/2)) {
direction = -direction; // Changer de direction
}
}

Mouvements aléatoires

La fonction random(min, max); permet de rendre les données aléatoires. Les 2 valeurs fixent la valeur minimum et la valeur maximum. Il faut placer les variables comprenant des random(); dans draw(); ou une function.

function setup() {
createCanvas(800, 300);
}
function draw() {
background(204);
for (var x = 20; x < width; x += 20) {
var valeurA = random(-10, 10);
var valeurB = random(-10, 10);
line(x + valeurA, 20, x - valeurB, 280);
}
}

L’animation peut-être améliorée en modifiant les valeurs de l’aléatoire en fonction de la position en x de la souris.

function setup() {
createCanvas(800, 300);
}
function draw() {
background(204);
for (var x = 20; x < width; x += 20) {
var mx = mouseX/10;
var valeurA = random(-mx, mx);
var valeurB = random(-mx, mx);
line(x + valeurA, 20, x - valeurB, 280);
}
}

Déplacer des formes aléatoirement

var vitesse = 5;
var diametre = 100;
var x;
var y;
function setup() {
createCanvas(800, 300);
x = width/2;
y = height/2;
background(200);
}
function draw() {
x += random(-vitesse, vitesse);
y += random(-vitesse, vitesse);
ellipse(x, y, diametre, diametre);
}

Pour empêcher le cercle de sortir complètement de l’animation il faut utiliser la fonction constrain();

function draw() {
x += random(-vitesse, vitesse);
y += random(-vitesse, vitesse);
x = constrain(x, 0, width);
y = constrain(y, 0, height);
ellipse(x, y, diametre, diametre);
}

compteur / timer

Il est possible de déclencher une action à un moment précis. Dans le même exemple que le précédent on ajoute une variable qui permet de faire débuter l’animation au bout de 2000 millisecondes c’est à dire 2 secondes.

var vitesse = 5;
var diametre = 100;
var x;
var y;
var timer = 2000;
function setup() {
createCanvas(800, 300);
x = width/2;
y = height/2;
background(200);
}

function draw() {
    if (millis() > timer){
x += random(-vitesse, vitesse);
y += random(-vitesse, vitesse);
x = constrain(x, 0, width);
y = constrain(y, 0, height);
ellipse(x, y, diametre, diametre);
}
}