p5.js (lerp, map, text, for)

17/09/2025

Les 3 nouvelles vidéos :

• Afficher du texte : https://nuage10.apps.education.fr/index.php/s/YKpQxmSRkCrSNgz
• Utiliser une police personnalisée : https://nuage10.apps.education.fr/index.php/s/e9inRotLKrAnniT
• Dupliquer des éléments en boucle : https://nuage10.apps.education.fr/index.php/s/o6DQjnFJBSDGmHK

Tous les tutoriels vidéo p5.js : https://nuage10.apps.education.fr/index.php/s/7e8nQmPfM9dpWCP

— p5.js : retour sur les fonctions map() et lerp()

map() : convertir une valeur d'un intervalle à un autre

// documentation : https://p5js.org/examples/calculating-values-map/
// exemple : convertir 22 de l'intervalle 0 - 59 à l'intervalle 0 - 255
// le résultat pourra ainsi être utilisé comme valeur RVB 

function setup(){
    createCanvas(200,200);
    let valeurInitiale = 22;
    let valeurConvertie = map(valeurInitiale,0,59,0,255);
    console.log(valeurConvertie); // = 95.08474576271186
}

lerp() : interpoler progressivement une valeur

// documentation : https://p5js.org/reference/p5/lerp/
// exemple : passer de 100 à 200

let valeur = 100;
let valeurCible = 200;

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

function draw(){
    valeur = lerp(valeur,valeurCible,0.05); // 0.05 correspond à la vitesse
    console.log(valeur);
    ellipse(valeur,200,50);
}

Dans le cas spécifique de la valeur des secondes, voici comment les interpoler entre elles.

let valeur;
let valeurCible;

function setup(){
    createCanvas(400,400);
    valeur = second();
}

function draw(){
    background(255);
    valeurCible = second();
    valeur = lerp(valeur,valeurCible,0.05)
    ellipse(valeur,height/2,50);
}

Problème : la valeur est trop faible pour que le déplacement soit visible. C'est là que la fonction map() est utile : elle permet de convertir la valeur de l'intervalle 0-59 à un intervalle plus grand, entre 0 et la taille de la fenêtre de rendu (400px dans notre exemple, ou width qui permet de récupérer la largeur sans la connaître). Il faut donc "mapper" la valeurCible dans un autre intervalle comme ceci, juste avant le calcul de l'interpolation avec lerp() :

valeurCible = map(valeurCible,0,59,0,width);

Résultat :

— Afficher du texte

Fonctions text() et textAlign()

La fonction textAlign() permet de centrer le texte, puis text() permet de l'afficher. text()prend 3 paramètres : le contenu, la position x et la position y.

let h;
let m;
let s;

function setup(){
    createCanvas(400,400)
}

function draw(){
  background(255);
    h = hour();
    m = minute();
    s = second();
  
    // Centre le texte. Les majuscules de CENTER sont importantes
    textAlign(CENTER);
  
    // Afficher le texte
    text(h + ':' + m +':'+s,width/2, height/2);
    // ou notation alternative
    // text(`${h}:${m}:${s}`);
}

Pour le contenu, nous devons "concaténer" les variables avec du texte brut, ici les ":" qui servent de séparateurs. Pour cela il faut utiliser une notation particulière afin de bien séparer les variables pour qu'elles ne soient pas considérées comme du texte brut :

var1 +'texte brut'+ var2

Une autre notation peut être utilisée, sans doute plus lisible :

`${var1} texte brut ${var2}`

