Kamel Ghabte · Course · Free

Multimodal Sensory Feedback

Combine visual, audio and haptic feedback for rich XR interactions.

The concept

Multimodal feedback activates multiple sensory channels simultaneously: visual (flash, animation), audio (click, beep), haptic (vibration). Redundancy improves perception without cognitive overload if channels complement each other. Rule: all three must trigger within < 50ms to feel synchronous.

The code

// Multimodal feedback: visual + audio + haptic on click
let flash = 0;
function setup() { createCanvas(400, 280); }
function draw() {
  background(lerp(11,40,flash/30), lerp(15,200,flash/30), lerp(20,100,flash/30));
  if (flash > 0) flash--;
  noStroke(); fill(55,227,195,100+flash*4);
  ellipse(width/2, height/2, 80+flash*2, 80+flash*2);
  fill(255,255,255,80); textAlign(CENTER);
  text('Cliquer pour retour complet', width/2, height/2+60);
}
function mousePressed() {
  flash = 30; // Visual
  // Audio (Web Audio API)
  try {
    let ctx = new AudioContext();
    let osc = ctx.createOscillator();
    let g = ctx.createGain();
    osc.connect(g); g.connect(ctx.destination);
    osc.frequency.value = 880;
    g.gain.setValueAtTime(0.3, ctx.currentTime);
    g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime+0.15);
    osc.start(); osc.stop(ctx.currentTime+0.15);
  } catch(e){}
  // Haptic
  if (navigator.vibrate) navigator.vibrate([30]);
}

Going further

Explore other free courses on the Workshops page.

Practice, collaborate, deploy — in 15 min.

Book a discovery call →