N°12 · Canvas 2D · Geste & Vélocité

Traînée gestuelle

Votre geste, rendu visible. L'épaisseur du trait révèle la vitesse, la couleur l'accélération. Un outil de diagnostic pour comprendre comment les humains bougent — et comment les interfaces doivent répondre.

vel: 0
acc: 0

dessinez librement · vitesse = épaisseur

Trail max Épaisseur

// Traînée gestuelle — vélocité + accélération
let points = [];

canvas.addEventListener('pointermove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const prev = points[points.length - 1];

  if (prev) {
    const dx = x - prev.x, dy = y - prev.y;
    const vel = Math.sqrt(dx*dx + dy*dy);
    const acc = vel - (prev.vel || 0);
    points.push({ x, y, vel, acc });
  }

  // Épaisseur proportionnelle à la vitesse
  const width = Math.max(1, baseWidth * (vel / 20));
});

À toi de jouer

Dessinez un cercle lent puis un cercle rapide. Observez la différence d'épaisseur. En mode accélération, les virages serrés s'illuminent — c'est le signal de « décision » dans un geste.

Comprendre le geste pour concevoir la réponse

Réserver un créneau