Vis à vis, par Herwig Hauser et Sebastian Gann

Le logo du CNRS

Courbes de Bézier et dessin vectoriel

Le 1er mai 2009, par Didier Henrion

Chercheur CNRS au LAAS à Toulouse, et professeur associé à l'Université Technique Tchèque de Prague (page web)

Une nouvelle identité visuelle ?

Un matin d’octobre 2008, la lecture d’un article du Journal du CNRS [1] me fit découvrir avec étonnement le nouveau logo du CNRS :

JPEG - 60.3 ko

Ce logo a une forme arrondie qui m’a rappelé certains objets mathématiques sur lesquels je travaille dans le cadre de mes recherches [2], comme ceux représentés ci-dessous :

JPEG - 12.1 ko

Désirant en savoir plus, je me suis empressé de contacter Anne-Solweig Gremillet de la Direction de la Communication du CNRS, en lui demandant quel était l’objet mathématique se cachant derrière cette curieuse forme arrondie. Madame Gremillet m’a alors répondu que le graphiste concepteur du logo a utilisé le logiciel de création graphique vectorielle Adobe Illustrator, et elle m’a également renvoyé un fichier source du logo produit par ce logiciel. Dans le but de combler partiellement mon ignorance, j’ai alors consulté l’entrée Wikipédia consacrée à ce logiciel [3], d’où est extrait le passage suivant :

Les images vectorielles sont constituées de courbes générées par des formules mathématiques. L’un des outils principaux d’Illustrator étant « la plume » qui permet de tracer des courbes à l’aspect parfait grâce au placement de points d’ancrage et de tangentes qui vont en modifier la courbure. Un des avantages des images vectorielles est qu’elles ne sont pas dépendantes de la résolution, c’est-à-dire qu’elles ne perdent pas en qualité si on les agrandit.

Dominique Daurat, du Service de Documentation-Edition de mon laboratoire, m’a alors montré comment de telles formes courbes se généraient à l’aide de la plume. Et effectivement, le format vectoriel permet au logo de conserver une frontière harmonieusement arrondie, même après un fort agrandissement. Ce ne serait pas le cas avec le format matriciel, composé d’un tableau de pixels. Pour illustration, voici un exemple comparatif d’agrandissement d’une image vectorielle (à gauche) et matricielle (à droite) :

JPEG - 4.9 ko

On peut voir notamment l’effet d’escalier typique d’une image matricielle fortement agrandie [4].

L’entrée Wikipédia sur Adobe Illustrator mentionne également que :

La puissance et la simplicité d’Illustrator proviennent du choix de la courbe de Bézier comme élément de base

donnant ainsi un nom à l’objet mathématique permettant de décrire la forme arrondie du logo du CNRS. Un bref clic plus tard, je naviguais sur la page [5] dédiée aux courbes de Bézier. Un article récent [6] explique également que Pierre Bézier (1910-1999), ingénieur français travaillant chez Renault, avait mis au point au début des années 1960 ces courbes pour concevoir des pièces d’automobiles à l’aide d’ordinateurs.

Un peu de géométrie

Un point est repéré dans le plan par deux coordonnées : l’abscisse (coordonnée horizontale) et l’ordonnée (coordonnée verticale). Si on connaît les coordonnées de deux points, on peut calculer facilement les coordonnées de leur milieu : il suffit d’en prendre les demi-sommes. Par exemple si un premier point A a pour coordonnées (1,1) et un deuxième point B a pour coordonnées (5,3), alors le milieu du segment AB a pour coordonnées (\frac{1+5}{2},\frac{1+3}{2}) = (3,2). On note souvent ce milieu comme une moyenne des deux points : \frac{1}{2}A+\frac{1}{2}B.

JPEG - 28.3 ko

Plus généralement, si on dispose de deux points A et B et de deux nombres positifs a et b dont la somme est égale à 1, on peut considérer les moyennes des coordonnées de A et B en les affectant des coefficients a et b, de la même manière qu’on calcule la moyenne de deux notes d’un élève en les affectant de coefficients. On obtient ainsi un point que l’on note a A + b B et qu’on appelle le barycentre de A et B affecté des poids a et b. Nous avons vu que lorsque a= b=\frac{1}{2} on a tout simplement le milieu du segment. Si b=0 (une matière avec un coefficient nul !), on a évidemment 1A+0B=A. Les valeurs a=\frac{3}{4}, b=\frac{1}{4} correspondent à un point \frac{3}{4}A+ \frac{1}{4}B plus proche de A que de B. Supposer que la somme des coefficients est égale à 1 n’est pas important car il est bien clair que la moyenne de deux notes avec des coefficients 6 et 10 par exemple est la même que si les coefficients sont \frac{6}{16} et \frac{10}{16}. Lorsque le nombre réel t varie entre 0 et 1, le point (1-t)A+tB décrit tout l’intervalle AB.

