Gestes et interaction gestuelle

Le concept

Les gestes sont des séquences de mouvements tactiles interprétées comme des intentions. Les plus courants : swipe (défilement directionnel), pinch (zoom), rotate (rotation à deux doigts), long press. Chaque geste a un seuil de reconnaissance (distance minimale, durée, nombre de doigts) et une action déclenchée.

Le code

// Gesture: swipe direction detection
let startX, startY, lastGesture = 'waiting...';
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  fill(55,227,195); textAlign(CENTER); textSize(18);
  text(lastGesture, width/2, height/2);
  textSize(12); fill(255,255,255,80);
  text('Cliquez et glissez pour détecter le geste', width/2, height/2+40);
}
function mousePressed() { startX=mouseX; startY=mouseY; }
function mouseReleased() {
  let dx=mouseX-startX, dy=mouseY-startY;
  let dist = sqrt(dx*dx+dy*dy);
  if (dist < 20) { lastGesture='tap'; return; }
  if (abs(dx) > abs(dy)) lastGesture = dx>0 ? '→ swipe right' : '← swipe left';
  else lastGesture = dy>0 ? '↓ swipe down' : '↑ swipe up';
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.