MOTEUR A VAPEUR POUR MODELE REDUIT

Simulateur en JavaScript

Principe

Un simulateur en JavaScript peut se construire à l'aide d'images qui défilent les unes après les autres.

Exemple de modèle à télécharger

Les images

Créer des images du moteur dans plusieurs positions, à l'aide de copies d'écran. 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 exactement de la même manière. Il est plus aisé d'adapter le programme en Python proposé ci-dessous.

from PIL import Image

img_depart=Image.open("capture.jpg")
xmin=50
xmax=150
ymin=50
ymax=100

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("dessin.png")
img_coupee.show()

L'animation

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.

<!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>