Haptic Feedback

The concept

Haptic feedback communicates state (success, error, confirmation) through touch. On mobile, the Vibration API (navigator.vibrate()) triggers vibration patterns. It complements visual and audio feedback, essential in XR and mobile interfaces.

The 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--;
}

Going further

Explore other free courses on the Workshops page.