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 →