Media: Type

Use text drawing and map() to control typography behavior.

Example 1: Mouse Size Type

Code

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(250);
  const sz = map(mouseX, 0, width, 16, 96, true);
  textSize(sz);
  fill(255, 45, 140);
  text('P5', width / 2, height / 2);

  textSize(14);
  fill(30);
  text('Move mouse left/right', width / 2, height - 24);
}

Try this: Map mouseY to letter spacing using manual x offsets.

Open sketch in new tab

Example 2: Mapped Baseline

Code

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(255);
  for (let i = 0; i < 8; i++) {
    let y = map(i, 0, 7, 70, 330);
    let size = map(sin(frameCount * 0.03 + i), -1, 1, 14, 42);
    textSize(size);
    fill(255, 45, 140, 180);
    text('type + map()', width / 2, y);
  }
}

Try this: Use a phrase array and wave each word with sin().

Open sketch in new tab

Resources