-----
isHidden: false
menupriority: 1
kind: article
created_at: 2011-10-20T11:39:36+02:00
title: Increase the power of deficient languages.
subtitle: Fractals with SVG and m4
author_name: Yann Esposito
author_uri: yannesposito.com
tags:
- m4
- SVG
- XSLT
- XML
- design
- programming
- fractal
macros:
svg: 'svg'
xml: 'xml'
xslt: 'xslt'
json: 'json'
-----
blogimage("main.png","Yesod logo made in SVG and m4")
begindiv(intro)
<%= tldr %> How to use m4 to increase the power of deficient languages. Two examples: improve %xslt syntax and make fractal with %svg.
enddiv
%xml was a very nice idea about structuring data.
Some people where so enthusiastic about %xml they saw it everywhere.
The idea was: the future is %xml.
Then some believed it would be a good idea to invent many %xml compatible format and even programming languages with %xml syntax.
Happy! Happy! Joy! Joy!
Unfortunately, %xml was made to transfert structured data.
Not a format a human should see or edit directly.
The sad reality is %xml syntax is simply verbose and ugly.
Most of the time it shouldn't be a problem, as nobody should see it.
In a perfect nice world, we should never deal directly with %xml but only use software which deal with it for us.
Guess what?
Our world isn't perfect. Too sad, a bunch of developer have to deal directly with this ugly %xml.
Unfortunately %xml isn't the only case of misused format I know.
You have many format for which it would be very nice to add variables, loops, functions...
If like me you hate with passion %xslt or writing %xml,
I will show you how you could deal with this bad format
or language.
## The %xslt Example
Let's start by the worst case of misused %xml I know: %xslt.
Any developer who had to deal with %xslt know how horrible it is.
In order to reduce the verbosity of such a 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
Profit! Now xslt is more readable and easier to edit!
## The cool part: Fractals!
%svg is an %xml format used to represent 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:
blogimage("main.png","Yesod logo made in SVG and m4")
Click to view directly the %svg. It might slow down your computers if you have an old one.
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
The main λ is duplicated 3 times. Each transformation is named by: `YTRANSFORMONE`, `YTRANSFORMTWO` and `YTRANSFORMTHREE`.
Each transformation is just a similarity (translate + rotation + scale).
Once fixed, we should now simply copy and repeat for each new level.
Now it is time to talk about where the magic occurs: `YTRANSCOMPLETE`.
This macro takes two arguments.
The current depth and the preceding one.
It duplicates using the three transformations the preceding level.
- At level 0 there is only one λ,
- at level 1 there is 3 λ,
- at level 2 there is 9 λ
- etc...
At the final 5th level there is 35=243 λ.
All level combined have 36-1 / 2 = 364 λ.
I could preview the final result easily.
Without the macro system, I would have to make 5 copy/paste + modifications for each try.
## 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.
I also used it to make include inside obscure format.
If all you want is to generate a minimal static website withou using nanoc, jekyll or hakyll (ther are plenty other alternatives). You can consider using m4 to generate your html instead of copy/paste the menu and the footer, or using AJAX.
Another usage I thouhgt about is to use m4
to organize languages such as brainfuck.