Generative Typography

The concept

Generative typography treats letters as shapes manipulable by code. We can deform contours (noise on each point), animate them (oscillation, rotation), scatter them (glyph explosion). In p5.js, textToPoints() converts text to coordinates we can transform.

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

Going further

Explore other free courses on the Learn page, or book a call to discuss your project.