Courbe de Bézier

Les courbes de Bézier sont utilisées en infographie pour dessiner des formes, pour l’animation CSS et dans bien d’autres domaines.

Ils sont très simples, il suffit de les étudier une fois pour se sentir à l’aise dans le monde des graphiques vectoriels et des animations avancées.

Points de contrôle

Une courbe de Bézier est défini par des points de contrôle.

Il peut y en avoir 2, 3, 4 ou plus.

Par exemple, la courbe de deux points:

Courbe à trois points:

Courbe à quatre points:

Si vous regardez attentivement ces courbes, vous pouvez immédiatement remarquer:

1. Les points ne sont pas toujours sur la courbe. C’est tout à fait normal, nous verrons plus tard comment la courbe est construite.

2. L’ordre de la courbe est égal au nombre de points moins un. Pour deux points, nous avons une courbe linéaire (c’est une ligne droite), pour trois points – une courbe quadratique (parabolique), pour quatre points – une courbe cubique.

3. Une courbe est toujours à l’intérieur de l’enveloppe convexe de points de contrôle:

   

Grâce à cette dernière propriété, il est possible, en infographie, d’optimiser les tests d’intersection. Si les enveloppes convexes ne se croisent pas, les courbes ne se croisent pas non plus. Ainsi, vérifier l’intersection des enveloppes convexes en premier lieu peut donner un résultat très rapide “pas d’intersection”. La vérification de l’intersection des enveloppes convexes est beaucoup plus facile, car il s’agit de rectangles, de triangles, etc. (voir l’image ci-dessus), des figures beaucoup plus simples que la courbe.

La principale valeur des courbes de Bézier pour le dessin – en déplaçant les points, la courbe change d’une manière intuitive et évidente.

Essayez de déplacer les points de contrôle à l’aide d’une souris dans l’exemple ci-dessous:

Comme vous pouvez le remarquer, la courbe s’étire le long des lignes tangentielles 1 → 2 et 3 → 4.

Après un peu de pratique, il devient évident de placer les points pour obtenir la courbe voulue. Et en reliant plusieurs courbes, on peut obtenir pratiquement n’importe quoi.

Voici quelques exemples:

L’algorithme de De Casteljau

Il existe une formule mathématique pour les courbes de Bézier, mais nous y reviendrons un peu plus tard, parce que l’algorithme de De Casteljau est identique à la définition mathématique et montre visuellement comment elle est construite.

Voyons tout d’abord l’exemple de 3-points.

Voici la démo, et l’explication qui suit.

Les points de contrôle (1,2 et 3) peuvent être déplacés par la souris. Appuyez sur le bouton “play” pour l’exécuter.

L’algorithme de De Casteljau pour la construction de la courbe de Bézier à 3 points:

1. Dessinez des points de contrôle. Dans la démo ci-dessus, ils sont intitulés: 1, 2, 3.

2. Construisez des segments entre les points de contrôle 1 → 2 → 3. Dans la démonstration ci-dessus, ils sont bruns.

3. Le paramètre t passe de 0 à 1. Dans l’exemple ci-dessus, l’étape 0.05 est atteinte: la boucle parcourt 0, 0.05, 0.1, 0.15, .... 0.95, 1.

   Pour chacune de ces valeurs de t:

   • Sur chaque segment brun on prend un point situé sur la distance proportionnelle à t de son début. Comme il y a deux segments, nous avons deux points.

     Par exemple, pour t=0 – les deux points seront au début des segments, et pour t=0.25 – sur les 25% de la longueur du segment depuis le début, pour t=0.5 – 50%(le milieu), pour t=1 – à la fin des segments.

   • Reliez les points. Sur l’image ci-dessous, le segment de connexion est peint en bleu.

Pour t=0.25	Pour t=0.5

4. Maintenant, dans le segment bleu prenez un point sur la distance proportionnelle à la même valeur de t. C’est-à-dire que pour t=0.25 (l’image de gauche) nous avons un point à l’extrémité du quart gauche du segment, et pour t=0.5 (l’image de droite) – au milieu du segment. Sur les images ci-dessus, ce point est rouge.

5. Comme t va de 0 à 1, chaque valeur de t ajoute un point à la courbe. L’ensemble de ces points forme la courbe de Bézier. Elle est rouge et parabolique sur les images ci-dessus.

C’était un processus pour 3 points. Mais c’est la même chose pour 4 points.

La démo pour 4 points (les points peuvent être déplacés à la souris):

L’algorithme pour 4 points:

