Le source de la figureCe document décrit la construction d'une animation obtenue à partir de PSTricks. 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 à 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.
Le source de la figureLe fichier suivant a été écrit par Manuel Luque, il présente la corde vibrante de Melde. L'état de cette corde dépend d'un paramètre kT, à la place de sa valeur j'ai inséré la chaîne %%k%%, cela permettra de la localiser et de procéder à une substitution avec la valeur de la clé k d'un hachage.
Fichier : figure.tex
%&latex
\documentclass[12pt]{article}
\usepackage{pstricks}
\usepackage{pstcol}
\usepackage{pst-plot}
\pagestyle{empty}
\def\Signal{
/V 5 def % célérité en m/s
/lambda V 100 div def % longueur d'onde
/date \kT\space 0.01 mul def
/Vt V date mul def
X Vt le { /Y 3.6e4 date mul 360 X mul lambda div sub sin def } if
X Vt ge { /Y 0 def} if}
\SpecialCoor
\psset{dimen=middle}
% on visualise l'aspect de la corde
% à une date donnée t=k*T
% choix de la date en multiple de T (période = 1/100 s)
% \typein[\kT]{k ? 0,0.25,0.5,0.75 etc. 3}% idée Denis Girou
% on peut prendre des valeurs plus fines
% k ? 0,0.1,0.2,0.3 etc. 3
% t=kT*T T période 1/100 s
% longueur de la corde 15 cm
% célérité 5 m/s
\begin{document}
\def\kT{%%k%%}
\begin{center}
\psset{plotpoints=1000,plotstyle=line}
\psframebox[linestyle=none,fillstyle=solid,fillcolor=black]{
\begin{pspicture}(-2,-1.2)(15,1.2)
% la corde
\parametricplot[linecolor=yellow,linewidth=1mm]{0}{15}{
/X t 100 div def % X=abscisse en m
\Signal\space
t Y}
% la lame
\psline[linecolor=blue,linewidth=0.5mm](-2,0)
(! 0 3.6e4 \kT\space 0.01 mul mul sin)
% un point de la corde (pris à 5cm)
\psdot[linecolor=red,dotsize=2mm]
(! 5 dup /X exch 100 div def\Signal\space Y)
\end{pspicture}}
\end{center}
\end{document}
|
Le script perlLes images vont être construites à l'aide d'un petit script perl. Celui-ci est adaptable à d'autres cas de figures ... bien sûr !
Fichier : animation.pl 1 #!/usr/bin/perl 2 use lib "/home/jms/dev/perl"; 3 use Syracuse::Images; 4 use Syracuse::Patrons; 5 do "Syracuse.pl"; 6 my $image = new Syracuse::Images(); 7 for($i=0;$i<=12;$i++) { 8 my $k = .25 * $i; 9 my $j = $i < 10 ? "0$i" : $i; 10 Clone("figure.tex","image$j.tex",(k => "$k")); 11 $image->Fichier("image$j.tex"); 12 $image->Format("png"); 13 $image->Facteur(1.1); 14 $image->Alt("cBBox"); # Recalcul de la BoundingBox (PSTricks) 15 $image->compose(); 16 unlink("image$j.tex"); 17 } |
Il ne reste plus qu'à exécuter ce script ...
SH:perl animation.pl
C'est fait !
Le code javascriptPour construire l'animation avec ces images au format png, 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);
}
}
|
Le patron du fichier HTMLLa 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 [% et %]). Le fichier ci-dessous est destiné à être traité par l'utilitaire tpage du Template-ToolKit (en perl).
Fichier : patron
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="JavaScript" src="animation.js"></script>
<title>[%titre%]</title>
</head>
<body background="/syracuse/images/fond.jpg">
<span style="font-family:sans-serif;font-weight:bold">[%titre%]</span>
<hr noshade>
<center>
<form name=slideform>
<table cellspacing=1 cellpadding=0>
<tr>
<td>
<table border="1" cellpadding="1">
<tr>
<td>
<img src="image[%n.0%].png" name="show"
width="[%L%]" height="[%H%]">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align=center>
<select name="slide" onChange="change();">
[%-FOREACH a = n %]
<option value="image[%a%].png" [%"selected" IF loop.first%]>Vue [%loop.count-%]
[%END%]
</select>
<select name="vdelai" onChange="change_delai();">
<option value="500"> demi-seconde
<option value="1000">1 seconde
<option value="3000">3 secondes
<option value="5000" selected>5 secondes
<option value="10000">10 secondes
</select>
</td>
</tr>
<tr>
<td align=center>
<input type=button onClick="first();"
value="|<<" title="Début">
<input type=button onClick="previous();"
value="<<" title="Précédente">
<input type=button name="slidebutton"
onClick="ap(this.value);"
value="Go" title="AutoPlay">
<input type=button onClick="next();" value=">>"
title="Suivante">
<input type=button onClick="last();"
value=">>|"
title="Fin">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
|
FinalisationPour éxécuter les directives du fichier précédent il est nécessaire de collecter quelques informations : les index des images (n), leur largeur (L), leur hauteur (H) et enfin le titre de la page (titre).
La largeur et la hauteur nous sont données par identify (ImageMagick).
SH:identify image00.png > LetH.txt
Fichier : LetH.txt
image00.png PNG 534x84 DirectClass 8-bit 407b 0.0u 0:01
|
Le fichier de configuration sera le suivant :
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'
%]
|
On exécute tpage sur ce fichier.
SH:tpage animation.cfg > corde_vibrante.html
C'est fait !
Maintenant, elle est là : animation PNG.
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 ConclusionDans le cheminement précédent, il reste des manipulations à automatiser. Actuellement l'écriture du fichier tagué doit se faire en deux temps d'abord jusqu'au tag confightml 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.
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.