L'animation «mandel01»
Jean-Michel Sarlat (jm-sarlat@melusine.eu.org) - 9 mai 2004| 1 | Le fond | |
| 2 | Les boutons | |
| 3 | Les informations | |
| 4 | Le source de mandel01 | |
| 5 | La fabrication des images | |
1 - Le fond
Le fond est composé avec MetaPost.
fond.mp
prologues := 1;
verbatimtex
%&latex
\documentclass{article}
\usepackage[latin1]{inputenc}
\usepackage{marvosym}
\usepackage{mflogo}
\usepackage{times}
\begin{document}
etex
color bouton,fond;
bouton = (0.35,0.5,0.8);
fond = (0.77,0.75,0.2);
vardef linkhttp@#(expr s,z,url,c) =
picture p;
p := thelabel@#(s,z);
special "[ /Rect [ " & decimal ((xpart llcorner p) -2) & " " &
decimal((ypart llcorner p)-2) & " " &
decimal ((xpart urcorner p)+2) & " " &
decimal ((ypart urcorner p)+2) & " ] " &
"/Border [ 0 0 0 ] " &
"/Action << /Subtype /URI /URI (" & url & ") >> " &
"/Subtype /Link /ANN pdfmark";
draw p withcolor c;
enddef;
vardef cadre(expr xmin,ymin,xmax,ymax,r) =
numeric t;
t = 1-1/sqrt(2);
((xmin,ymin) + (0,r)) -- ((xmin,ymax) - (0,r)){dir 90}
.. ((xmin,ymax) + t*(r,-r)) .. {dir 0}
((xmin,ymax) + (r,0)) -- ((xmax,ymax) - (r,0)){dir 0}
.. ((xmax,ymax) - t*(r,r)) .. {dir 270}
((xmax,ymax) - (0,r)) -- ((xmax,ymin) + (0,r)){dir 270}
.. ((xmax,ymin) + t*(-r,r)) .. {dir 180}
((xmax,ymin) - (r,0)) -- ((xmin,ymin) + (r,0)){dir 180}
.. ((xmin,ymin) + t*(r,r)) .. {dir 90}cycle;
enddef;
beginfig(1);
fill (0,0)--(0,450)--(600,450)--(600,0)--cycle withcolor fond;
path c[];
c1 = (184,5)--(584,5)--(584,405)--(184,405)--cycle;
c2 = (32,375)--(132,375)--(132,275)--(32,275)--cycle;
c3 = (0,0)--(120,0)--(120,18)--(0,18)--cycle;
c4 = (20,5)--(144,5)--(144,380)--(20,380)--cycle;
draw (16,410)--(584,410)
withcolor (0.5white-fond)
withpen pencircle scaled 2pt;
label(btex \textbf{Syracuse} etex xscaled 10 yscaled 5 ,(300,425))
withcolor 0.9*fond;
labeloffset := 0;
label.rt(btex \bf
Exploration de l'ensemble de Mandelbrot
etex scaled 3,(16,427))
withcolor 0.6red;
fill cadre(16,120,148,390,5)
withcolor 0.9fond;
draw cadre(16,120,148,390,5)
withpen pencircle scaled 1.5pt
withcolor 0.6fond;
fill c1 withcolor white;
fill c2 withcolor white;
label(btex \large Chargement en cours... etex,(384,205));
label(btex \large Calcul en cours... etex,(82,325));
label(btex \begin{minipage}{120pt}
\begin{center}
-- 9 mai 2004 --\\
Jean-Michel Sarlat
\end{center}
\end{minipage} etex scaled 1.2, (82,60))
withcolor (black -0.6fond);
endfig;
end
Une fois ce fichier chargé et compilé, je dispose d'un fichier fond.1 que je transforme en pdf en m'aidant d'un fichier pilote fond.ps.
fond.ps
<</PageSize [600 450]>> setpagedevice
/TeXBase1Encoding [
% 0x00 (encoded characters from Adobe Standard not in Windows 3.1)
/.notdef /dotaccent /fi /fl
/fraction /hungarumlaut /Lslash /lslash
/ogonek /ring /.notdef
/breve /minus /.notdef
% These are the only two remaining unencoded characters, so may as
% well include them.
/Zcaron /zcaron
% 0x10
/caron /dotlessi
% (unusual TeX characters available in, e.g., Lucida Bright)
/dotlessj /ff /ffi /ffl
/.notdef /.notdef /.notdef /.notdef
/.notdef /.notdef /.notdef /.notdef
% very contentious; it's so painful not having quoteleft and quoteright
% at 96 and 145 that we move the things normally found there down to here.
/grave /quotesingle
% 0x20 (ASCII begins)
/space /exclam /quotedbl /numbersign
/dollar /percent /ampersand /quoteright
/parenleft /parenright /asterisk /plus /comma /hyphen /period /slash
% 0x30
/zero /one /two /three /four /five /six /seven
/eight /nine /colon /semicolon /less /equal /greater /question
% 0x40
/at /A /B /C /D /E /F /G /H /I /J /K /L /M /N /O
% 0x50
/P /Q /R /S /T /U /V /W
/X /Y /Z /bracketleft /backslash /bracketright /asciicircum /underscore
% 0x60
/quoteleft /a /b /c /d /e /f /g /h /i /j /k /l /m /n /o
% 0x70
/p /q /r /s /t /u /v /w
/x /y /z /braceleft /bar /braceright /asciitilde
/.notdef % rubout; ASCII ends
% 0x80
/Euro /.notdef /quotesinglbase /florin
/quotedblbase /ellipsis /dagger /daggerdbl
/circumflex /perthousand /Scaron /guilsinglleft
/OE /.notdef /.notdef /.notdef
% 0x90
/.notdef /.notdef /.notdef /quotedblleft
/quotedblright /bullet /endash /emdash
/tilde /trademark /scaron /guilsinglright
/oe /.notdef /.notdef /Ydieresis
% 0xA0
/.notdef % nobreakspace
/exclamdown /cent /sterling
/currency /yen /brokenbar /section
/dieresis /copyright /ordfeminine /guillemotleft
/logicalnot
/hyphen % Y&Y (also at 45); Windows' softhyphen
/registered
/macron
% 0xD0
/degree /plusminus /twosuperior /threesuperior
/acute /mu /paragraph /periodcentered
/cedilla /onesuperior /ordmasculine /guillemotright
/onequarter /onehalf /threequarters /questiondown
% 0xC0
/Agrave /Aacute /Acircumflex /Atilde /Adieresis /Aring /AE /Ccedilla
/Egrave /Eacute /Ecircumflex /Edieresis
/Igrave /Iacute /Icircumflex /Idieresis
% 0xD0
/Eth /Ntilde /Ograve /Oacute
/Ocircumflex /Otilde /Odieresis /multiply
/Oslash /Ugrave /Uacute /Ucircumflex
/Udieresis /Yacute /Thorn /germandbls
% 0xE0
/agrave /aacute /acircumflex /atilde
/adieresis /aring /ae /ccedilla
/egrave /eacute /ecircumflex /edieresis
/igrave /iacute /icircumflex /idieresis
% 0xF0
/eth /ntilde /ograve /oacute
/ocircumflex /otilde /odieresis /divide
/oslash /ugrave /uacute /ucircumflex
/udieresis /yacute /thorn /ydieresis
] def
% Activer l'encodage ISO latin1 au moment de la conversion
/ISOEncode {
dup length dict begin
{1 index /FID ne {def} {pop pop} ifelse} forall
/Encoding TeXBase1Encoding def
currentdict
end
/Temporary exch definefont
} bind def
% Récupération dans le systemdict de la procédure setfont
/syssetfont {
systemdict /setfont get exec
} def
% Création dans le userdict d'une procédure setfont adaptée
/setfont {ISOEncode syssetfont} def
% Documentation du PDF
[ /Author (Jean-Michel Sarlat) /DOCINFO pdfmark
[ /Title (fond de présentation de mandel01) /DOCINFO pdfmark
[ /Subject (Ensemble de Mandelbrot) /DOCINFO pdfmark
[ /Creator (Metapost + ps2pdf + pdf2swf) /DOCINFO pdfmark
% Insertion du code généré par MetaPost (prologues != 0)
(fond.1) run
Il ne reste plus qu'a transformer en clip d'animation à l'aide de pdf2swf.
2 - Les boutons
Il y en 6 et pour chacun 3 images correspondant au trois états: normal, souris au dessus, pressé.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
3 - Les informations
Là encore, l'image présentant les informations est fabriquée avec MetaPost suivant la même méthode que pour le fond.
infos.mp
prologues :=1;
verbatimtex
%&latex
\documentclass{article}
\usepackage[latin1]{inputenc}
\usepackage[frenchb]{babel}
\usepackage{mflogo}
\usepackage{times}
\begin{document}
etex
def cadre = fill (0,0)--(400,0)--(400,400)--(0,400)--cycle
withcolor 0.9white; enddef;
beginfig(1);
% échappement de l'encodage latin1 pour ces trois fontes
special "/cmsy10 {/CMSY10 /OT1 1 def} def";
special "/cmr10 {/CMR10 /OT1 1 def} def";
special "/logo10 {/LOGO10 /OT1 1 def} def";
cadre;
label(btex
\begin{minipage}{11cm}
L'application montre deux images:
\begin{itemize}
\item celle de gauche (100$\times$100) est celle à partir de laquelle
s'effectue la navigation,
\item celle de droite (400$\times$400, où
s'inscrit ce texte) n'est qu'un agrandissement de la première (bouton:
{\sf Agrandissement}).
\end{itemize}
\vspace{0.5cm}
Les images sont calculées sur le serveur Mélusine, en cliquant sur
\begin{itemize}
\item l'imagette, vous centrez l'image au point sous le curseur;
\item le bouton {\sf Zoom avant}, vous diminuez la zone couverte par
l'image d'un facteur 1.5;
\item le bouton {\sf Zoom arrière}, vous agrandissez la zone couverte
par l'image d'un facteur 1.5;
\item le bouton {\sf Rotation de palette}, vous modifiez la palette
de couleurs (15 en tout);
\item le bouton {\sf Initialisation}, vous reprenez la zone initiale
couvrant l'ensemble de Mandelbrot.
\end{itemize}
\vspace{0.5cm}
Cette application est obtenue à l'aide de \LaTeX{} et \MP{} pour la
présentation, la librairie GD pour les images et les SWF Tools pour
l'assemblage.
\end{minipage}
etex scaled 1.15, (200,200)) withcolor (0.4,0.25,0.1);
endfig;
end
infos.ps
%!
<</PageSize [400 400]>> setpagedevice
/TeXBase1Encoding [
% 0x00 (encoded characters from Adobe Standard not in Windows 3.1)
/.notdef /dotaccent /fi /fl
/fraction /hungarumlaut /Lslash /lslash
/ogonek /ring /.notdef
/breve /minus /.notdef
% These are the only two remaining unencoded characters, so may as
% well include them.
/Zcaron /zcaron
% 0x10
/caron /dotlessi
% (unusual TeX characters available in, e.g., Lucida Bright)
/dotlessj /ff /ffi /ffl
/.notdef /.notdef /.notdef /.notdef
/.notdef /.notdef /.notdef /.notdef
% very contentious; it's so painful not having quoteleft and quoteright
% at 96 and 145 that we move the things normally found there down to here.
/grave /quotesingle
% 0x20 (ASCII begins)
/space /exclam /quotedbl /numbersign
/dollar /percent /ampersand /quoteright
/parenleft /parenright /asterisk /plus /comma /hyphen /period /slash
% 0x30
/zero /one /two /three /four /five /six /seven
/eight /nine /colon /semicolon /less /equal /greater /question
% 0x40
/at /A /B /C /D /E /F /G /H /I /J /K /L /M /N /O
% 0x50
/P /Q /R /S /T /U /V /W
/X /Y /Z /bracketleft /backslash /bracketright /asciicircum /underscore
% 0x60
/quoteleft /a /b /c /d /e /f /g /h /i /j /k /l /m /n /o
% 0x70
/p /q /r /s /t /u /v /w
/x /y /z /braceleft /bar /braceright /asciitilde
/.notdef % rubout; ASCII ends
% 0x80
/Euro /.notdef /quotesinglbase /florin
/quotedblbase /ellipsis /dagger /daggerdbl
/circumflex /perthousand /Scaron /guilsinglleft
/OE /.notdef /.notdef /.notdef
% 0x90
/.notdef /.notdef /.notdef /quotedblleft
/quotedblright /bullet /endash /emdash
/tilde /trademark /scaron /guilsinglright
/oe /.notdef /.notdef /Ydieresis
% 0xA0
/.notdef % nobreakspace
/exclamdown /cent /sterling
/currency /yen /brokenbar /section
/dieresis /copyright /ordfeminine /guillemotleft
/logicalnot
/hyphen % Y&Y (also at 45); Windows' softhyphen
/registered
/macron
% 0xD0
/degree /plusminus /twosuperior /threesuperior
/acute /mu /paragraph /periodcentered
/cedilla /onesuperior /ordmasculine /guillemotright
/onequarter /onehalf /threequarters /questiondown
% 0xC0
/Agrave /Aacute /Acircumflex /Atilde /Adieresis /Aring /AE /Ccedilla
/Egrave /Eacute /Ecircumflex /Edieresis
/Igrave /Iacute /Icircumflex /Idieresis
% 0xD0
/Eth /Ntilde /Ograve /Oacute
/Ocircumflex /Otilde /Odieresis /multiply
/Oslash /Ugrave /Uacute /Ucircumflex
/Udieresis /Yacute /Thorn /germandbls
% 0xE0
/agrave /aacute /acircumflex /atilde
/adieresis /aring /ae /ccedilla
/egrave /eacute /ecircumflex /edieresis
/igrave /iacute /icircumflex /idieresis
% 0xF0
/eth /ntilde /ograve /oacute
/ocircumflex /otilde /odieresis /divide
/oslash /ugrave /uacute /ucircumflex
/udieresis /yacute /thorn /ydieresis
] def
% Activer l'encodage ISO latin1 au moment de la conversion
/ISOEncode {
dup length dict begin
{1 index /FID ne {def} {pop pop} ifelse} forall
/Encoding TeXBase1Encoding def
currentdict
end
/Temporary exch definefont
} bind def
% Récupération dans le systemdict de la procédure setfont
/syssetfont {
systemdict /setfont get exec
} def
% Création dans le userdict d'une procédure setfont adaptée
/OT1 0 def
/setfont {OT1 1 eq {}{ISOEncode} ifelse syssetfont /OT1 0 def} def
% Documentation du PDF
[ /Author (Jean-Michel Sarlat) /DOCINFO pdfmark
[ /Title (Informations concernant mandel01) /DOCINFO pdfmark
[ /Subject (Ensemble de Mandelbrot) /DOCINFO pdfmark
[ /Creator (Metapost + ps2pdf + pdf2swf) /DOCINFO pdfmark
% Insertion du code généré par MetaPost (prologues != 0)
% Les fontes déclarées dans infos.1 doivent être accessibles à gs via Fontmap.GS
(infos.1) run
4 - Le source de mandel01
mandel01.sc
.flash name="mandel01.swf" bbox=600x450 version=6
.swf fond "fond.swf"
.put fond 0 0
.box imgControle width=100 height=100 fill=white color=white
.sprite clipControle
.put imgControle 32 75
.end
.box imgBouton width=120 height=18 fill=#869537 color=#869537
.sprite clipBouton
.put imgBouton -120 -18
.end
.action:
var palette = ["210","120","201","102","021","420","321","312",
"231","213","123","132","000","222","012"];
var ic = 0;
var xc = -0.7;
var yc = 0;
var rc = 1.5;
_root.attachMovie("clipControle","controle",1);
_root.createEmptyMovieClip("imagette",2);
_root.createEmptyMovieClip("image",3);
function majImagette () {
imagette.loadMovie("/syracuse/cgi-bin/mandel01jpeg.pl?z=n&p=" +
palette[ic] + "&xc=" + xc + "&yc=" + yc + "&rc=" + rc);
}
function majImage () {
image.loadMovie("/syracuse/cgi-bin/mandel01jpeg.pl?z=o&p=" +
palette[ic] + "&xc=" + xc + "&yc=" + yc + "&rc=" + rc);
}
function afficheInfos () {
image.loadMovie("infos.swf");
}
imagette._x = 32;
imagette._y = 75;
image._x = 184;
image._y = 45;
controle._alpha = 0;
controle.onPress = function () {
var xt = _root._xmouse - 82;
var yt = _root._ymouse - 125;
xc = xc + xt /50 * rc;
yc = yc - yt /50 * rc;
majImagette();
};
majImagette();
majImage();
.end
.jpeg zav filename="za-normal.jpg" quality=100%
.jpeg zav2 filename="za-dessus.jpg" quality=100%
.jpeg zav3 filename="za-pressed.jpg" quality=100%
.button zavbouton
.show zav as=idle
.show zav2 as=hover
.show zav3 as=pressed
.on_press:
rc /= 1.5;
majImagette();
.end
.end
.put zavbouton 22 187
.jpeg zar filename="zar-normal.jpg" quality=100%
.jpeg zar2 filename="zar-dessus.jpg" quality=100%
.jpeg zar3 filename="zar-pressed.jpg" quality=100%
.button zarbouton
.show zar as=idle
.show zar2 as=hover
.show zar3 as=pressed
.on_press:
rc *= 1.5;
majImagette();
.end
.end
.put zarbouton 22 210
.jpeg ag filename="ag-normal.jpg" quality=100%
.jpeg ag2 filename="ag-dessus.jpg" quality=100%
.jpeg ag3 filename="ag-pressed.jpg" quality=100%
.button agbouton
.show ag as=idle
.show ag2 as=hover
.show ag3 as=pressed
.on_press:
majImage();
.end
.end
.put agbouton 22 233
.jpeg rp filename="r-normal.jpg" quality=100%
.jpeg rp2 filename="r-dessus.jpg" quality=100%
.jpeg rp3 filename="r-pressed.jpg" quality=100%
.button rpbouton
.show rp as=idle
.show rp2 as=hover
.show rp3 as=pressed
.on_press:
ic = (ic + 1) % 15;
majImagette();
.end
.end
.put rpbouton 22 256
.jpeg ini filename="i-normal.jpg" quality=100%
.jpeg ini2 filename="i-dessus.jpg" quality=100%
.jpeg ini3 filename="i-pressed.jpg" quality=100%
.button inibouton
.show ini as=idle
.show ini2 as=hover
.show ini3 as=pressed
.on_press:
xc = -0.7; yc = 0; rc = 1.5; majImagette();
.end
.end
.put inibouton 22 279
.jpeg inf filename="in-normal.jpg" quality=100%
.jpeg inf2 filename="in-dessus.jpg" quality=100%
.jpeg inf3 filename="in-pressed.jpg" quality=100%
.button infbouton
.show inf as=idle
.show inf2 as=hover
.show inf3 as=pressed
.on_press:
afficheInfos();
.end
.end
.put infbouton 22 302
.end
5 - La fabrication des images
Elle est assurée par un petit programme en C: mandel01jpeg.c déjà utilisé (avec une sortie PNG) sur ce site à la page http://melusine.eu.org/syracuse/gd/mandel01/.
Source index.txt mouliné par petitParseur(Z+B) le dimanche 9 mai 2004.