Travaux sur Machine de aci
7. Le vectoriel, c’est fait pour être animé

La norme SVG propose deux moyens pour animer ses dessins vectoriels :

La version 1.5 de Firefox n’implémente que la première catégorie. La deuxième est cependant simulable par la bibliothèque SmilScript écrite en JavaScript et affectant dynamiquement le DOM. Le but de la séance est d’en maîtriser les principes, en essayant d’animer les polygones étudiées à la séance précédente.

On trouvera sur le site de Programmation réticulaire en licence de quoi rafraîchir sa mémoire sur JavaScript et le DOM.



1 Trigo stérile

Le tracé des polygones à la séance précédente reposait sur une multitude de balises line et g. Pour animer facilement la figure produite, il faut d’abord la transformer en balise path avec son attribut d utilisant une fois la commande M avec deux arguments (pour fixer un point de départ absolu) puis (pour tracer des droites en coordonnées relatives) la commande l avec 2 n arguments, où n est le nombre de côtés de la figure à tracer. En l’absence d’opérateur de rotation, il faut calculer les coordonnées de chaque point par trigométrie.

Ecrire une fonction Javascript, construisant cet attribut d à partir d’un angle, une longueur et un point d’origine, ainsi que d’un angle d’origine (on aura besoin plus tard d’une ligne initiale non nécessairement horizontale). On utilisera l’objet JavaScript Math, ses méthodes cos et sin et sa propriétés PI.


Obtenir un formulaire de soumission de comptes rendus

2 Attribut dynamique

Ecrire un document SVG comportant successivement une balise script (pour accueillir la fonction précédente), une balise text (pour donner un titre) et une balise path (pour positionner l’épaisseur de tracé et l’absence de remplissage). Donner à la balise svg initiale un attribut onload appelant une fonction JavaScript initialisant l’attribut d de la balise path (qui aura aussi un attribut id afin d’être facilement accessible par document.getElementById.

Rajouter ensuite un attribut onclick à la balise path, afin d’appeler une autre fonction qui provoquera le calcul d’un nouveau tracé, en modifiant l’angle à la base du tracé. On prendre les mêmes couples (nombre de tours, nombre de côtés) vus à la séance précédente pour avoir une suite intéressante, et on modifiera le titre dans la balise text afin qu’il indique en permanence le couple utilisé pour l’angle à la base de la figure.


Obtenir un formulaire de soumission de comptes rendus

3 Ca tourne

En utilisant la fonction Timeout de JavaScript, changer votre script afin que les figures produites tournent autour de leur point d’origine.


Obtenir un formulaire de soumission de comptes rendus

logo-spip E. Saint-James & F. Kordon - Master Informatique - UPMC Valid XHTML 1.0!
Calculé le 21 janvier 2021 à 19h47min