partie 3

Le temps et l'aléatoire

Deux nouvelles sources de variation.

draw est déjà une boucle

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

function draw() {
  background(240);
  let taille = frameCount * 0.5;
  circle(width / 2, height / 2, taille);
}

Figer

function setup() {
  createCanvas(600, 900);
  noLoop();     // draw() ne s'exécute qu'une fois
}

Oscillation

frameCount monte indéfiniment. Pour un mouvement qui va et vient, on utilise sin(), qui oscille entre -1 et 1.

let x = width / 2 + sin(frameCount * 0.05) * 200;
circle(x, height / 2, 60);

Trois paramètres

let amplitude = 200;
let speed = 0.05;
let phase = 0;

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

Manipulez-les un par un. Ce sont trois paramètres très différents.

Ramener dans une plage utile

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

Mouvement circulaire

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

Deux sources en même temps

i détermine la position dans la série et frameCount la position dans le temps. On peut les combiner.

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

Chaque élément oscille à la même vitesse, mais démarre son cycle un peu plus tard que le précédent.

mini-exercice

Reprendre votre série de la séance 2
Y ajouter une seule oscillation, sur un seul paramètre
Puis y ajouter un décalage de phase selon i
Régler amplitude et vitesse jusqu'à obtenir quelque chose de lisible

random

random()valeur entre 0 et 1

random(max)valeur entre 0 et max

random(min, max)valeur entre min et max

random(tableau)un élément au hasard

for (let i = 0; i < 50; i++) {
  circle(random(width), random(height), random(10, 60));
}

noise

random(), random(), random()          // 0.83 ; 0.12 ; 0.67

noise(0.1), noise(0.2), noise(0.3)    // 0.51 ; 0.54 ; 0.58

noise() renvoie aussi une valeur entre 0 et 1, mais permet de controller l'écart entre deux valeurs demandées.

let t = 0;

function draw() {
  background(240);

  circle(random(width), 100, 40);

  circle(noise(t) * width, 300, 40);
  t += 0.01;
}

let scale = 0.01;   // plus petit = relief plus lisse

noFill();
beginShape();
for (let x = 0; x < width; x++) {
  let y = (noise(x * scale)) * height;
  vertex(x, y);
}
endShape();

Choisir sa source

iprogression régulière le long de la série

dist()effet radial, gradient depuis un point

frameCountévolution continue dans le temps

sin(), cos()oscillation prévisible et cyclique

random()choix ponctuel ; une couleur, une forme, une décision

noise()dérive continue ; mouvement, relief, texture

Projet intermédiaire

contraintes

Niveaux de gris uniquement
Pas d'interaction
Format libre
N'essayez pas de mélanger répétition, accumulation, oscilliation, bruit, ... Faites une chose à la fois, faites le bien. Soyez intentionnel.le.s
Votre système doit être lisible. Surtout, vous devez être en mesure de l'expliquer en détail

Méthode

Écrire en une phrase ce que le système est censé faire, avant de coder. Impossible de programmer ce que vous ne savez pas exprimer.

Décomposez votre travail en plusieurs étapes simples.

Sauvegarder chaque version qui fonctionne avant de tenter autre chose. Toujours avoir un état stable auquel revenir.