ABC Webmasters

Positron Libre

Webrankinfo

Barycentre

Un point est repéré dans le plan par son abscisse et son ordonnée. On peut facilement déterminer le milieu de 2 points en effectuant la demi-somme de leurs coordonnées. Par exemple, si P0 a pour coordonnées (1, 1) et P1 (4, 2), le milieu du segment [P0P1] aura pour coordonnées ((1+4)/2, (1+2)/2) = (2,5, 1,5).

Au-delà, on peut considérer les moyennes des coordonnées de P0 et P1 affectées de coefficients a et b dont la somme est égale à 1. On définit ainsi un point aP0 + bP1 nommé barycentre des points P0 et P1 affectés respectivement des poids a et b. Quand a = b = 1/2, il se situe au milieu du segment. Si b = 0, 1P0 + 0P1 = P0 : il se situe en P0. Lorsque t varie entre 0 et 1, le point B(t) = (1 - t) P0 + t P1 décrit tout le segment [P0P1].

La forme paramétrique de la courbe s’écrit :

Les coordonnées des points de cette courbe se représentent sous la forme classique où x = f(t), et y = g(t) sont des polynômes en t. Elle trouve ainsi sa matérialisation dans le code :

// courbe de Bézier linéaire (polynôme du 1er degré)

function getLinBezPt(p0:Number, p1:Number, t:Number):Number
{
	return p0 * (1 - t) + p1 * t;
}

// position du barycentre, 0 < t < 1

b.x = getLinBezPt(pt0.x, pt1.x, t); // (x = f(t))
b.y = getLinBezPt(pt0.y, pt1.x, t); // (y = g(t))

Courbe de Bézier quadratique

Pour tracer une courbe on déplace la plume d’un stylo d’un point à un autre. La définition mathématique de cette courbe revient à situer la plume à chaque instant t. C’est ce que l’on a fait en joignant 2 points P0 et P1 en ligne droite grâce aux barycentres.

Au temps t de l’intervalle [0, 1] on affecte les points P0 et P1 de poids 1 - t et t, et on considère leur barycentre (1 - t) P0 + t P1. Lorsque t = 0 on trouve P0 et lorsque t = 1, on est en P1 si bien qu’on a décrit le segment [P0P1].

Si on cherche maintenant à relier 3 points P0, P1 et P2, en partant de P0 pour aller à P2 en passant par P1, on peut commencer par tracer les segments [P0P1] puis [P1P2]. L’on peut aussi arrondir le trajet en trouvant 3 poids a, b et c à affecter à ces points. Une solution est de partir de l’équation du premier degré (1 - t) + t = 1, pour l’élever au carré : (1 - t)2 + 2 (1 - t) t + t2 = 1. L’on obtient ainsi 3 nombres dont la somme fait 1 et que l’on peut affecter à nos points :

Le barycentre décrira une courbe quadratique qui partira de P0 pour aller à P2 en « se rapprochant » de P1, nommée parabole. Cette courbe polynomiale paramétrique peut se formaliser par le code :

// courbe de Bézier quadratique (polynôme du 2e degré)

function getQuadBezPt(p0:Number, p1:Number, p2:Number, t:Number):Number
{
	return p0 * (1 - t) * (1 - t) + 2 * p1 * (1 - t) * t + p2 * t * t;
}

// position du barycentre, 0 < t < 1

b.x = getQuadBezPt (pt0.x, pt1.x, pt2.x, t); // (x = f(t))
b.y = getQuadBezPt (pt0.y, pt1.x, pt2.y, t); // (y = g(t))

Les courbes de Bézier linéaire et quadratique (tracées par les fonctions lineTo et curveTo de Flash) mathématiquement définies comme l'ensemble des barycentres de leurs points de contrôle affectés de leurs poids respectifs lorsque t varie entre 0 et 1.

Survolez les images.
 

L’on peut de la même façon obtenir une courbe cubique (formée par un polynôme du 3e degré) à partir de 4 points de contrôle en élevant (1 - t) + t = 1 au cube : (1 - t)3 + 3 (1 - t)2 t + 3 (1 - t) t2 + t3 = 1. Sa forme paramétrique est :

