N°12 · Canvas 2D · Motion Analysis

Gesture Trail

Your gesture made visible. Speed, acceleration and curvature rendered as color and width — see the physics of your own movement.

vel: 0
acc: 0

move your mouse to draw a trail

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));
});

Your turn

Draw a smooth circle — what does your trail reveal about the natural rhythm of your hand? Compare a fast vs slow gesture and observe how speed affects smoothness.

Understand gesture physics for natural interfaces

Book a session