2011-10-21 14:48:31 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
2011-11-16 11:57:39 +00:00
< meta name = "keywords" content = "m4, SVG, XSLT, XML, design, programming" >
2011-10-21 14:48:31 +00:00
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
2011-11-16 11:57:39 +00:00
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "des fractales en SVG et m4" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/SVG-and-m4-fractals/" / >
2011-10-21 14:48:31 +00:00
< link rel = "alternate" lang = "en" xml:lang = "en" title = "SVG and m4 fractals" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/SVG-and-m4-fractals/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
2011-11-16 11:57:39 +00:00
< title > des fractales en SVG et m4< / title >
2011-10-21 14:48:31 +00:00
< / head >
< body lang = "fr" class = "article" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/en/blog/SVG-and-m4-fractals/" onclick = "setLanguage('en')" > in English< / a >
< / div >
< div class = "flush" > < / div >
< / div >
< div id = "titre" >
< h1 >
2011-11-16 11:57:39 +00:00
des fractales en SVG et m4
2011-10-21 14:48:31 +00:00
< / h1 >
< h2 >
Accroître le pouvoir des languages déficients.
< / h2 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< p > < img alt = "Yesod logo made in SVG and m4" src = "/Scratch/img/blog/SVG-and-m4-fractals/main.png" / > < / p >
< div class = "intro" >
2011-11-16 11:57:39 +00:00
< p > < span class = "sc" > < abbr title = "Trop long à lire" > tlàl< / abbr > : < / span > Utiliser m4 pour accroître le pouvoir d’ < span class = "sc" > xslt< / span > et d’ < span class = "sc" > svg< / span > . Example cool, les fractales.< / p >
2011-10-21 14:48:31 +00:00
< / div >
2011-11-16 11:57:39 +00:00
< p > Lorsqu’ < span class = "sc" > xml< / span > fût inventé beaucoup pensaient que c’ ’
Passer de fichiers plat à des fichiers structurés standardisés fût un grand progrès dans beaucoup de domaines.
Cerain se mirent à voir du < span class = "sc" > xml< / span > de partout.
À tel point que les les format compatibles < span class = "sc" > xml< / span > naquirent de toute part.
Non seulement comme format de fichier, mais aussi comme format pour un langage de programmation.< / p >
< p > Ô joie !< / p >
< p > Malheureusement, < span class = "sc" > xml< / span > fût fabriquer pour le transfert de données.
Pas du tout pour être vu ou édité directement.
La triste vérité est qu’ < span class = "sc" > xml< / span > est verbeux et laid.
Dans un monde parfait, nous ne devrions avoir des programmes qui s’ < span class = "sc" > xml< / span > pour nous épargner la peine de les voir directement.
Mais devinez quoi ?
Notre monde n’
Beaucoup de programmeurs sont ainsi forcé de travailler
directement avec de l’ < span class = "sc" > xml< / span > .< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > < span class = "sc" > xml< / span > , n’
Vous avez d’ ’ < / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > Mais je suis là pour vous aider.
Si comme moi vous détestez < span class = "sc" > xslt< / span > ou écrire de l’ < span class = "sc" > xml< / span > .
Je vais vous montrer une façon d’ < / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< h2 id = "un-exemple-avec-span-classscxsltspan" > Un exemple avec < span class = "sc" > xslt< / span > < / h2 >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > Commençons avec le pire cas de langage < span class = "sc" > xml< / span > que je connaisse : < span class = "sc" > xslt< / span > .
Tous les développeurs qui ont déjà dû écrire du < span class = "sc" > xslt< / span > savent à quel point ce langage est horrible.< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > Pour réduire la “verbosité” de tels langages, il y a un moyen.
< strong > < code > m4< / code > < / strong > .
Oui, le préprocesseur utilisé par < code > C< / code > et < code > C++< / code > .< / p >
< p > Voici certains exemples :< / p >
2011-10-21 14:48:31 +00:00
< ul >
2011-11-16 11:57:39 +00:00
< li > Les variables, au lieu d’ < code > myvar = value< / code > , voici la version < span class = "sc" > xslt< / span > :< / li >
2011-10-21 14:48:31 +00:00
< / ul >
< pre class = "twilight" >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > xsl< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > variable< / span > < span class = "MetaTagAll" > name< / span > =< span class = "String" > < span class = "String" > " < / span > myvar< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > select< / span > =< span class = "String" > < span class = "String" > " < / span > value< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > /> < / span > < / span >
< / pre >
< ul >
2011-11-16 11:57:39 +00:00
< li > Afficher quelquechose. Au lieu de < code > print "Hello world!"< / code > , < span class = "sc" > xslt< / span > nous offre :< / li >
2011-10-21 14:48:31 +00:00
< / ul >
< pre class = "twilight" >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > xsl< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > text< / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > disable-output-escaping< / span > =< span class = "String" > < span class = "String" > " < / span > yes< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > < span class = "String" > < span class = "String" > < ![CDATA[< / span > Hello world!< / span >
< span class = "String" > < span class = "String" > ]]> < / span > < / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > xsl< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > text< / span > < span class = "MetaTagAll" > > < / span > < / span >
< / pre >
< ul >
2011-11-16 11:57:39 +00:00
< li > afficher la valeur d’ < code > print myvar< / code > , nous avons droit à :< / li >
2011-10-21 14:48:31 +00:00
< / ul >
< pre class = "twilight" >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > xslt< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > value-of< / span > < span class = "MetaTagAll" > select< / span > =< span class = "String" > < span class = "String" > " < / span > myvar< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > /> < / span > < / span >
< / pre >
< ul >
2011-11-16 11:57:39 +00:00
< li > Essayez d’ < / li >
2011-10-21 14:48:31 +00:00
< / ul >
2011-11-16 11:57:39 +00:00
< h2 id = "la-solution-m4--la-rescousse" > La solution (m4 à la rescousse)< / h2 >
2011-10-21 14:48:31 +00:00
< pre class = "twilight" >
2011-11-16 11:57:39 +00:00
< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > < ?< / span > < span class = "DoctypeXmlProcessing" > xml< / span > < span class = "DoctypeXmlProcessing" > version< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > 1.0< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > standalone< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > yes< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > ?> < / span > < / span > < span class = "Comment" > < span class = "Comment" > < !--< / span > YES its < span class = "sc" > xml< / span > < span class = "Comment" > -→ < / span > < / span >
2011-10-21 14:48:31 +00:00
< span class = "Comment" > < span class = "Comment" > < !--< / span > ← start a comment, then write some m4 directives:< / span >
< span class = "Comment" / >
< span class = "Comment" > define(`ydef',`< xsl:variable name=" $1" select=" $2" /> ')< / span >
< span class = "Comment" > define(`yprint',`< xsl:text disable-output-escaping=" yes" > < ![CDATA[$1]]> < /xsl:text> ')< / span >
< span class = "Comment" > define(`yshow',`< xsl:value-of select=" $1" /> ')< / span >
< span class = "Comment" / >
< span class = "Comment" > < span class = "Comment" > -→ < / span > < / span >
2011-11-16 11:57:39 +00:00
< span class = "Comment" > < span class = "Comment" > < !--< / span > Yes, < span class = "sc" > xml< / span > sucks to be read < span class = "Comment" > -→ < / span > < / span >
2011-10-21 14:48:31 +00:00
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > xsl< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > stylesheet< / span > < span class = "MetaTagAll" > version< / span > =< span class = "String" > < span class = "String" > " < / span > 1.0< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > xmlns< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > xsl< / span > =< span class = "String" > < span class = "String" > " < / span > http://www.w3.org/1999/XSL/Transform< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > And it sucks even more to edit < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > xsl< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > template< / span > < span class = "MetaTagAll" > match< / span > =< span class = "String" > < span class = "String" > " < / span > /< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span >
ydef(myvar,value)
yprint(Hello world!)
yshow(myvar)
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > xsl< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > template< / span > < span class = "MetaTagAll" > > < / span > < / span >
< / pre >
2011-11-16 11:57:39 +00:00
< p > Maintenant compilons simplement ce fichier :< / p >
2011-10-21 14:48:31 +00:00
< pre class = "twilight" >
m4 myfile.m4 < span class = "Keyword" > > < / span > myfile.xslt
< / pre >
2011-11-16 11:57:39 +00:00
< p > Et vous pouvez profitez ! Maintenant < span class = "sc" > xslt< / span > devient plus lisible et plus facile à éditer.< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< h2 id = "la-partie-la-plus-cool-les-fractales-" > La partie la plus cool: les fractales !< / h2 >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > À ses débuts, beaucoup pensaient que ce serait le nouveau Flash. Apparemment, ce devrait plutôt être < code > canvas< / code > avec du javascript qui occupera cette place.< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > Tout d’ :< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > < a href = "/Scratch/img/blog/SVG-and-m4-fractals/main.svg" >
< img alt = "Yesod logo made in SVG and m4" src = "/Scratch/img/blog/SVG-and-m4-fractals/main.png" / >
Cliquez sur l’ < span class = "sc" > svg< / span > directement. Attention, si vous n’
< / a > < / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > Le positionnement du texte “esod” par rapport au “λ” renversé a été en jouant avec firebug. De cette façon je n’ < / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > Faire une telle fractale revient à :< / p >
2011-10-21 14:48:31 +00:00
< ol >
2011-11-16 11:57:39 +00:00
< li > Choisir un élément racine ;< / li >
< li > le dupliquer et le transformer ;< / li >
< li > le résultat est un nouveau sous-élément ;< / li >
< li > répéter à partir de 2 mais en utilisant le sous-élément comme nouvelle racine.< / li >
< li > Arréter lorsque la récursion est assez profonde.< / li >
2011-10-21 14:48:31 +00:00
< / ol >
2011-11-16 11:57:39 +00:00
< p > Si j’ ’ < span class = "sc" > svg< / span > .
Simplement parce que la transformation est toujours la même, mais je ne pouvais pas dire, utiliser la transformation appelée “titi”.
Plutôt que copier du < span class = "sc" > xml< / span > , j’ < / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > Et voici le code commenté :< / p >
2011-10-21 14:48:31 +00:00
< div class = "code" > < div class = "file" > < a href = "/Scratch/fr/blog/SVG-and-m4-fractals/code/yesodlogo.m4" > ➥ yesodlogo.m4 < / a > < / div > < div class = "withfile" >
< pre class = "twilight" >
< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > < ?< / span > < span class = "DoctypeXmlProcessing" > xml< / span > < span class = "DoctypeXmlProcessing" > version< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > 1.0< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > encoding< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > UTF-8< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > standalone< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > no< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > ?> < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > < / span >
< span class = "Comment" > M4 Macros< / span >
< span class = "Comment" > define(`YTRANSFORMONE', `scale(.43) translate(-120,-69) rotate(-10)')< / span >
< span class = "Comment" > define(`YTRANSFORMTWO', `scale(.43) translate(-9,-67.5) rotate(10)')< / span >
< span class = "Comment" > define(`YTRANSFORMTHREE', `scale(.43) translate(53,41) rotate(120)')< / span >
< span class = "Comment" > define(`YGENTRANSFORM', `translate(364,274) scale(3)')< / span >
< span class = "Comment" > define(`YTRANSCOMPLETE', `< / span >
< span class = "Comment" > < g id=" level_$1" > < / span >
< span class = "Comment" > < use style=" opacity: .8" transform=" YTRANSFORMONE" xlink:href=" #level_$2" /> < / span >
< span class = "Comment" > < use style=" opacity: .8" transform=" YTRANSFORMTWO" xlink:href=" #level_$2" /> < / span >
< span class = "Comment" > < use style=" opacity: .8" transform=" YTRANSFORMTHREE" xlink:href=" #level_$2" /> < / span >
< span class = "Comment" > < /g> < / span >
< span class = "Comment" > < use transform=" YGENTRANSFORM" xlink:href=" #level_$1" /> < / span >
< span class = "Comment" > ')< / span >
< span class = "Comment" > < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > svg< / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > xmlns< / span > =< span class = "String" > < span class = "String" > " < / span > http://www.w3.org/2000/svg< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > xmlns< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > xlink< / span > =< span class = "String" > < span class = "String" > " < / span > http://www.w3.org/1999/xlink< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > x< / span > =< span class = "String" > < span class = "String" > " < / span > 64< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > y< / span > =< span class = "String" > < span class = "String" > " < / span > 64< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > width< / span > =< span class = "String" > < span class = "String" > " < / span > 512< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > height< / span > =< span class = "String" > < span class = "String" > " < / span > 512< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > viewBox< / span > =< span class = "String" > < span class = "String" > " < / span > 64 64 512 512< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > =< span class = "String" > < span class = "String" > " < / span > svg2< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > version< / span > =< span class = "String" > < span class = "String" > " < / span > 1.1< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > g< / span > < span class = "MetaTagAll" > id< / span > =< span class = "String" > < span class = "String" > " < / span > level_0< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > < span class = "Comment" > < span class = "Comment" > < !--< / span > some group, if I want to add other elements < span class = "Comment" > -→ < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > the text " λ" < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > text< / span > < span class = "MetaTagAll" > id< / span > =< span class = "String" > < span class = "String" > " < / span > lambda< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > fill< / span > =< span class = "String" > < span class = "String" > " < / span > #333< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > style< / span > =< span class = "String" > < span class = "String" > " < / span > font-family:Ubuntu; font-size: 100px< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > transform< / span > =< span class = "String" > < span class = "String" > " < / span > rotate(180)< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > λ< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > text< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > g< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > the text " esod" < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > text< / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > fill< / span > =< span class = "String" > < span class = "String" > " < / span > #333< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > style< / span > =< span class = "String" > < span class = "String" > " < / span > font-family:Ubuntu; font-size: 28px; letter-spacing: -0.10em< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > x< / span > =< span class = "String" > < span class = "String" > " < / span > -17.3< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > y< / span > =< span class = "String" > < span class = "String" > " < / span > 69< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > transform< / span > =< span class = "String" > < span class = "String" > " < / span > YGENTRANSFORM< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > esod< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > text< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > ROOT ELEMENT < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > use< / span > < span class = "MetaTagAll" > transform< / span > =< span class = "String" > < span class = "String" > " < / span > YGENTRANSFORM< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > xlink< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > href< / span > =< span class = "String" > < span class = "String" > " < / span > #level_0< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > /> < / span > < / span >
YTRANSCOMPLETE(1,0) < span class = "Comment" > < span class = "Comment" > < !--< / span > First recursion < span class = "Comment" > -→ < / span > < / span >
YTRANSCOMPLETE(2,1) < span class = "Comment" > < span class = "Comment" > < !--< / span > deeper < span class = "Comment" > -→ < / span > < / span >
YTRANSCOMPLETE(3,2) < span class = "Comment" > < span class = "Comment" > < !--< / span > deeper < span class = "Comment" > -→ < / span > < / span >
YTRANSCOMPLETE(4,3) < span class = "Comment" > < span class = "Comment" > < !--< / span > even deeper < span class = "Comment" > -→ < / span > < / span >
YTRANSCOMPLETE(5,4) < span class = "Comment" > < span class = "Comment" > < !--< / span > Five level seems enough < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > svg< / span > < span class = "MetaTagAll" > > < / span > < / span >
< / pre >
< / div > < / div >
2011-11-16 11:57:39 +00:00
< p > et je l’ < span class = "sc" > svg< / span > et ensuite en < span class = "sc" > png< / span > avec :< / p >
2011-10-21 14:48:31 +00:00
< pre class = "twilight" >
m4 yesodlogo.m4 < span class = "Keyword" > > < / span > yesodlogo.svg < span class = "Keyword" > & & < / span > convert yesodlogo.svg yesodlogo.png
< / pre >
2011-11-16 11:57:39 +00:00
< p > Le λ est dupliqué avec trois “transformations” différentes. Les transformations sont : < code > YTRANSFORMONE< / code > , < code > YTRANSFORMTWO< / code > et < code > YTRANSFORMTHREE< / code > .< / p >
< p > Chaque transformation est une similarité (translation + rotation + zoom, ce qui est équivalent à juste rotation + zoom, mais bon).< / p >
< p > Une fois fixée chaque transformation peut ensuite être réutilisée pour chaque nouveau niveau.< / p >
< p > Maintenant < code > YTRANSCOMPLETE< / code > entre en jeu.
Cette macro prend deux arguments.
Le niveau courant et le niveau précédent.
Cette macro va dupliquer le niveau précédent en lui appliquant chacune des 3 transformations.
Au niveau 0, le contenu est un seul grand λ, le niveau 1 en contient 3. Le niveau 2 en contient 9, etc…
Le niveau 5 contient 3< sup > 5< / sup > =243 λ.< / p >
< p > L’ ’
Sans ce système de macro, pour faire une preview il m’ < / p >
2011-10-21 14:48:31 +00:00
< h2 id = "conclusion" > Conclusion< / h2 >
2011-11-16 11:57:39 +00:00
< p > Ce fut très amusant de faire une fractale en < span class = "sc" > svg< / span > , mais la partie la plus intéressante était d’ ’
J’ < span class = "sc" > xslt< / span > pour une vrai application par exemple.
On peut aussi utiliser m4 pour faire des includes d’
Typiquement je l’
Mais vous pouvez aussi le considérer pour des includes dans du HTML.
Par exemple pour fabriquer un site statique rapidement, m4 peut se révéler utile pour inclure un footer ou un menu sur toutes les pages par exemple.< / p >
2011-10-21 14:48:31 +00:00
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomfr" >
s'abonner
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Commentaires< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > commentaires< / h2 >
< noscript >
Vous devez activer javascript pour commenter.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
var idcomments_post_id = '/Scratch/fr/blog/SVG-and-m4-fractals/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/SVG-and-m4-fractals/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
< ul > < li > < a href = "/Scratch/fr/" > Bienvenue< / a > < / li >
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/fr/softwares/" > Softwares< / a > < / li >
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li > < / ul >
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
articles précédents
< div class = "previous_article" >
< a href = "/Scratch/fr/blog/Yesod-excellent-ideas/" > < span class = "nicer" > «< / span > Les idées de yesod< / a >
< / div >
< div class = "previous_article" >
2011-11-16 12:08:26 +00:00
< a href = "/Scratch/fr/blog/Higher-order-function-in-zsh/" > < span class = "nicer" > «< / span > Fonctions d'ordre supérieur en zsh< / a >
2011-10-21 14:48:31 +00:00
< / div >
< div class = "previous_article" >
2011-11-16 12:08:26 +00:00
< a href = "/Scratch/fr/blog/programming-language-experience/" > < span class = "nicer" > «< / span > Mon expérience avec les languages de programmation< / a >
2011-10-21 14:48:31 +00:00
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/deed.fr" > Droits de reproduction ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
Écrit le : 20/10/2011
2011-11-16 12:08:26 +00:00
modifié le : 16/11/2011
2011-10-21 14:48:31 +00:00
< / div >
< div >
Site entièrement réalisé avec
< a href = "http://www.vim.org" > Vim< / a >
et
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
< a href = "/Scratch/fr/validation/" > Validation< / a >
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >
