scratch/content/html/fr/blog/SVG-and-m4-fractals.md

isHidden	menupriority	kind	created_at	title	subtitle	author_name	author_uri
false	1	article	2011-10-20T11:39:36+02:00	SVG and m4 fractals	Accroître le pouvoir des languages déficients.	Yann Esposito	yannesposito.com

<%= blogimage("main.png","Yesod logo made in SVG and m4") %>

begindiv(intro)

<%= tlal %> Voilà comment faire des fractales avec m4 et SVG.

enddiv

You might want to know how I made the logo for yesod in my preceding post.

First, I hate with passion most XML based languages. Because XML wasn't created to be exposed to developer. XML should be read and generated by some software. But you should never read or edit it manually.

The XSLT Example

The main language where XML fail terribly is XSLT. XPath is very good, but XSLT use one of the worst syntax I ever crossed in my life of developer.

In order to reduce the verbosity of such so bad languages, there is a way. m4. Yes, the preprocessor you use when you program in C and C++.

Here are some example:

• Variable, instead of writing the natural myvar = value, here is the xslt way of doing this:

• Printing something. Instead of print "Hello world!" here is the xslt equivalent:

• printing the value of a variable, instead of print myvar the xslt is:

• Just try to imagine how verbose it is to declare a function with this language.

The cure (m4 to the rescue)

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> ydef(myvar,value) yprint(Hello world!) yshow(myvar) </xsl:template>

Now just compile this file:

m4 myfile.m4 > myfile.xslt

And you can profit! Now xslt is more readable and easier to edit!

The cool part: Fractals!

SVG is a format to display vector graphics, it even support animations. At its beginning some people believed it would be the new Flash. Apparently, it will be more canvas + js.

Let me show you the result:

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.

Making such a fractal is mostly:

1. take a root element
2. duplicate and transform it (scaling, translating, rotate)
3. the result is a sub new element.
4. repeat from 2 but by taking the sub new element as new root.
5. Stop when recursion is deep enough.

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

and here is the commented code:

YTRANSCOMPLETE(1,0) <!-- First recursion -->
YTRANSCOMPLETE(2,1) <!-- deeper -->
YTRANSCOMPLETE(3,2) <!-- deeper -->
YTRANSCOMPLETE(4,3) <!-- even deeper -->
YTRANSCOMPLETE(5,4) <!-- Five level seems enough -->

and I compiled it to svg and then to png with:

m4 yesodlogo.m4 > yesodlogo.svg && convert yesodlogo.svg yesodlogo.png

Conclusion

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. I used the xslt trick at work for example.