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.
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);
}