Free Press

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

Elles sont une chose très simple, valant la peine d’être étudiée une fois et ensuite de se sentir à l’aise dans le monde du graphisme vectoriel et des animations avancées.

Points de contrôle

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

Ils peuvent être 2, 3, 4 ou plus.

Par exemple, courbe à 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 parfaitement normal, plus tard nous verrons 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 la coque convexe des points de contrôle:

   

En raison de cette dernière propriété, en infographie, il est possible d’optimiser les tests d’intersection. Si les coques convexes ne se croisent pas, alors les courbes non plus. Ainsi, vérifier l’intersection des coques convexes en premier peut donner un résultat très rapide « pas d’intersection ». Vérifier l’intersection des coques convexes est beaucoup plus facile, car ce sont des rectangles, des triangles et ainsi de suite (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 de 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 nécessaire. Et en reliant plusieurs courbes, on peut obtenir pratiquement n’importe quoi.

Voici quelques exemples :

Algorithme de De Casteljau

Il existe une formule mathématique pour les courbes de Bézier, mais abordons-la un peu plus tard, car l’algorithme deDe Casteljau est identique à la définition mathématique et montre visuellement comment il est construit.

D’abord, voyons l’exemple des 3 points.

Voici la démo, et l’explication 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.

Algorithme de De Casteljau pour construire la courbe de bézier à 3 points:

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

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

3. Le paramètre t se déplace de 0 à 1. Dans l’exemple ci-dessus on utilise le pas 0.05 : la boucle passe sur 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Pour chacune de ces valeurs de t:

   • Sur chaque segment marron 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 à partir du début, pour t=0.5 – 50%(le milieu), pour t=1 – à la fin des segments.

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

.

Pour t=0.25	Pour t=0.5

1. Prenez maintenant dans le segment bleu un point sur la distance proportionnelle à la même valeur de t. C’est-à-dire, pour t=0.25 (l’image de gauche) nous avons un point à la fin 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.

2. 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 procédé pour 3 points. Mais c’est pareil pour 4 points.

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

L’algorithme pour 4 points:

• Connecter les points de contrôle par des segments : 1 → 2, 2 → 3, 3 → 4. Il y aura 3 segments marron.
• Pour chaque t de l’intervalle de 0 à 1:
  • On prend des points sur ces segments sur la distance proportionnelle à t du début. Ces points sont reliés, de sorte que nous avons deux segments verts.
  • Sur ces segments, nous prenons des points proportionnels à t. On obtient un segment bleu.
  • Sur le segment bleu on prend un point proportionnel à t. Sur l’exemple ci-dessus, il est 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.

Donné N de points de contrôle:

1. On les relie 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 constituent la courbe.

Réalisez et mettez en pause les exemples pour bien voir 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 aussi 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 regarder 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.

Maths

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

Comme nous l’avons vu – il n’y a en fait pas besoin de la connaître, la plupart des gens dessinent simplement la courbe en déplaçant des points avec une souris. Mais si vous aimez les maths – la voici.

Donné les coordonnées des points de contrôle Pi : le premier point de contrôle a les 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 .

• 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 au lieu 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:

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

A la place de x1, y1, x2, y2, x3, y3, nous devrions mettre les coordonnées de 3 points de contrôle, puis comme t se déplace de 0 à 1, pour chaque valeur de t nous aurons (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 se déplace 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. Utilisation d’un procédé de dessin : L’algorithme de De Casteljau.
2. Utilisation d’une formule mathématique.

Bonnes propriétés des courbes de Bézier :

• Nous pouvons dessiner des lignes lisses avec une souris en déplaçant des points de contrôle.
• Des formes complexes peuvent être faites 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 développement web – pour les graphiques sur Canvas et dans le format SVG. À propos, les exemples « en direct » ci-dessus sont écrits en SVG. Ils sont en fait un seul document SVG auquel on donne différents points comme paramètres. Vous pouvez l’ouvrir dans une fenêtre séparée et voir la source : demo.svg.
• Dans l’animation CSS pour décrire le chemin et la vitesse de l’animation.

.