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

Déplacement d'un mot sur une courbe de Bézier
Publié par Gilles Bernard le 10 juin 2013 - [Catégorie : Bézier] - Difficulté : niveau 4

Ce logotype évoluant sur une courbe quadratique de Bézier est la mise en application des articles précédents... Comme vous le constatez, il est possible de créer l’illusion et de faire se déplacer une typographie manuscrite sur une courbe en disposant judicieusement les liens entre ses différents éléments.

Le mouvement d’une instance dont les coordonnées sont calculées via la forme paramétrique de la courbe de Bézier n’est pas uniforme. Une méthode a donc été employée pour tronçonner la courbe en de multiples parties égales. Ainsi les lettres disposées sur cette échelle la parcourent à vitesse constante.



Survolez l'image.

Drag d'un mot sur une courbe de Bézier
Publié par Gilles Bernard le 11 juin 2013 - [Catégorie : Bézier] - Difficulté : niveau 3


Appuyez sur la touche D
pour visualiser ou non la construction.

Coder le drag d’un mot sur une courbe quadratique de Bézier est assez instructif. L’on peut imaginer plusieurs algorithmes pour placer un objet quelconque sur la courbe en fonction des coordonnées du pointeur. Selon le choix le résultat est légèrement différent.

Si on recherche le projeté de la souris sur le segment formé par les 2 ancres bleues parallèlement à l’axe passant par son milieu et la poignée rouge, et qu’on reporte la position du barycentre de cette courbe de Bézier linéaire sur la quadratique (fig.1) : on drague le texte facilement mais avec une relative imprécision. Si l’on détermine le point le plus proche de la courbe, on permet au texte d'être dragué grâce à une tirette (fig.2). Deux alternatives sont possibles pour arriver à ce dernier résultat. Elles diffèrent par leur consommation de mémoire et leur complexité. La solution a priori la plus économique et fluide surmonte ce problème par la résolution d'une équation de degré 3, alors que l’autre se contente d'évaluer la distance par balayage de la courbe via son instant 't' dans une boucle for.

 

fig.1 - Algorithme de projection

Le point jaune, projeté de la souris sur le segment formé par les 2 points bleus parallèlement à la droite formée par la poignée rouge et le milieu dudit segment, voit ses coordonnées relatives par rapport à ces 2 points converties en instant ‘t’ sur la courbe, formalisé par le point noir.

 

fig. 2 - Algorithmes de distance à la courbe

Evaluent de 2 façons différentes – par balayage ou résolution d’une équation de degré 3 – la plus courte distance de la souris à la courbe. Au point jaune symbolisant la souris vient s’associer le point noir le plus proche.

 

L’on peut donc trouver le point le plus proche de la courbe pour y poser un élément. Déplacer un mot entier n'est guère plus compliqué : on décide de l’espacement des lettres en attribuant une valeur de t propre à chacun de leurs barycentres, à laquelle on ajoute le delta entre la valeur t du barycentre le plus proche de la souris au relâcher et celle au cliquer suivant.

On remarque que l’interlettrage varie en fonction de la situation des éléments. Dans l’exercice suivant : Déplacement d'un mot sur une courbe de Bézier, j'ai imprimé un mouvement uniforme à des lettres en fragmentant la courbe en espaces réguliers.

 

Drag d'une courbe de Bézier
Publié par Gilles Bernard le 15 juin 2013 - [Catégorie : bézier] - Difficulté : niveau 3

L'exercice consiste à effectuer le drag d'une courbe quadratique de Bézier, et plus classiquement à déplacer ses extrémités.

Le dispositif suivant se compose de 2 ancres bleues (P0 et P2), de leur poignée rouge (P1), d'un point jaune qui est le projeté du point d'application de l'utilisateur sur le segment [P0P2] parallèlement à la droite passant par P1 et le milieu de [P0P2]. On cherche à déterminer la position du point noir qui est le projeté du point jaune sur la courbe. Elle est calculée en fonction de la situation de ce dernier sur le segment [P0P2].

A la projection jaune de la souris sur le segment [P0P2] correspond une valeur t (ce segment étant l'ensemble des barycentres des points P0 et P2 affectés respectivement des poids (1 - t) et t lorsque t varie entre 0 et 1). Cette valeur t est reprise telle quelle pour déterminer la position du point noir sur la courbe (la courbe de Bézier formalisée par curveTo étant mathématiquement définie comme l'ensemble des barycentres des points P0, P1 et P2 affectés respectivement des poids (1 - t)², 2 * (1 - t) * t et t² lorsque t varie entre 0 et 1).

La première étape pour réaliser l'animation est donc de trouver les coordonnées d'un point de la courbe (symbolisé par le rond noir) lorsque qu'on clique dessus ou à proximité. L'algorithme adopté est lié à la projection du point d'appui sur le segment [P0P2]. Il aurait pu être plus complexe que l'animation elle-même : repérer le point de la courbe le plus proche de la souris suppose la résolution d'une équation de degré 3 ou de balayer les points de la courbe dans une boucle incrémentant t. Ce petit algorithme est suffisant pour l'animation, les précédentes méthodes étant néanmoins utiles à d'autres égards.

 


Appuyez sur la touche D
pour visualiser ou non la construction.

Dans l'animation finale, nous trouvons une valeur de t qui intégrée à l'équation quadratique de Bézier nous permet de situer le point d'application sur la courbe. Lors du mouvement qui suit, nous recherchons par la même équation quadratique de Bézier la position de la poignée rouge lorsque l'on déplace ce point noir.

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

Si le premier temps revient donc à déterminer grâce à la forme paramétrique de la courbe la position du point noir en fonction de P0, P1, P2 et t ; le second temps revient à l'inverse – en changeant l'inconnue de cette équation – à déterminer la position de P1 en fonction de P0, P2, du point noir désormais connu, et du même t.

L'animation finale, dépouillée de tous ses artifices...

 


Tirez sur la courbe ou ses extrémités.
 

Rajout d'élasticité

Lors du lâcher, on évalue les positions de p0, p2 et p1. p1 va se déplacer jusqu'à une position opposée en passant par le milieu du segment [p0p2], puis renvenir. A chaque passage, il ira un peu moins loin jusqu'à ce que la courbe soit stabilisée en tant que droite, c'est-à-dire lorsque le point p1 sera au milieu du segment [p0p2].


Faites jouer l'élastique.
 

 
page suivante »