Documentation

Animation

Le temps est un paramètre.

draw est déjà une boucle

let x = 0;

function draw() {
  background(240);
  circle(x, height / 2, 50);
  x = x + 2;  // 2 pixels de plus à chaque frame
}

x doit être déclaré en dehors de draw(), sinon il repart de 0 à chaque frame. Voir scope.

Contrôler la boucle

noLoop()arrête l'exécution de draw()

loop()la relance

redraw()exécute draw() une seule fois

frameRate(n)limite la cadence

frameRate()sans argument renvoie la cadence réelle

frameCount et millis

frameCount compte les images écoulées depuis le démarrage.

let size = frameCount * 0.5;   // 0.5 permet de gérer la vitesse
circle(width / 2, height / 2, size);

frameCount ou millis ?

frameCountnombre d'images

millis()millisecondes écoulées

deltaTimemillisecondes écoulées depuis la frame précédente

let t = millis() * 0.1;
circle(t, height/2, 100);

Si le sketch ralentit, une animation basée sur frameCount ralentit aussi. Une animation basée sur millis() garde sa vitesse réelle, quitte à sauter des positions.

sin et cos ; l'oscillation

sin() ou cos() oscille entre -1 et 1.

let amplitude = 200;    // amplitude
let speed = 0.05;     // fréquence
let phase = 0;        // pahse

let x = width / 2 + sin(frameCount * speed + phase) * amplitude;
circle(x, height / 2, 60);

Ramener dans une plage utile

sin() (ou cos()) donne -1 à 1, ce qui est rarement directement exploitable. map() est utile dans ce cas.

let s = map(sin(frameCount * 0.05), -1, 1, 20, 120);   // size entre 20 et 120
circle(width / 2, height / 2, s);

Mouvement circulaire

cos() est le même mouvement décalé d'un quart de cycle. Ensemble, ils décrivent un cercle.

let angle = frameCount * 0.02;
let x = width / 2 + cos(angle) * 200;
let y = height / 2 + sin(angle) * 200;
circle(x, height/2, 40);
circle(width/2, y, 40);
circle(x, y, 40);

Décaler chaque élément

Combiné à une boucle, un décalage de phase par élément produit une onde.

for (let i = 0; i < 30; i++) {
  let x = i * (width / 30);
  let y = height / 2 + sin(frameCount * 0.05 + i * 0.3) * 100;
  //                                          └───┬───┘
  //                                    décalage croissant = onde
  circle(x, y, 20);
}

Essayez de jouer avec le coefficient 0.3 pour transformer l'onde.

Traces et rémanence

function setup() {
  createCanvas(600, 600);
  background(20);
}

function draw() {
  background(20, 20);          // alpha faible = effacement partiel
  let x = width / 2 + cos(frameCount * 0.03) * 200;
  let y = height / 2 + sin(frameCount * 0.05) * 200;
  fill(255);
  circle(x, y, 20);
}

Pièges fréquents

→

Ça va beaucoup trop vite

Le coefficient su frameCount est trop grand. Testez en le divisant par 10 par exemple.

→

La forme sort du canvas et ne revient pas

Il faut soit une oscillation (sin), soit un test de rebond (if (x > width)), soit un %.

← variation aléatoire →