On peut faire la même chose avec trois points A,B,C et trois poids a,b,c positifs tels que a+b+c=1 et on obtient un barycentre aA+bB+cC. Lorsque les points sont fixés mais que les poids varient, le barycentre va décrire tout le triangle ABC :

JPEG - 11.6 ko

On peut faire la même chose avec quatre points A,B,C,D et quatre poids mais ici une petite surprise nous attend. L’ensemble des barycentres obtenus est ce qu’on appelle l’enveloppe convexe des quatre points et elle peut avoir plusieurs formes, comme le montrent les figures suivantes : ce peut être un quadrilatère (à gauche) mais aussi un triangle (à droite) :

JPEG - 22.6 ko

Et bien sûr, on peut faire la même chose avec un nombre quelconque de points. L’ensemble des barycentres est un polygone convexe. C’est l’occasion de dire qu’un polygone, ou une région du plan, est convexe, si le segment joignant deux de ses points est contenu dans la région en question. Voici un exemple d’ensemble convexe (à gauche) et d’ensemble non-convexe (à droite, le segment reliant les deux points sort de l’ensemble) :

JPEG - 29.3 ko

Courbes de Bézier

Une courbe est décrite par la pointe d’un crayon sur une feuille de papier... Mathématiquement, pour décrire une courbe, il s’agit de dire où ce situe cette pointe à chaque instant t. Il faut donner un instant où on commence à dessiner et un autre où on s’arrête, c’est-à-dire qu’on demande à t de décrire un intervalle, typiquement [0,1].

Supposons qu’on dispose de deux points A,B et qu’on souhaite les joindre par la courbe « la plus simple possible ». Pas de surprise : le segment AB fait l’affaire. Comment en décrire les points ? Nous venons de voir que le langage des barycentres est bien adapté. Au temps t de l’intervalle [0,1] on affecte les points A et B des poids 1-t et t et on considère leur barycentre (1-t)A + t B. Lorsque t=0 on trouve A et lorsque t=1, on est en B si bien qu’on a décrit le segment AB. C’était facile !

Maintenant, supposons qu’on dispose de trois points A,B,C et qu’on cherche une courbe allant de A à C tout en restant dans le triangle ABC. Bien sûr on pourrait prendre le segment AB suivi par le segment BC mais la courbe aurait un coin et ce n’est pas joli. On cherche donc un compromis. On utilise bien sûr un barycentre ! Il nous faut trouver, pour chaque t, trois poids a,b,c qu’il faut affecter aux trois points. On cherche trois nombres positifs dont la somme fait 1. Il y a beaucoup de manière de faire bien sûr, mais une idée simple est la suivante. On part de ce que nous avons utilisé pour deux points :

1= (1-t)+t

et on élève cela au carré tout simplement. On trouve :

1= (1-t)^2 + 2 (1-t)t + t^2.

Et voilà, nous avons trois nombres dont la somme fait 1. Il suffit donc d’affecter A,B,C des poids a=(1-t)^2, \: b= 2(1-t)t, \: c = t^2. Lorsque t varie entre 0 et 1, le barycentre va décrire une courbe qui part de A et qui arrive en C. Dans ce cas, cette courbe est très simple, c’est une courbe quadratique que l’on l’appelle une parabole :

JPEG - 11.6 ko

On peut démontrer que cette parabole démarre du point A dans la direction du point B, c’est-à-dire le long du segment AB. On dit que la courbe est tangente en A au segment AB. De la même manière, la parabole est tangente en C au segment BC.

Et si on a quatre points A,B,C,D ? Il nous faut maintenant quatre nombres dont la somme fait 1 et il faut savoir élever 1= (1-t)+t au cube ! Voilà le résultat :

1= (1-t)^3 + 3 (1-t)^2t + 3(1-t)t^2 + t^3

et on choisit donc les poids

