-----
isHidden: false
menupriority: 1
kind: article
created_at: 2011-10-20T11:39:36+02:00
title: SVG and m4 fractals
subtitle: Increase the power of deficient languages.
author_name: Yann Esposito
author_uri: yannesposito.com
# tags:
-----
<%= blogimage("main.png","Yesod logo made in SVG and m4") %>
begindiv(intro)
<%= tldr %> How to use m4 and SVG to make fractals easily.
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)
ydef(myvar,value)
yprint(Hello world!)
yshow(myvar)
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:
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.