Documentation

Aléatoire

Deux outils : random() et noise().

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 du tableau

let palette = ['#0d0d0d', '#e8543f', '#f2e8d5'];

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

Stabiliser l'aléatoire

Tirer une seule fois

let positions = [];

function setup() {
  createCanvas(600, 600);
  for (let i = 0; i < 50; i++) {
    positions.push({ x: random(width), y: random(height) });
  }
}

function draw() {
  background(240);
  for (let i = 0; i < positions.length; i++) {
    let p = positions[i];
    circle(p.x, p.y, 20);
  }
}

Fixer la seed

randomSeed() rend la séquence reproductible : même seed, même tirages.

function draw() {
  randomSeed(25);            // toujours la même série
  background(240);
  for (let i = 0; i < 50; i++) {
    circle(random(width), random(height), 20);
  }
}

noise

noise() renvoie une valeur entre 0 et 1, comme random().

// random ; chaque valeur ignore la précédente
random(), random(), random()   // 0.83 ; 0.12 ; 0.67

// noise ; les valeurs voisines se ressemblent
noise(0.1), noise(0.2), noise(0.3)   // 0.51 ; 0.54 ; 0.58

Une valeur qui dérive dans le temps

let t = 0;
let step = 0.01;

function draw() {
  background(240);
  let x = noise(t) * width;
  let y = noise(t + 1000) * height;
  circle(x, y, 40);
  t += step;
}

Le step est le principal paramètre : 0.001 mouvement lent/lisse, 0.1 nerveux, 1 proche du random().

noise 2D

noise(x, y) varie selon 2 paramètres

let scale = 0.01;

for (let x = 0; x < width; x += 10) {
  for (let y = 0; y < height; y += 10) {
    let n = noise(x * scale, y * scale);
    fill(n * 255);
    noStroke();
    rect(x, y, 10, 10);
  }
}

noise 3D

function draw() {
  for (let x = 0; x < width; x += 10) {
    for (let y = 0; y < height; y += 10) {
      let n = noise(x * 0.01, y * 0.01, frameCount * 0.01);
      //                                └────────┬────────┘
      //                            le noise évolue organiquement
      fill(n * 255);
      rect(x, y, 10, 10);
    }
  }
}

← animation interaction →