Les courbes de Bézier

Introduction

Les courbes de Bézier sont des courbes du plan défini à l'aide de la notion de barycentre. Cela permet de conserver leur allure lors de transformation affine dont les rotations et translation. Cela est particulièrement intéréssant pour la synthèse d'images ou le rendu de fontes. Les courbes de Bézier sont en particulier utilisées dans les images vectorielles SVG.

Définition

Soit $n \in ℕ^{*}$ et soient $n + 1$ points du plan $A_{0}, A_{1}, ... A_{n}$ . On appelle courbe de Bézier de degré $n$ de points de contrôle $A_{0}, A_{1}, ... A_{n}$ , l'ensemble des barycentres $\{G (t)| t \in [0, 1]\}$ de ces points affectés des coefficients prenant les valeurs des polynômes de Bernstein de degré $n$ :

$\forall t \in [0, 1], G (t) = bary \{(A_{i}, B_{i}^{n} (t))| i \in [0, n]\}$

On rappelle la définition des polynômes de Bernstein : $B_{i}^{n} (t) = (\binom{n}{i}) t^{i} {(1 - t)}^{n - i}$ . On remarque que $\sum_{i = 0}^{n} B_{i}^{n} = 1 \neq 0$ sur $[0, 1]$ donc les barycentres sont bien définis.

Étude

On a $B_{i}^{n} (t) \geq 0$ pour tout $t \in [0, 1]$ , donc nécessairement la courbe est à l'intérieur de l'enveloppe convexe des points de contrôle. On se place dans un repère orthonormal $(O, \vec{i}, \vec{j})$ . Les points de la courbe vérifient :

$\sum_{i = 0}^{n} B_{i}^{n} (t) \vec{G (t) A_{i}} = \vec{0}$

$\sum_{i = 0}^{n} B_{i}^{n} (t) (\vec{G (t) O} + \vec{O A_{i}}) = \vec{0}$

$(\sum_{i = 0}^{n} B_{i}^{n} (t)) \vec{G (t) O} + \sum_{i = 0}^{n} B_{i}^{n} (t) \vec{O A_{i}} = \vec{0}$

d'où finalement l'expression analytique de la courbe :

$\vec{OG (t)} = \sum_{i = 0}^{n} B_{i}^{n} (t) \vec{O A_{i}}$

La courbe est assez "sympatique". Tout d'abord, elle est $C^{\infty}$ car les coefficients sont des polynômes. Si on exprime les coordonnées des points dans la base $(O, \vec{i}, \vec{j})$ (ou dans n'importe quelle base) on obtient deux polynômes de degré au plus $n$ donc de dérivée s'annulant au plus $n - 1$ fois : la courbe change de direction verticalement et horizontalement au plus $n - 1$ fois, donc elle a un comportement assez simple.

On remarque que $B_{i}^{n} (0) = 0$ si $i \geq 1$ et $B_{0}^{n} (0) = 1$ donc $G (0) = A_{0}$ . De même, on a $G (1) = A_{n}$ . Ainsi, la courbe de Bézier part de $A_{0}$ pour arriver en $A_{n}$ . Si on calcule la dérivée de la courbe, on a :

$\frac{ⅆ \vec{O G (t)}}{ⅆ t} = \sum_{i = 0}^{n} \frac{ⅆ B_{i}^{n} (t)}{ⅆ t} \vec{O A_{i}}$

On a alors :