a=(1-t)^3, \: \quad b= 3(1-t)^2t, \: \quad c = 3(1-t)t^2, \: \quad d= t^3.

On obtient ainsi la courbe de Bézier qui part de A, va jusque D et fait ce qu’elle peut pour être à la fois bien lisse, tangente en A au segment AB et tangente en D au segment CD. On dit que c’est une courbe cubique puisque les poids sont des polynômes de degré 3 du paramètre t. Rappelons au passage qu’une fonction f(t) est un polynôme si elle s’exprime comme une somme de monômes qui sont des puissances de t affectés de certains coefficients. Des exemples valent mieux qu’une définition : f(t)=2t+3 est un polynôme du premier degré et f(t)=2t^3-t^2+t-7 est un polynôme du troisième degré.

Voici quelques exemples de courbes de Bézier cubiques :

JPEG - 53 ko

Et si on a plus de points ? C’est la même chose. Bien sûr, il faut savoir élever l’égalité 1= (1-t)+t à la puissance n-ème !

Il existe des méthodes efficaces pour évaluer les courbes de Bézier, proposées par Paul de Casteljau dans les années 1960s alors qu’il était ingénieur chez Citroën.

Ces courbes sont maintenant omniprésentes dans les applications de dessin vectoriel. Les polices TrueType, initialement développées par Apple, utilisent des courbes de Bézier quadratiques. Les polices de caractères Type 1 et Type 3, développées par Adobe, utilisent des courbes de Bézier cubiques. L’outil plume d’Illustrator, utilisé pour dessiner le logo du CNRS, utilise également des courbes de Bézier cubiques.

Le logo

Le fichier source du logo du CNRS contient donc des instructions PostScript de tracé de courbes de Bézier. La documentation de référence de ce langage [7] indique qu’elles sont générées à l’aide de la commande curveto. Une recherche de cette commande dans le fichier PostScript renvoie à la portion de code ci-dessous :

que l’on peut interpréter de la manière suivante. La première ligne indique le point de départ (abscisse et ordonnée), mo étant un raccourci pour l’instruction PostScript moveto. Il s’agit donc des coordonnées du point A d’une première courbe de Bézier. Les lignes suivantes contiennent les coordonnées de points B, C, D de courbes cubiques, cv étant un raccourci pour l’instruction PostScript curveto. La courbe suivante est tracée à partir du dernier point de la courbe précédente. On peut ainsi remarquer que les coordonnées du dernier point de la dernière courbe sont les mêmes que celles du premier point de la première courbe. La forme du logo du CNRS, une courbe fermée, est donc constituée d’une suite de 11 courbes de Bézier cubiques, dont voici une reconstitution [8] avec ses 33 points de contrôle :

JPEG - 14.1 ko

Des courbes... et des surfaces

Puisque les coordonnées (abscisse et ordonnée) d’un point (x,y) situé sur une courbe de Bézier dépendent de manière polynomiale en le paramètre t, on parle de courbe paramétrée polynomiale. En général, les coordonnées des points d’une courbe paramétrée polynomiale s’écrivent :

\begin{array}{rcl} x & = & f(t) \\ y & = & g(t) \end{array}

f(t) et g(t) sont des polynômes en t. Cela peut se généraliser aux courbes paramétrées rationnelles dans le plan, dont les coordonnées s’écrivent :

\begin{array}{rcl} x & = & \frac{f(t)}{d(t)} \\ y & = & \frac{g(t)}{d(t)} \\ \end{array}

f(t), g(t), d(t) sont des polynômes en le paramètre t : on a ajouté la possibilité d’un dénominateur d(t). Les courbes polynomiales, dont un cas particulier sont les courbes de Bézier, correspondent donc au choix du dénominateur d(t)=1. Dans l’espace, un point est repéré par trois coordonnées (x,y,z) et on peut également décrire des courbes paramétrées rationnelles, que l’on appelle parfois courbes gauches.

On peut étendre cette idée aux surfaces dans l’espace, à condition d’utiliser un deuxième paramètre. Par exemple, sur le globe terrestre la position est donnée par la longitude et la latitude, c’est-à-dire deux paramètres. En général une surface paramétrée rationnelle sera constituée de points de coordonnées :

\begin{array}{rcl} x & = & \frac{f(s,t)}{d(s,t)} \\ y & = & \frac{g(s,t)}{d(s,t)} \\ z & = & \frac{h(s,t)}{d(s,t)} \end{array}

