En design d'interaction, la contrainte n'est pas une restriction — c'est un guide. Un slider qui ne peut aller que de 0 à 100 empêche les erreurs. Un formulaire qui grise les options impossibles réduit la charge cognitive. Dans une installation interactive, contraindre l'espace d'action (un seul geste possible, un nombre limité d'états) rend l'expérience lisible sans documentation. Trop de liberté = paralysie. Juste assez de contrainte = flow.
// Contrainte : le cercle ne peut que tourner sur un rail circulaire
let angle = 0;
let R = 100; // rayon du rail
function setup() { createCanvas(400, 300); }
function draw() {
background(11, 15, 20);
let cx = width/2, cy = height/2;
// Rail (cercle guide)
noFill(); stroke(55, 227, 195, 40); strokeWeight(1);
ellipse(cx, cy, R*2, R*2);
// Angle vers la souris
angle = atan2(mouseY - cy, mouseX - cx);
// Position contrainte SUR le rail
let px = cx + cos(angle) * R;
let py = cy + sin(angle) * R;
noStroke(); fill(55, 227, 195);
ellipse(px, py, 24, 24);
// Ligne guide
stroke(55, 227, 195, 30); line(cx, cy, px, py);
}Créez un sketch où un cercle est contraint à se déplacer UNIQUEMENT sur un cercle (rayon fixe, seul l'angle change selon la souris). Comparez avec un cercle libre (suit mouseX, mouseY) : lequel est plus « satisfaisant » à manipuler ?
Recevez les 5 leçons par email — une tous les 3 jours. Gratuit, sans compte.
Double opt-in · désinscription en 1 clic · zéro spam.