$\frac{ⅆ B_{i}^{n} (t)}{ⅆ t} = {\begin{matrix} - n {(1 - t)}^{n - 1} si i = 0 \\ n t^{n - 1} si i = n \\ (\binom{n}{i}) ({i t}^{i - 1} {(1 - t)}^{n - i} - {(n - i) t}^{i} {(1 - t)}^{n - i - 1}) = (\binom{n}{i}) t^{i - 1} {(1 - t)}^{n - i - 1} (i - n t) sinon \end{matrix}$

A nouveau, les dérivée en $t = 0$ et $t = 1$ donnent :

$\frac{ⅆ \vec{O G (0)}}{ⅆ t} = - n \vec{O A_{0}} + n \vec{O A_{1}} = n \vec{A_{0} A_{1}}$

$\frac{ⅆ \vec{O G (1)}}{ⅆ t} = - n \vec{O A_{n - 1}} + n \vec{O A_{n}} = n \vec{A_{n - 1} A_{n}}$

La courbe est donc respectivement tangente en $A_{0}$ et $A_{n}$ aux droites $(A_{0} A_{1})$ et $(A_{n - 1} A_{n})$ . Finalement, on obtient l'allure suivante pour $n = 3$ :

Allure d'une courbe de Bézier de degré 3 A_0 A_1 A_(n-1) A_n

Construction et cas particuliers

Courbe de Bézier linéaire

Pour $n = 1$ , l'équation devient : $\vec{OG (t)} = (1 - t) \vec{O A_{0}} + t \vec{O A_{1}} = \vec{O A_{0}} + t \vec{A_{0} A_{1}}$ d'où

$\vec{A_{0} G (t)} = t \vec{A_{0} A_{1}}$ donc la courbe coïncide avec le segment $[A_{0}, A_{1}]$ .

Construction récursive

On peut vérifier l'égalité :

$(1 - t) \sum_{i = 0}^{n} B_{i}^{n} (t) \vec{O A_{i}} + t \sum_{i = 1}^{n + 1} B_{i}^{n} (t) \vec{O A_{i}} = \sum_{i = 0}^{n + 1} B_{i}^{n + 1} (t) \vec{O A_{i}}$

Cela signifie que la courbe de Bézier de degré $n + 1$ de points de contrôle $A_{0}$ ... $A_{n + 1}$ s'obtient en prenant les barycentre de points $G_{1} (t)$ et $G_{2} (t)$ affectés des coefficient $(1 - t)$ et $t$ . Les points $G_{1}$ et $G_{2}$ correspondant au points des courbes de Bézier de degré $n$ de points de contrôle respectifs $A_{0}$ ... $A_{n}$ et $A_{1}$ ... $A_{n + 1}$

Courbe de Bézier quadratique et cubique

En appliquant les résultats des deux paragraphes précédents, on peut construire récursivement les courbes de degré 2 ou plus. Par exemple pour les courbes quadratiques, on considère les deux courbes de Bézier de points de contrôle $A_{0}, A_{1}$ et $A_{1}, A_{2}$ qui ne sont rien d'autre que les segments $[A_{0}, A_{1}]$ et $[A_{1}, A_{0}]$ . En faisant parcourir les points $G_{1} (t)$ et $G_{2} (t)$ sur ces segments, et en prenant le barycentre comme indiqué plus haut, on obtient :

Allure d'une courbe de Bézier de degré 2 A_0 A_1 A_2 G1(0,25) G2(0,25) G(0,25)

De la même façon, on obtiendrait une courbe de Bézier cubique à l'aide de deux courbes de Bézier quadratiques et ainsi de suite.

Application au dessin vectoriel

Dans la pratique, on s'intéresse surtout au courbe de Bézier linéaires, quadratiques et cubiques. Ces courbes sont en effets plus facile à calculer pour l'ordinateur et plus facile à concevoir pour le graphiste (peu de gens sont capables d'imaginer des courbes de Bézier de degré 18 à partir de ses points de contrôle).

Pour obtenir des courbes plus complexes, il suffit de relier plusieurs courbes de Bézier entre elles en faisant en sorte que le dernier point d'une courbe soit le premier de la suivante, ce qui est facile puisque les points de contrôle extrémaux appartiennent à la courbe. On obtient alors la notion de "chemin" que l'on retrouve dans divers logiciels d'image comme Gimp, Dia, Inkscape.

Les images SVG

En SVG, un chemin est défini par l'élément <path/>. Son attribut d est une chaine de caractères indiquant une succession de déplacements qui réalise un tracé comme si on avait un crayon. Le point courant est le dernier point tracé (position du crayon). Un déplacement est indiqué par lettre suivie d'une liste de coordonnées. Il existe divers types de déplacement en SVG (en) dont en voici une partie :

Mx,y positionne le point courant en (x,y), ce qui correspondrait à lever son crayon et à le placer sur ce point.
Lx,y trace une ligne du point courant jusqu'en (x,y).
Qx1,y1 x,y trace une courbe de Bézier quadratique jusqu'en (x,y) avec (x1,x1) comme point de contrôle.
Cx1,y1 x2,y2 x,y trace une courbe de Bézier cubique jusqu'en (x,y) avec pour points de contrôle (x1,y1) et (x2,y2).
z ferme le chemin, c'est-à-dire trace une ligne droite du point courant jusqu'au point de départ.
A pour tracer des arcs elliptiques.

Notons que si plusieurs déplacements successifs sont de même type, on est pas obliger de répeter la lettre. Voici un exemple de chemin en SVG enchainant courbe de Bézier linéaire, quadratique et cubique ainsi que le tracé qu'il produit :

<path d="M200,100 L200,200 Q100,299 50,200 C100,20 210,0 390,90"
      fill="none" stroke="black" stroke-width="2"/>

Une exemple de chemin en SVG

Les points de raccordement

Pour un point de raccordement, l'avant dernier point de la courbe précédente et le second point de la courbe suivante jouent un rôle particulier puisqu'il dirige les demi-tangentes. Dans les logiciels de traitement d'images, on trouve généralement trois types de contrôle :

Dur : ces deux points peuvent être déplacés indépendamment.
Doux : les points sont alignés avec le point de raccordement, donnant ainsi une tangente en ce point.
Symétrique : Idem, mais avec en plus un positionnement des points symétrique. En SVG, cela peut être obtenu en utilisant les commandes T et S à la place de Q et C.

Références

Wikipedia, article Bézier Curve
Scalable Vector Graphics (SVG) 1.1 Specification, W3C Recommendation. Chapitre 8 : "Paths"

Auteur : Frédéric WANG