%FSTYLE{/syracuse/fabrique/styles/fabrique.css}
%AUTEUR{Jean-Michel Sarlat}
%MAIL{jsarlat@planete.net}
%DATE{4 novembre 2002}
%TITRE{Animation PNG avec PSTricks}
%P{Ce document décrit la construction d'une animation obtenue
à partir de §gPSTricks§. Le fichier de base contient le code d'une
figure dépendant d'un paramètre. L'animation est la succession
des images obtenues en faisant varier ce paramètre. Pour simplifier
la tâche qui consiste à générer les images une à une et
§ià la main§, tout va se faire via un fichier tagué. Cela permet, en
même temps, de décrire les différentes étapes du processus.
}
%S{Le source de la figure}
%P{Le fichier suivant a été écrit par §gManuel Luque§, il présente
la §icorde vibrante de Melde§. L'état de cette corde dépend d'un
paramètre §vkT§, à la place de sa valeur j'ai inséré la chaîne
§v%%k%%§, cela permettra de la localiser et de procéder à une
substitution avec la valeur de la clé §vk§ d'un hachage.}
FICHIER:figure.tex:*:
TAG:1
M:tex2html: tex="figure.tex" html="figure.html"
%S{Le script perl}
FICHIER:animation.pl:: <- mise au point d'un script
#!/usr/bin/perl
use lib "/home/jms/dev/perl";
use Syracuse::Images;
use Syracuse::Patrons;
do "Syracuse.pl";
my $image = new Syracuse::Images();
for($i=0;$i<=12;$i++) {
my $k = .25 * $i;
my $j = $i < 10 ? "0$i" : $i;
Clone("figure.tex","image$j.tex",(k => "$k"));
$image->Fichier("image$j.tex");
$image->Format("png");
$image->Facteur(1.1);
$image->Alt("cBBox"); # Recalcul de la BoundingBox (PSTricks)
$image->compose();
unlink("image$j.tex");
}
§
%P{Les images vont être construites à l'aide d'un petit script perl.
Celui-ci est adaptable à d'autres cas de figures ... bien sûr !}
M:pl2html: perl="animation.pl" html="animation.html"
TAG:2
%P{Il ne reste plus qu'à exécuter ce script ...}
SH:perl animation.pl
%P{§vSH:perl animation.pl§}
%P{C'est fait !}
TAG:3
%S{Le code javascript}
%P{Pour construire l'animation avec ces images au format §gpng§, il
nous faut du code javascript qui va temporiser, à la demande, leur
affichage.}
FICHIER:animation.js:
delai = 5000; // en millisecondes
index = 0;
function next() {
if (document.slideform.slide[index+1]) {
document.images.show.src = document.slideform.slide[index+1].value;
document.slideform.slide.selectedIndex = ++index;
} else first();
}
function previous() {
if (document-1 >= 0) {
document.images.show.src = document.slideform.slide[index-1].value;
document.slideform.slide.selectedIndex = --index;
} else last();
}
function first() {
index = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
index = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[index].value;
document.slideform.slide.selectedIndex = index;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Go" : "Stop";
rotate();
}
function change() {
index = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[index].value;
}
function change_delai() {
index_delay = document.slideform.vdelai.selectedIndex;
delai = document.slideform.vdelai[index_delay].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
index = (index == document.slideform.slide.length-1) ? 0 : index+1;
document.images.show.src = document.slideform.slide[index].value;
document.slideform.slide.selectedIndex = index;
window.setTimeout("rotate()", delai);
}
}
§
M:text: text="animation.js" html="animation-mod.html"
%S{Le patron du fichier HTML}
%P{La mise en forme de l'animation se fait à travers une page HTML. Il
suffit de disposer d'un patron et de substituer les valeurs qui conviennent
par l'intermédiaire des directives présentes (elles se reconnaissent au fait qu'elles sont
encadrées par §v[%§ et §v%]§). Le fichier ci-dessous est destiné à être traité
par l'utilitaire §vtpage§ du §iTemplate-ToolKit§ (en perl).}
FICHIER:patron:
[%titre%][%titre%]
§
M:text: text="patron" html="patron.html"
TAG:finalisation
%S{Finalisation}
%P{Pour éxécuter les directives du fichier précédent il est nécessaire de
collecter quelques informations : les index des images (§vn§), leur largeur
(§vL§), leur hauteur (§vH§) et enfin le titre de la page (§vtitre§).}
%P{La largeur et la hauteur nous sont données par §videntify§ (ImageMagick).}
SH:identify image00.png > LetH.txt
%P{§vSH:identify image00.png > LetH.txt§}
M:text: text="LetH.txt" html="LetH.html"
TAG:confightml
FICHIER:animation.cfg
[% INCLUDE patron
n = ['00','01','02','03','04','05','06','07',
'08','09','10','11','12']
L = 534
H = 84
titre = 'La corde vibrante de Melde'
%]
§
%P{Le fichier de configuration sera le suivant :}
M:text:text="animation.cfg" html="animation-cfg.html"
%P{On exécute §vtpage§ sur ce fichier.}
SH:tpage animation.cfg > corde_vibrante.html
%P{§vSH:tpage animation.cfg > corde_vibrante.html§}
%P{C'est fait !§§
Maintenant, elle est là :
§lcorde_vibrante.html§animation PNG§.
}
%P{On peut la charger dans une nouvelle fenêtre aux dimensions
adaptées avec, encore une fois, un peu de code Javascript (à
voir dans le source de ce fichier).}
<[
Animation dans sa fenêtre
]>
%S{Conclusion}
%P{Dans le cheminement précédent, il reste des manipulations à
automatiser. Actuellement l'écriture du fichier §itagué§ doit se
faire en deux temps d'abord jusqu'au tag §gconfightml§
de façon à lire les dimensions des images et ensuite la fin. Dans
le prochain fichier le script perl en fera un peu plus de façon
à simplifier la tâche.}
%P{Le fichier à l'origine de ce document est accessible via le lien
ci-dessous, les tags sont visibles ainsi que les différentes
commandes hors-texte.}
%EOF