Typographie générative

Le concept

La typographie générative traite les lettres comme des formes manipulables par le code. On peut déformer leurs contours (noise sur chaque point), les animer (oscillation, rotation), les disperser (explosion de glyphes). En p5.js, textToPoints() convertit un texte en tableau de coordonnées qu'on peut ensuite transformer.

Le code

// Generative typography: wavy text
function setup() { createCanvas(400, 280); textFont('Georgia'); textSize(60); }
function draw() {
  background(11,15,20);
  let word = 'MAROC';
  for (let i=0; i<word.length; i++) {
    let x = 60 + i * 65;
    let y = height/2 + sin(frameCount*0.04 + i*0.8) * 20;
    let r = sin(frameCount*0.02 + i) * 0.1;
    push(); translate(x,y); rotate(r);
    fill(55,227,195); noStroke(); textAlign(CENTER,CENTER);
    text(word[i], 0, 0); pop();
  }
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Apprendre, ou réservez un appel pour discuter de votre projet.