Bien utiliser ce signe `.

— Afficher le texte avec une police personnalisée

Il est possible d'utiliser des polices dites "système" — c'est-à-dire présentes par défaut sur la plupart des appareils, soit en les nommant (Courier New), soit en utilisant leur style (monospace, sans-serif, etc.).

let h;
let m;
let s;

function setup(){
    createCanvas(400,400);
    textFont('Courier New');
    textSize(24);
}

function draw(){
  background(255);
    h = hour();
    m = minute();
    s = second();
  
    // Centre le texte. Les majuscules de CENTER sont importantes
    textAlign(CENTER);
  
    // Afficher le texte
    text(h + ':' + m +':'+s,width/2, height/2);
    // ou notation alternative
    // text(`${h}:${m}:${s}`);
}

Il est également possible d'utiliser des polices hébergées en ligne (comme Google Fonts). Dans ce cas il faut d'abord charger la police dans la page html.

Ajoutez ces lignes dans index.html:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

Et dans sketch.js:

textFont('IBM Plex Mono');

Ou enfin il est possible d'uploader une police dans le dossier de projet, au format .ttf, .otf, .woff ou .woff2. Il faut ensuite précharger le fichier de la police dans une variable font avec la fonction loadFont(). Pour attendre que la police soit chargée avant d'exécuter la suite du programme, il est conseillé de charger la police dans un nouveau bloc de code, avant la fonction setup() : function preload(). Le code complet :

let h;
let m;
let s;

let font;

function preload(){
    font = loadFont('WorkSans-VariableFont_wght.ttf');
}

function setup(){
    createCanvas(400,400);
    textFont(font);
    textSize(24);
}

function draw(){
  background(255);
    h = hour();
    m = minute();
    s = second();
  
    textAlign(CENTER);
  
    text(h + ':' + m +':'+s,width/2, height/2);
}

Il reste un point à corriger : les variable h, m et s n'intègrent pas de 0 quand leur valeur est inférieure à 10. Nous devons donc manuellement ajouter ce "0" à l'affichage, en utilisant des conditions if(){}.

let h;
let m;
let s;

let font;

function preload(){
    font = loadFont('WorkSans-VariableFont_wght.ttf');
}

function setup(){
    createCanvas(400,400);
    textFont(font);
    textSize(24);
}

function draw(){
  background(255);
    h = hour();
    m = minute();
    s = second();
  
    textAlign(CENTER);
  
    if(h < 10){
      h = '0'+h;
    }
  
    if(m < 10){
      m = '0'+m;
    }
  
    if(s < 10){
      s = '0'+s;
    }
  
    text(h + ':' + m +':'+s,width/2, height/2);
}

Résultat :

— Répéter des formes avec les boucles for

Si vous souhaitez que le nombre de formes affichées correspondent au nombre de secondes, minutes et heures, comme pour l'animation ci-dessous, vous allez devoir répéter en boucle l'affichage des formes, au sein même de la boucle draw().

Une boucle for est un bloc d'instruction qui s'écrit donc à l'intérieur de la boucle draw() :

— début boucle draw
  * début boucle for
  * fin boucle for
— fin boucle draw

En Javascript, la boucle for fonctione avec un compteur intégré qui détermine le nombre de répétitions. En général ce compteur utilise une variable i. Dans l'exemple ci-dessous, la boucle se répète tant que i qui au départ est à 0, est plus petit que 10. Copiez-collez le code ci-dessous et regardez ce qui se passe dans la console.

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

function draw(){
  for(let i = 0 ; i < 10 ; i++ ){
    console.log(i);
  }
}

Si on affiche une forme, il faut la décaler ou la modifier pour qu'elle devienne visible (sinon la forme se superpose 10 fois). Dans l'exemple ci-dessous, le diamètre du cercle augmente à chaque répétation de i * 10, soit 0 pixel au début, puis 10 pixels, 20 pixels, etc.

function setup(){
  createCanvas(400,400);
  noFill();
}

function draw(){
  for(let i = 0 ; i < 10 ; i++ ){
    ellipse(width/2,height/2, 10 + i * 10)
  }
}

Enfin dans le cas des secondes on va donc répéter la boucle for un nombre de fois correpondant au nombre de secondes. On remplace donc i < 10 par i < s.

let s;

function setup(){
  createCanvas(400,400);
  noFill();
}

function draw(){
  background(255);
  s = second();
  console.log(s);
  
  for(let i = 0 ; i < s ; i++ ){
    ellipse(width/2,height/2, 10 + i*5)
  }
}

Résultat :