DEVELOPPEMENT WEB
JAVASCRIPT - ANIMATIONS 3D

Introduction

L'idée est de créer plusieurs images de modèles volumiques à l'aide de copies d'écran. Ces images sont ensuite découpées aux bonnes dimensions. Elles sont enfin affichées les unes à la suite des autres, à l'aide d'un code en HTML/CSS/JavaScript, de manière à former une animation. Trois exemples de codes, basés sur le même principe, sont proposés ci-après.

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. Une solution consiste à adapter le programme en Python proposé ci-dessous.

from PIL import Image

nom_image="capture.jpg"
xmin=50
xmax=150
ymin=50
ymax=100

img_depart=Image.open(nom_image)
print(img_depart.size)
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("modif_"+nom_image)
img_coupee.show()

En bougeant la souris

Code :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body { text-align: center; }
  </style>
  <script>
    liste_images=["1.png","2.png","3.png","4.png","5.png","6.png","7.png","8.png","9.png"];
    image=[];
    for (var i=0;i<liste_images.length;i++) {
      image[i]=new Image();
      image[i].src=liste_images[i];
    }
    $=function(id) { return document.getElementById(id); };
    bouger=function(e) {
      var num=image.length*(e.clientX-pos)/image[0].width;
      $("animation").src=image[Math.floor(num)].src;
    };
    onload=function() {
      $("animation").src=image[0].src;
      pos=$("animation").offsetLeft;
    };
  </script>
</head>

<body>
  <img id="animation" onmousemove="bouger(event);">
</body>

</html>

Résultat (déplacez le curseur de la souris sur l'image) :

En cliquant sur des boutons

Code :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body { text-align: center; }
  </style>
  <script>
    liste_images=["1.png","2.png","3.png","4.png","5.png","6.png"];
    delai=100;
    image=[];
    for (var i=0;i<liste_images.length;i++) {
      image[i]=new Image();
      image[i].src=liste_images[i];
    }
    $=function(id) { return document.getElementById(id); };
    position="fermee";
    ouvrir=function() {
      if (position=="fermee") {
        for (i=1;i<image.length;i++) {
          setTimeout("$('animation').src=image["+i+"].src",delai*i);
        }
        position="ouverte";
      }
    };
    fermer=function() {
      if (position=="ouverte") {
        for (i=1;i<image.length;i++) {
          j=image.length-i-1;
          setTimeout("$('animation').src=image["+j+"].src",delai*i);
        }
        position="fermee";
      }
    };
    onload=function() { $('animation').src=image[0].src; };
  </script>
</head>

<body>
  <img id="animation"><br>
  <button type="button" onclick="ouvrir();">Ouvrir</button>
  <button type="button" onclick="fermer();">Fermer</button>
</body>

</html>

Résultat (cliquez sur les boutons Ouvrir et Fermer) :

En déplaçant un curseur

Code :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body { text-align: center; }
    div {
      display: inline-block;
      text-align: left;
      padding: 10px;
      border: solid 1px #000;
    }
  </style>
  <script>
    liste_images=["1.png","2.png","3.png","4.png","5.png","6.png","7.png","8.png","9.png"];
    image=[];
    for (var i=0;i<liste_images.length;i++) {
      image[i]=new Image();
      image[i].src=liste_images[i];
    }
    $=function(id) { return document.getElementById(id); };
    i_image=0;
    regler=function(nb) {
      if (nb==0) {
        frequence=0;
        if (etat_moteur=="marche") clearTimeout(rotation_moteur);
        etat_moteur="arrêt";
      }
      else {
        frequence=Math.round(60*Math.pow(nb,0.5));
        delai=Math.round(5455/frequence);
        if (etat_moteur=="arrêt") tourner();
      }
      $("vanne").value=nb;
      $("frequence").value=frequence;
    };
    tourner=function() {
      $("animation").src=image[i_image].src;
      i_image++;
      if (i_image==liste_images.length) i_image=0;
      etat_moteur="marche";
      rotation_moteur=setTimeout("tourner()",delai);
    };
    onload=function() {
      $("animation").src=image[0].src;
      etat_moteur="arrêt";
      regler(3);
    };
  </script>
</head>

<body>
  <img id="animation"><br>
  <div>
    Fréquence de rotation :
    <input type="text" size="5" id="frequence"> tr/min<br>
    Ouverture de la vanne :
    <input type="range" min="0" max="20" onchange="this.blur(); regler(1*this.value);" id="vanne">
  </div>
</body>

</html>

Résultat (Déplacez le curseur) :