Un exemple interactif de font variable

22/10/2019 ☼ typographie ☼ variable ☼ p5js ☼ interaction

Niveau : ★★★★☆

Voici l’exemple à étudier sur Codepen. Les commentaires dans le code permettent de suivre les différentes étapes.

1 - Le résultat dans la page

2 - Le code

function setup() {
  createCanvas (window.innerWidth,window.innerHeight);
  frameRate(24);
  
  p = createP('The Flexible Future of Typography');
}

function draw() {
  background("#F8D153");
  
  let posX = 0;
  let posY = height/8;
  
  let fts = 160;
  
  let pfat = constrain(map(mouseX,0,width,1,999),1,999);
  
  p.style('font-size' ,fts+'px');
  p.style('font-weight' ,pfat);
  p.style('align', 'center');
  p.position(posX,posY);
}