Précédent : Bezier Curves Big Circus 2 trans

Mode lecture article sur le site Philippe Brouard / ingénieur artiste

08 février 2023

Approche de l’arc de cercle avec des courbes de Bézier

Comment relier des points de façon harmonieuse

Pour relier un point A à un point B sur un plan (ou à l’écran) on peut tracer simplement une droite. Pour aller plus loin, comme dans le jeu traditionnel consistant à relier les points https://fr.wikipedia.org/wiki/Relier_les_poi..., on peut définir un chemin arrondi à l’aide de quelques points supplémentaires : les points de contrôle.

Je me suis intéressé à cette problématique au tout début de l’élaboration du programme splineScreen. Les outils de composition de tracés numériques comportent des fonctions pour manipuler les courbes de Bézier https://fr.wikipedia.org/wiki/Courbe_de_B%C3... mais il reste une difficulté : comment déterminer la position des points de contrôle ? Pour mieux comprendre le calcul, il faut se donner une mission simple, par exemple tracer un arc de cercle le plus justement possible.

Prenons un cercle de rayon 300 pixels, dont le centre est situé aux coordonnées x y 600 400. Les coordonnées des points du cercle sont définies par les fonctions mathématiques cosinus et sinus en fonction de l’angle a :

  • x = 600 + 300 * cos(a)
  • y = 400 + 300 * sin(a)

Avec ces simples équations on pourrait dessiner le cercle pixels par pixels, mais ça serait long à faire et pas très harmonieux (pixelisé). La méthode des polynômes de Bézier est plus créative pour faire des courbes, on pourra remplir tous les pixels du cercle en reliant 6 arcs de cercle seulement. Il existe principalement deux méthodes, quadratique définie par un polynôme de degré 2, cubique définie par un polynôme de degré 3

  • P(t) = PA*(1 − t)^2 + 2*PC*t (1 − t) + PB*t^2 pour t ∈ [0,1] du point A au point B
  • P(t) = PA*(1 − t)^3 + 3*PC*t (1 − t)^2 + 3*PD*t^2*(1 − t) + PB*t^3 pour t ∈ [0,1] du point A au point B

Les points intermédiaires C et D sont les points contrôle. La courbe de Bézier ne passe pas par ces points, ils servent de guide pour la courbure. Pour calculer la position des points de contrôle, j’ai choisi d’utiliser une astuce en m’intéressant au point situé au milieu de l’arc de cercle, je l’appelle le point M, ainsi qu’au point situé au milieu du segment entre les extrémités de l’arc de cercle, je l’appelle le point m. Le point de contrôle de l’arc pour la formule quadratique se situe quelque part sur la médiane mM. Les deux points de contrôle pour la formule cubique se situent quelque part sur les côtés du triangle de base AB et de sommet S (sécante de la moitié de l’angle de l’arc). Pour enfin trouver ce « quelque part », j’ai mis les équations dans une feuille de calcul (voir fichier joint en fin d'article), dans laquelle il est possible d’ajuster un coefficient pour chacune des formules, afin de trouver le bon réglage. Avec l'exemple de l'arc de cercle d'un angle de Pi/3, l'écart est au minimum quand le coefficient vaut 2,025 pour la courbe quadratique et quand le coefficient vaut 0,619 pour la courbe cubique.

Image article, Schéma géométrique pour le calcul des points de contrôle Bézier sur un arc de cercle Pi/3

Schéma géométrique pour le calcul des points de contrôle Bézier sur un arc de cercle Pi/3

En détail, les six arcs de cercle peuvent être tracés avec le code suivant dans un canvas html :

/* code en javascript, courbes de Bézier cubiques */
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#66cccc"; 
ctx.lineWidth = 3;
ctx.moveTo(900,400);
ctx.bezierCurveTo(900, 293, 843, 194, 750, 140);
ctx.bezierCurveTo(657, 87, 543, 87, 450, 140);
ctx.bezierCurveTo(357, 194, 300, 293, 300, 400);
ctx.bezierCurveTo(300, 507, 357, 606, 450, 660);
ctx.bezierCurveTo(543, 713, 657, 713, 750, 660);
ctx.bezierCurveTo(843, 606, 900, 507, 900, 400);
ctx.stroke();

Résultat :

fin

Les courbes de Bézier cubiques sont plus précises mais plus compliquées à positionner que les courbes quadratiques pour tracer une approche de l'arc de cercle. Si la courbure n'est pas très prononcée, la méthode quadratique donne un résultat satisfaisant, difficile de faire la différence avec le véritable arc de cercle.

Fichier joint (ko) :  Feuille de calcul ODS 

Calculs pour déterminer un coefficient quadratique et un coefficient cubique pour situer les points contrôles de la courbe de Bézier qui approche l'arc de cercle.

retour en haut