De manière générale, pour n + 1 points de contrôle (), on définit une courbe de Bézier par l'ensemble des points :

et où les sont des polynômes de Bernstein. Le polygone est appelé polygone convexe de Bézier.

Visualisation

Courbe quadratique
avec son ancre.

Courbe cubique
avec ses 2 ancres.

Dans la majorité des cas, quelles que soient les « formules clés en main », l’estimation de la longueur d'un arc est d'une rare complexité, voire impossible à calculer exactement.

Le calcul de l’intégrale elliptique pour déterminer la longueur d’une courbe quadratique de Bézier est décrit ici. Il se compose in fine d’un nombre modeste d’opérations : quelques multiplications et additions, 3 racines carrées et un log. Il est précis pour une courbe quadratique de Bézier de n’importe quelle taille.

Il se traduit simplement dans le code :

function BezierLen(p0:MovieClip, p1:MovieClip, p2:MovieClip):Number
{
	var ax:Number = p0.x - 2 * p1.x + p2.x;
	var ay:Number = p0.y - 2 * p1.y + p2.y;
	var bx:Number = 2 * p1.x - 2 * p0.x;
	var by:Number = 2 * p1.y - 2 * p0.y;

	var a:Number = 4 * (ax * ax + ay * ay);
	var b:Number = 4 * (ax * bx + ay * by);
	var c:Number = bx * bx + by * by;

	var abc:Number = 2 * Math.sqrt(a + b + c);
	var a2:Number  = Math.sqrt(a);
	var a32:Number = 2 * a * a2;
	var c2:Number  = 2 * Math.sqrt(c);
	var ba:Number  = b / a2;

	return (a32 * abc + a2 * b * (abc - c2) + (4 * c * a - b * b)
	* Math.log((2 * a2 + ba + abc) / (ba + c2))) / (4 * a32);
}

L’algorithmist propose une comparaison intéressante entre plusieurs méthodes qui montre d’ailleurs combien le calcul de la longueur d’un arc reste une approximation. Il semble que la résolution par l’intégrale elliptique ci-dessus soit la plus efficiente, bien qu’elle ne s’applique qu’à la longueur de la courbe à t = 1. Elle ne fournirait donc pas la capacité de calculer efficacement la longueur d’un arc à une valeur arbitraire de t dans [0, 1].

Ainsi, Jim Armstrong propose l’intégration numérique : « 5 points d'une quadrature de Gauss produisent une très bonne approximation de la longueur totale de la courbe, autant que d’une longueur d’arc pour toute valeur du paramètre t dans [0, 1] ».

Notons cependant que l’on peut très bien calculer la longueur d’un arc de la courbe grâce à l’intégrale elliptique. Les seules choses dont nous ayons besoin sont les coordonnées des 3 points de contrôle. Si les 2 premières nous sont fournies par le paramètre t (A0 et A2), celles de la poignée correspondante (A1) peut être calculée en utilisant l’algorithme de Casteljau. Voici le calcul de la longueur d’un arc grâce à la solution de l’intégrale :

Déplacez les points noirs ou rouges
pour modifier la longueur de la courbe ou de l’arc.

Tracer des pointillés réguliers sur une courbe quadratique de Bézier suppose de la diviser en arcs d’égale longueur. Ce calcul effectué grâce à l’intégrale elliptique ou par le biais des points d'une quadrature de Gauss produirait une très bonne approximation.

On peut cependant arriver à un résultat acceptable en utilisant un code léger avec une simple boucle qui évalue le cumul de petites distances tout au long de la courbe. La marge de précision est de l'ordre de .05 pixel et invisible à l’œil nu. Le puriste préférera peut-être le calcul de l'intégrale, mais comme le dirait mon ami Jean-Louis Gaujal : « pour bien programmer en Flash... il faut parfois se comporter comme un voyou de la logique, un Arsène Lupin du raisonnement organisé, un flibustier de l'algorithmique... » !

Déplacez les ancres.

Autres articles