Un simulateur en JavaScript peut se construire à l'aide d'images qui défilent les unes après les autres.
Créer des images du moteur dans plusieurs positions, à l'aide de copies d'écran de votre modèle volumique. Enregistrer ces images dans les formats gif, png, jpg ou webp au choix.
Un logiciel de traitement d'images permet de ne garder des copies d'écran que les parties utiles. La difficulté, toutefois, est de découper toutes les images de manière identiques.
Une solution consiste à adapter le programme en Python proposé ci-dessous, en choisissant les valeurs de xmin, xmax, ymin et ymax, selon la zone à conserver.
nom="Capture0.png"
xmin=50
xmax=150
ymin=50
ymax=100
from PIL import Image
img_depart=Image.open(nom)
img_coupee=Image.new("RGB",(xmax-xmin,ymax-ymin))
for x in range(xmin,xmax):
for y in range(ymin,ymax):
p=img_depart.getpixel((x,y))
img_coupee.putpixel((x-xmin,y-ymin),p)
img_coupee.save("Coupe_"+nom)
Variante, pour plusieurs captures d'écran :
noms=["Capture0.png","Capture1.png","Capture2.png","Capture3.png"]
xmin=50
xmax=150
ymin=50
ymax=100
from PIL import Image
for nom in noms :
img_depart=Image.open(nom)
img_coupee=Image.new("RGB",(xmax-xmin,ymax-ymin))
for x in range(xmin,xmax):
for y in range(ymin,ymax):
p=img_depart.getpixel((x,y))
img_coupee.putpixel((x-xmin,y-ymin),p)
img_coupee.save("Coupe_"+nom)
Animer les images à l'aide du programme en HTML/CSS/JavaScript ci-dessous.
Ce programme est à adapter, à l'aide d'un éditeur de texte et à enregistrer au format UTF8,
sous le nom index.html
, dans le même dossier que celui où se trouvent les images.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { text-align: center; }
</style>
<script>
delai=100;
liste_images=["1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif"];
image=[];
i_image=0;
for (var i=0;i<liste_images.length;i++) {
image[i]=new Image();
image[i].src=liste_images[i];
}
function tourne() {
document.getElementById("animation").src=image[i_image].src;
i_image++;
if (i_image==liste_images.length) i_image=0;
setTimeout("tourne()",delai);
}
onload=function() {
document.getElementById("animation").src=image[0].src;
tourne();
}
</script>
</head>
<body>
<h1>MOTEUR A VAPEUR DE MODELE REDUIT</h1>
<img id="animation"><br>
<button type="button" onclick="if (delai<400) delai=delai*1.5;">
Diminuer la vapeur
</button>
<button type="button" onclick="if (delai>20) delai=delai/1.5;">
Augmenter la vapeur
</button>
</body>
</html>