🎛️ Déplace les 4 points et fais glisser le temps
Attrape n'importe quel point bleu à la souris (ou au doigt) pour déformer la courbe. Bouge le curseur t pour voir la construction de De Casteljau, point par point.
t va de 0 (point de départ P₀) à 1 (point d'arrivée P₃). À chaque t, un seul point naît sur la courbe.
Points de contrôle
4 (cubique)
Degré
3
Niveaux d'interpolation
3 → 1
Un point glisse sur chaque segment, puis un point glisse entre ces points, puis encore… jusqu'au point unique qui dessine la courbe.
🚗 1959-1962 : la guerre secrète Renault contre Citroën
À la fin des années 1950, les constructeurs automobiles français ont un problème : comment décrire mathématiquement la carrosserie galbée d'une voiture pour la fabriquer avec des machines ? Une aile de capot n'est ni un cercle, ni une parabole. Il faut une courbe libre, lisse, qu'un ingénieur puisse déformer à volonté.
Deux hommes résolvent le problème en même temps, chacun dans son entreprise, sans le savoir. Chez Citroën, le mathématicien Paul de Casteljau trouve dès 1959 un algorithme génial — mais Citroën garde tout secret. Chez Renault, l'ingénieur Pierre Bézier développe la même idée et, lui, la publie dans les années 1960. Résultat : la courbe porte le nom de Bézier, et l'algorithme qui la construit porte le nom de De Casteljau. Justice partagée.
L'idée révolutionnaire
Au lieu de donner une équation compliquée, on donne seulement quelques points que
l'on déplace à la souris. La courbe « obéit » à ces points. Un designer n'a plus besoin de connaître
les maths : il tire des poignées, c'est tout.
🎯 Le principe : un point qui glisse entre des points qui glissent
Prends 4 points : P0, P1, P2, P3. La courbe va partir de P0 et finir en P3 ; P1 et P2 sont des aimants qui tirent la courbe sans qu'elle les touche. Voici la recette, qui est l'algorithme de De Casteljau — et c'est exactement ce que montre l'animation :
- Choisis un instant t entre 0 et 1 (par exemple t = ½, le milieu).
- Niveau 1 — place un point à la fraction t sur chaque segment : A sur [P0P1], B sur [P1P2], C sur [P2P3]. Tu as 3 points.
- Niveau 2 — recommence sur ces 3 points : place D à la fraction t sur [AB], et E sur [BC]. Tu as 2 points.
- Niveau 3 — encore une fois : place M à la fraction t sur [DE]. Il ne reste qu'un seul point M.
Ce point M est sur la courbe. Fais varier t de 0 à 1 et M trace toute la courbe de Bézier. C'est beau parce que c'est purement géométrique : rien que des milieux pondérés, encore et encore. Pas une seule formule compliquée pour le construire.
🧮 La formule : des polynômes cachés derrière la géométrie
Si on déroule l'algorithme de De Casteljau avec l'algèbre, toutes ces interpolations se condensent en une seule formule pour le point B(t) de la courbe cubique :
B(t) = (1−t)3·P0 + 3(1−t)2t·P1 + 3(1−t)t2·P2 + t3·P3
Les quatre coefficients (1−t)3, 3(1−t)2t, 3(1−t)t2 et t3 s'appellent les polynômes de Bernstein. Trois propriétés les rendent magiques :
- Ils sont toujours positifs pour t entre 0 et 1.
- Leur somme vaut 1 : (1−t)3 + 3(1−t)2t + 3(1−t)t2 + t3 = 1 (c'est le binôme de Newton appliqué à ((1−t) + t)3).
- Comme ils sont positifs et de somme 1, chaque point B(t) est un barycentre des 4 points Pi. C'est pour ça que la courbe reste toujours à l'intérieur du quadrilatère formé par les points de contrôle (son « enveloppe convexe »).
En t = 0 : tous les coefficients s'annulent sauf le premier, donc B(0) = P0. En t = 1 : seul le dernier survit, donc B(1) = P3. La courbe accroche bien ses deux extrémités.
Le secret des tangentes
À son départ, la courbe file exactement dans la direction P0 → P1.
À l'arrivée, elle file dans la direction P2 → P3. Voilà pourquoi un designer
contrôle la courbe rien qu'avec deux « poignées » de tangente : c'est ce que tu manipules dans
Illustrator, Figma ou Inkscape avec l'outil plume.
✒️ À quoi ça sert ? Absolument partout
Tu es littéralement entouré de courbes de Bézier en ce moment même :
- Les polices d'écriture : chaque lettre des formats TrueType et PostScript / OpenType est dessinée avec des Bézier (quadratiques pour TrueType, cubiques pour PostScript). Le « a » que tu lis est un contour de Bézier rempli de noir.
- Le dessin vectoriel : SVG, Illustrator, Figma, Inkscape, CorelDRAW… l'outil « plume » pose des points de contrôle de Bézier.
- L'animation : les courbes d'accélération en CSS (cubic-bezier) et dans After Effects décrivent comment une animation ralentit ou accélère dans le temps.
- La CAO et l'industrie : carrosseries, coques de bateaux, ailes d'avion sont encore conçues avec des Bézier et leurs cousines, les B-splines et les NURBS.
- Les jeux vidéo et la robotique : trajectoires de caméra et déplacements lisses suivent des chemins de Bézier.
🔗 Le pont avec ton programme de maths
Derrière le design se cachent des notions que tu connais :
- Barycentre (1BAC SM) : chaque point de la courbe est le barycentre des 4 points Pi affectés des coefficients de Bernstein. Somme des poids = 1.
- Polynômes et identités remarquables : les polynômes de Bernstein viennent du développement de ((1−t) + t)3 par le binôme de Newton, avec le triangle de Pascal (1, 3, 3, 1).
- Dérivée et tangente (2BAC SM) : la direction de la courbe en un point, c'est B′(t) ; aux extrémités elle pointe vers les points de contrôle voisins.
- Vecteurs et combinaisons linéaires : tout se calcule coordonnée par coordonnée, en x et en y séparément.
Si tu généralises à n+1 points, tu obtiens une courbe de Bézier de degré n, avec les coefficients du binôme C(n,k)·(1−t)n−k·tk : exactement la ligne n du triangle de Pascal. Le design rejoint l'arithmétique.