SVG: Voiture sur une route et programmation d'évènement
Démonstration d'une voiture roulant sur une route et déclenchant un évènement quand elle parvient à son but.
La voiture est une image que l'on ajoute dynamiquement au décor. Elle roule jusqu'au panneau "NEW YORK" qu'elle touche et fait pencher.
Pour réaliser cette animation, on définit un double but: 1) avancer et 2) faire tomber le panneau, ce qui s'écrit très simplement en programmation orienté but: on pose une relation ET entre la valeur de position x à atteindre, et l'appel d'une fonction qui incline le panneau.
La programme teste le second terme d'une relation ET seulement quand le premier a la valeur vrai. Donc tant que la position x n'a pas atteint la valeur donnée, la fonction n'est pas appelée.
Celle-ci retourne vrai quand on l'appelle, ce qui fait que les deux termes de la condition auront la valeur vrai et la condition sera satisfaite, le but est atteint et l'animation s'arrête.
Description du code source...
Composer le décor
On peint le ciel et la route avec deux rectangles et on insère deux images dans une balise svg pour créer un décor statique.
<svg id="road" width="640" height="250">
<rect x="0" y="0" width="640" height="240" style="fill:rgb(240,248,255);" />
<rect x="0" y="240" width="640" height="8" style="fill:rgb(0,128,0);" />
<image width="280" height="328" xlink:href="code/tree.svg" transform="scale(0.7) translate(350, 16)"/>
<image id="sign" width="141" height="140" xlink:href="code/sign.svg" transform="scale(0.8) translate(600, 162)"/>
</svg>Ajouter dynamiquement une image
La voiture ne faisant pas partie du décor, il est normal de l'ajouter de façon dynamique.
On génère une balise <image> que l'on va ajouter à la balise <svg> avec la méthode appendChild du DOM.
var road = document.getElementById("road");
var car
function addCar() {
car = document.createElementNS('http://www.w3.org/2000/svg','image');
car.setAttributeNS('http://www.w3.org/1999/xlink','href',"code/car.svg");
car.setAttribute("width", 715);
car.setAttribute("height", 296);
car.setAttribute("transform", "scale(0.4) translate(10,305)");
road.appendChild(car);
}Faire bouger les images
Une fonction est créée pour déplacer la voiture, une autre pour incliner le panneau quand la voiture le touche.
function moveCar(x) {
var t = "scale(0.4) translate(" + x + " 305)";
car.setAttribute("transform", t);
}
function toppleSign() {
var sign = document.getElementById("sign");
sign.setAttribute("transform", "scale(0.8) translate(600, 162) rotate(30,60,100)");
return true;
}Programme principal: juste assigner un but
Le programme principal tient en une seule instruction: on définit un but qui est représenté par une condition à atteindre, et on dit comment atteindre ce but: la position x est incrémentée et on appelle la fonction moveCar().
En langage Scriptol:
int x = 10
void move()
to ((x > 720) and toppleSign()) for 20, 4
x + 1
moveCar(x)
/to
return Converti en JavaScript:
var x=10;
function move()
{
scriptol.goal(function() {
return(((x>720)&&toppleSign()))},20*1000,function(){
x+=1;
moveCar(x);
},4);
return;
}Le "for 20,4" dans le code Scriptol a la signification suivante: L'animation a une durée limitée à 20 secondes, et chaque mouvement est effectué après un délai de 4 millisecondes pour rendre la vitesse indépendante de celle de l'ordinateur.
Télécharger le code source et les images SVG (licence MIT):
Le fichier car.html est généré à partir du fichier car.sol avec la commande: solj -w car. (Voir le manuel du language scriptol).