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()
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) :
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
) :
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;
$("affichage").innerHTML=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 :
<span id="affichage"></span> tr/min<br>
Ouverture de la vanne :
<input type="range" min="0" max="20" oninput="regler(1*this.value);" id="vanne">
</div>
</body>
</html>
Résultat (Déplacez le curseur) :