Gestures & Gesture Interaction

The concept

Gestures are sequences of touch movements interpreted as intentions. Most common: swipe (directional scroll), pinch (zoom), rotate (two-finger), long press. Each gesture has a recognition threshold (min distance, duration, finger count) and a triggered action.

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

Going further

Explore other free courses on the Workshops page.