-----
isHidden: false
menupriority: 1
kind: article
created_at: 2011-10-20T11:39:36+02:00
en: title: SVG and m4 fractals
en: subtitle: Increase the power of deficient languages.
fr: title: des fractales en SVG et m4
fr: subtitle: Accroître le pouvoir des languages déficients.
author_name: Yann Esposito
author_uri: yannesposito.com
# tags:
-----
<%= blogimage("main.png","Yesod logo made in SVG and m4") %>
begindiv(intro)
en: <%= tldr %> How to use m4 and SVG to make fractals easily.
fr: <%= tlal %> Voilà comment faire des fractales avec m4 et SVG.
enddiv
en: You might want to know how I made the logo for yesod in my preceding post.
fr: Dans mon précédent article j'ai fait un logo pour yesod. En faisant celà j'ai aussi découvert une technique efficace pour contourner les problèmes de langages déficients.
en: First, I hate with passion most XML based languages.
en: Because XML wasn't created to be exposed to developer.
en: XML should be read and generated by some software.
en: But you should _never_ read or edit it manually.
fr: Tout d'abord, je déteste la plupart des langages basés sur XML.
fr: XML n'a pas été créé pour être vu par des êtres humains.
fr: XML devrait être lu et généré par des programmes.
fr: May on ne devrait _jamais_ le lire ou l'éditer directement.
en: ## The XSLT Example
fr: ## Un exemple avec XSLT
en: The main language where XML fail terribly is XSLT.
en: XPath is very good, but XSLT use one of the worst syntax I ever crossed in my life of developer.
fr: Le principale langage qui démontre l'incroyable inéfficacité d'XML.
fr: XPath est très bon, mais XSLT utilise la plus horrible syntaxe que j'ai croisée dans ma vie de développeur.
fr: En tout cas pour un langage utilisé réellement (brainfuck est pas mal non plus).
en: In order to reduce the verbosity of such so bad languages, there is a way.
en: **`m4`**. Yes, the preprocessor you use when you program in `C` and `C++`.
fr: Pour réduire la "verbosité" de tels langages, il y a un moyen.
fr: **`m4`**.
fr: Oui, le préprocesseur utilisé par `C` et `C++`.
en: Here are some example:
fr: Voici certains exemples :
en: - Variable, instead of writing the natural `myvar = value`, here is the xslt way of doing this:
fr: - Les variables, au lieu d'écrire `myvar = value`, voici la version xslt :
en: - Printing something. Instead of `print "Hello world!"` here is the xslt equivalent:
fr: - Afficher quelquechose. Au lieu de `print "Hello world!"`, xslt nous offre :
en: - printing the value of a variable, instead of `print myvar` the xslt is:
fr: - afficher la valeur d'une variable, au lieu de `print myvar`, nous avons droit à :
en: - Just try to imagine how verbose it is to declare a function with this language.
fr: - Essayez d'imaginer à quel point il est verbeux de déclarer une fonction dans ce langage.
en: ## The cure (m4 to the rescue)
fr: ## La solution (m4 à la rescousse)
ydef(myvar,value)
yprint(Hello world!)
yshow(myvar)
en: Now just compile this file:
fr: Maintenant compilons simplement ce fichier :
m4 myfile.m4 > myfile.xslt
en: And you can profit! Now xslt is more readable and easier to edit!
fr: Et vous pouvez profitez ! Maintenant xslt devient plus lisible et plus facile à éditer.
en: ## The cool part: Fractals!
fr: ## La partie la plus cool: les fractales !
en: SVG is a format to display vector graphics, it even support animations.
en: At its beginning some people believed it would be the new Flash. Apparently, it will be more canvas + js.
fr: SVG est un format pour afficher des images vectorielles. Le fomat supporte même les animations.
fr: À ses débuts, beaucoup pensaient que ce serait le nouveau Flash. Apparemment, ce devrait plutôt être `canvas` avec du javascript qui occupera cette place.
en: Let me show you the result:
fr: Tout d'abord, laissez moi vous montrer le résultat :
en: The positionning of the "esod" text with regards to the reversed "λ" was done by changing position in firebug. I didn't had to manually regenerate to test.
fr: Le positionnement du texte "esod" par rapport au "λ" renversé a été en jouant avec firebug. De cette façon je n'avais pas à regénérer pour tester.
en: Making such a fractal is mostly:
fr: Faire une telle fractale revient à :
en: 1. take a root element
en: 2. duplicate and transform it (scaling, translating, rotate)
en: 3. the result is a sub new element.
en: 4. repeat from 2 but by taking the sub new element as new root.
en: 5. Stop when recursion is deep enough.
fr: 1. Choisir un élément racine ;
fr: 2. le dupliquer et le transformer ;
fr: 3. le résultat est un nouveau sous-élément ;
fr: 4. répéter à partir de 2 mais en utilisant le sous-élément comme nouvelle racine.
fr: 5. Arréter lorsque la récursion est assez profonde.
en: If I had to do this for each step, I had make a lot of copy/paste in my SVG, because the transformation is always the same, but I cannot say, use transformation named "titi". Then instead of manually copying some XML, I used m4
fr: Si j'avais dû faire ça manuellement, il m'aurait fallu faire beaucoup de copier/coller dans mon SVG.
fr: Simplement parce que la transformation est toujours la même, mais je ne pouvais pas dire, utiliser la transformation appelée "titi".
fr: Plutôt que copier du XML, j'ai utilisé m4.
en: and here is the commented code:
fr: Et voici le code commenté :
en: and I compiled it to svg and then to png with:
fr: et je l'ai compile en svg et ensuite en png avec :
m4 yesodlogo.m4 > yesodlogo.svg && convert yesodlogo.svg yesodlogo.png
## Conclusion
en: It was fun to make a fractal in svg, but the interesting part is how to augment the power of a language using this preprocessor method.
en: I used the xslt trick at work for example.
fr: Ce fut très amusant de faire une fractale en svg, mais la partie la plus intéressante était d'augmenter la puissance d'expressivité du langage en utilise un préprocesseur.
fr: J'ai utilisé cette méthode avec xslt pour une vrai application par exemple.