![]() |
|||||||||||
![]() |
|||||||||||
![]() |
![]() |
||||||||||
![]() ![]() ![]() Nouveautés Contact Livre d'or ![]() Accueil ![]() ![]() ![]() ActionScript (0) Bézier (2) Physique (3) Effets de texte (0) Effets d'image (3) Création (1) Outils (1) ![]() ![]() ![]() 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 ![]() ![]() ![]() bras préhensile image sinusoïdale rebond sur Bézier ville à vélo Mona Lisa pantin lettres de glace image cylindrique ![]() ![]() ![]() Paul Prudence MyPhysicLab Thimotée Groleau MathCurve Alcys Maths magiques MetanetSoftware (A) MetanetSoftware (B) Orisinal Vincent Crublé ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
|||||||||||
![]() |
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). |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
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 { |
|||||||||||
![]() |
|||||||||||
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 { |
|||||||||||
![]() |
|||||||||||
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.
|
|||||||||||
|
|||||||||||
![]() |
|||||||||||
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
( |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
et où les |
|||||||||||
![]() |
|||||||||||
Visualisation |
|||||||||||
|
|
||||||||||
![]() |
|||||||||||
Longueur d’une courbe quadratique de Bézier | |||||||||||
![]() |
|||||||||||
Publié par Gilles Bernard le 15 juin 2013 - [Catégorie : physique] - Difficulté : | ![]() |
||||||||||
![]() |
|||||||||||
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; |
|||||||||||
![]() |
|||||||||||
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 : |
|||||||||||
|
|||||||||||
![]() |
|||||||||||
Pointillés sur une courbe quadratique de Bézier | |||||||||||
![]() |
|||||||||||
Publié par Gilles Bernard le 17 juin 2013 - [Catégorie : physique] - Difficulté : | ![]() |
||||||||||
![]() |
|||||||||||
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... » !
|
|||||||||||
|
|||||||||||
![]() |
|||||||||||
![]() ![]() |
|||||||||||
![]() |
|||||||||||
|
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
|||||||||||
![]() |
page suivante » | ||||||||||
![]() |
|||||||||||