• Relier les points de contrôle par des segments: 1 → 2, 2 → 3, 3 → 4. Il y aura 3 segments bruns.
• Pour chaque t dans l’intervalle de 0 à 1:
  • On prend des points sur ces segments sur la distance proportionnelle à t depuis le début. Ces points sont reliés, de sorte que nous avons deux segments verts.
  • Sur ces segments, nous prenons des points proportionnels à t. Nous obtenons un segment bleu.
  • Sur le segment bleu, on prend un point proportionnel à t. Dans l’exemple ci-dessus, c’est le point rouge.
• Ces points forment ensemble la courbe.

L’algorithme est récursif et peut être généralisé pour un nombre quelconque de points de contrôle.

Étant donné N de points de contrôle:

1. Nous les connectons pour obtenir initialement N-1 segments.
2. Puis pour chaque t de 0 à 1, on prend un point sur chaque segment sur la distance proportionnelle à t et on les relie. Il y aura N-2 segments.
3. Répétez l’étape 2 jusqu’à ce qu’il n’y ait plus qu’un seul point.

Ces points forment la courbe.

Exécutez et mettez en pause les exemples pour voir clairement les segments et la façon dont la courbe est construite.

Une courbe qui ressemble à y=1/t:

Les points de contrôle en zig-zag fonctionnent également très bien:

Faire une boucle est possible:

une courbe de Bézier non lisse (oui, c’est possible aussi):

Si quelque chose n’est pas clair dans la description de l’algorithme, veuillez consulter les exemples en direct ci-dessus pour voir comment la courbe est construite.

Comme l’algorithme est récursif, nous pouvons construire des courbes de Bézier de n’importe quel ordre, c’est-à-dire en utilisant 5, 6 ou plus de points de contrôle. Mais en pratique, de nombreux points sont moins utiles. En général, nous prenons 2 ou 3 points, et pour les lignes complexes, nous collons plusieurs courbes ensemble. C’est plus simple à développer et à calculer.

Mathématiques

Une courbe de Bézier peut être décrite à l’aide d’une formule mathématique.

Comme nous l’avons vu, il n’est pas nécessaire de le savoir, la plupart des gens se contentent de dessiner la courbe en déplaçant des points avec la souris. Mais si vous aimez les maths, voici la solution.

Étant donné les coordonnées des points de contrôle Pi: le premier point de contrôle a des coordonnées P1 = (x1, y1), le second: P2 = (x2, y2), et ainsi de suite, les coordonnées de la courbe sont décrites par l’équation qui dépend du paramètre t du segment [0,1].

• La formule pour une courbe à 2 points:

  P = (1-t)P1 + tP2

• Pour 3 points de contrôle:

  P = (1−t)2P1 + 2(1−t)tP2 + t2P3

• Pour 4 points de contrôle:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Ce sont des équations vectorielles. En d’autres termes, nous pouvons mettre x et y à la place de P pour obtenir les coordonnées correspondantes.

Par exemple, la courbe à 3 points est formée par les points (x,y) calculés comme suit:

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

Au lieu de x1, y1, x2, y2, x3, y3 on devrait mettre les coordonnées de 3 points de contrôle, et ensuite quand t se déplace de 0 à 1, pour chaque valeur de t on aura (x,y) de la courbe.

Par exemple, si les points de contrôle sont (0,0), (0.5, 1) et (1, 0), les équations deviennent:

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t

Maintenant que t va de 0 à 1, l’ensemble des valeurs (x,y) pour chaque t forme la courbe pour ces points de contrôle.

Résumé

Les courbes de Bézier sont définies par leurs points de contrôle.

Nous avons vu deux définitions des courbes de Bézier:

1. Un procédé de dessin : L’algorithme de De Casteljau.
2. Une formule mathématique.

Propriétés intéréssantes des courbes de Bézier:

• Nous pouvons dessiner des lignes lisses avec une souris en déplaçant les points de contrôle.
• Les formes complexes peuvent être constituées de plusieurs courbes de Bezier.

Utilisation:

• En infographie, modélisation, éditeurs de graphiques vectoriels. Les polices sont décrites par des courbes de Bézier.
• Dans le domaine du développement web – pour les graphiques sur Canvas et au format SVG. À ce propos, les exemples “en direct” ci-dessus sont écrits en SVG. Il s’agit en fait d’un seul document SVG auquel on donne différents points comme paramètres. Vous pouvez l’ouvrir dans une fenêtre distincte et voir la source: demo.svg.
• Dans les animations CSS, pour décrire la trajectoire et la vitesse de l’animation.