Kamel Ghabte · Cours · Gratuit

Le feedback haptique

Déclencher une vibration en réponse à une interaction UI avec l'API Vibration.

Le concept

Le feedback haptique communique un état (succès, erreur, confirmation) via le sens tactile. Sur mobile, l'API Vibration (`navigator.vibrate()`) permet de déclencher des schémas de vibration. C'est une couche de retour qui complète le visuel et l'auditif, essentielle dans les interfaces XR et mobile.

Le code

// Haptic feedback on click
// On mobile: navigator.vibrate([50, 30, 100]) triggers a pattern
// Pattern: vibrate 50ms, pause 30ms, vibrate 100ms

let btn;
function setup() {
  createCanvas(400, 280);
  btn = createButton('Tap me — feel it');
  btn.position(width/2 - 60, height/2 - 20);
  btn.style('font-size','1rem');
  btn.mousePressed(() => {
    // Short tap pattern: 40ms
    if (navigator.vibrate) navigator.vibrate([40]);
    flashFeedback();
  });
}
let flash = 0;
function flashFeedback() { flash = 20; }
function draw() {
  background(lerp(11, 55, flash/20), lerp(15, 227, flash/20), lerp(20, 195, flash/20));
  if (flash > 0) flash--;
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.

Pratiquer, collaborer, déployer — en 15 min.

Réserver un appel →