f(s,t),g(s,t),h(s,t),d(s,t) sont des polynômes en les paramètres s et t. Un polynôme en deux variables est une somme de monômes, comme par exemple f(s,t) = 8s^7t^3-2st^2+9.

Des exemples célèbres de surfaces rationnelles sont la surface romaine de Steiner, dont voici deux représentations :

JPEG - 46.9 ko

ou encore la surface de Boy [9]. Sans entrer plus dans les détails techniques, on peut mentionner que les surfaces rationnelles paramétrées sont systématiquement utilisées en conception assistée par ordinateur (CAO) dans la mise au point de nombreux systèmes d’ingénierie. Par exemple, le logiciel CATIA (Computer Aided Three-dimensional Interactive Application), développé depuis 1981 par l’entreprise française Dassault Systèmes, utilise les surfaces paramétrées rationnelles comme éléments de base. A l’origine CATIA fut conçu pour mettre au point l’avion de chasse Mirage, et ensuite il fut adopté par les industries aérospatiale, automobile et navale. Par exemple, les avions de la gamme Airbus sont conçus à Toulouse notamment à l’aide de CATIA. Certains architectes, comme par exemple Frank Gehry, utilisent les surfaces paramétrées rationnelles pour concevoir leurs bâtiments curvilignes. Ainsi, le poisson ou baleine (peix en catalan) du port olympique de Barcelone (1992) est le premier exemple de réalisation utilisant CATIA :

JPEG - 65.8 ko

D’autres exemples sont la maison dansante à Prague (1996) :

JPEG - 122 ko

ou encore le musée Guggenheim à Bilbao (1997) :

JPEG - 47.2 ko

Aujourd’hui, les propriétés géométriques des surfaces paramétrées rationnelles sont souvent étudiées à l’aide des propriétés algébriques des polynômes les définissant. Ces techniques de géométrie algébrique réelle, une branche active des mathématiques appliquées, ont de nombreux débouchés en CAO. Encore plus récemment, ces techniques ont été couplées avec des méthodes de programmation mathématique et d’optimisation, permettant aux ingénieurs de concevoir des systèmes plus performants. Dans le cadre de mes travaux, j’ai par exemple utilisé ces techniques pour développer des outils de régulation de moteurs d’avions permettant une mise au point plus rapide et plus efficace, ceci malgré la forte variabilité des dynamiques en fonction de l’enveloppe de vol (vitesse, altitude, régime moteur).

P.S. :

Merci à Etienne Ghys pour son aide à la rédaction des paragraphes techniques .

Notes

[1] C. Zeitoun. Une nouvelle identité visuelle pour le CNRS. Le Journal du CNRS, 225, p. 34, octobre 2008.

[2] Pour les curieux, il s’agit de coupes et de projections du cône des matrices symétriques à valeurs propres non-n égatives. Ce cône est utilisé en programmation mathématique, notamment pour généraliser la programmation linéaire. Il apparaît également en théorie de la commande, dans des problémes d’étude de stabilité et de stabilisation de solutions d’équations différentielles.

[3] fr.wikipedia.org/wiki/Adobe_Illustrator

[4] En fait, toutes les images de cet article sont au format matriciel. Pour apprécier l’effet d’agrandissement d’une image vectorielle, on pourra télécharger le logo du CNRS au format PDF.

[5] fr.wikipedia.org/wiki/Courbe_de_Bezier

[6] J. J. Dupas. Les lobes de Bézier. Tangente, 125, pp. 24-26, novembre-décembre 2008.

[7] Adobe Systems Incorporated. PostScript language reference. Third edition. Addison-Wesley, 1999.

[8] Voir aussi [D. Henrion. Le logo du CNRS est-il convexe ? Matapli, 88, pp. 63-71, février 2009] pour une étude de la convexité du logo du CNRS.

[9] Voir [J. P. Petit. Le Topologicon. Belin, 1999] pour une évocation de la surface de Boy

Affiliation de l'auteur

CNRS; LAAS; 7 avenue du colonel Roche, F-31077 Toulouse; France ; Université de Toulouse; UPS, INSA, INP, ISAE; LAAS; F-31077 Toulouse; France Faculty of Electrical Engineering, Czech Technical University in Prague, Technická 2, CZ-16626 Prague, Czech Republic

Il y a 4 commentaires sur cet article ...