HELLO FLASH !


Nouveautés
Contact
Livre d'or
Accueil

CATEGORIES


ActionScript (0)
Bézier (2)
Physique (3)
Effets de texte (0)
Effets d'image (3)
Création (1)
Outils (1)

ARCHIVES


courbe de lumière
balle et courbe
ruban de Bézier
bouger sur une courbe
drag sur une courbe
drag d'une courbe
lettres de glace
bulles de savon
image chewing-gum
image sinusoïdale
vissage
image déformable
image cylindrique
bras préhensile
fonctions
pantin articulé
prismes droits
rhéostats
étiquette suspendue
courbes de Bézier
longueur d'une courbe
courbe avec pointillés

BEST OF


bras préhensile
image sinusoïdale
rebond sur Bézier
ville à vélo
Mona Lisa
pantin
lettres de glace
image cylindrique

LIENS


Paul Prudence
MyPhysicLab
Thimotée Groleau
MathCurve
Alcys
Maths magiques
MetanetSoftware (A)
MetanetSoftware (B)
Orisinal
Vincent Crublé

Coup de Coeur



SITES PARTENAIRES

ABC Webmasters

Positron Libre

Webrankinfo

Les courbes de Bézier
Publié par Gilles Bernard le 10 juin 2013 - [Catégorie : physique]  

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).

schema

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 :

\mathbf{B}(t)=(1-t)\mathbf{P}_0 + t\mathbf{P}_1 \mbox{ , } t \in [0,1].

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 :

\mathbf{B}(t) = (1 - t)^{2}\mathbf{P_0} + 2t(1 - t)\mathbf{P_1} + t^{2}\mathbf{P_2} \mbox{ , } t \in [0,1].

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 :

\mathbf{B}(t)=\mathbf{P_0}(1-t)^3+3\mathbf{P_1}t(1-t)^2+3\mathbf{P_2}t^2(1-t)+\mathbf{P_3}t^3 \mbox{ , } t \in [0,1].

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 :

\sum_{i=0}^n B_i^n(t)\mathbf{P}_i \mbox{ , } t \in [0,1]

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.

Longueur d’une courbe quadratique de Bézier
Publié par Gilles Bernard le 15 juin 2013 - [Catégorie : physique] - Difficulté : niveau 4

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.


 
 
Pointillés sur une courbe quadratique de Bézier  
Publié par Gilles Bernard le 17 juin 2013 - [Catégorie : physique] - Difficulté : niveau 3  
 

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.

Télécharger le ZIP (9.8 Ko)

Autres articles

- Rebond d'une balle à l'intérieur d'une courbe de Bézier quadratique

- Déplacement d'une phrase sur une courbe de Bézier quadratique
- Déplacement d'une courbe de Bézier quadratique
page suivante »