<spanclass="tomenu"><ahref="#navigation">↓ Menu ↓</a></span>
<spanclass="flush"></span>
</div>
</div>
<divid="titre">
<h1>Increase the power of deficient languages.</h1>
<h2>Fractals with SVG and m4</h2>
</div>
<divclass="flush"></div>
<divid="afterheader"class="article">
<divclass="corps">
<div>
<imgsrc="../../../../Scratch/img/blog/SVG-and-m4-fractals/main.png"alt="Yesod logo made in SVG and m4"/>
</div>
<divclass="intro">
<p><spanclass="sc"><abbrtitle="Too long; didn't read">tl;dr</abbr>: </span> How to use m4 to increase the power of deficient languages. Two examples: improve <spanclass="sc">xslt</span> syntax and make fractal with <spanclass="sc">svg</span>.</p>
</div>
<p><spanclass="sc">xml</span> was a very nice idea about structuring data. Some people where so enthusiastic about <spanclass="sc">xml</span> they saw it everywhere. The idea was: the future is <spanclass="sc">xml</span>. Then some believed it would be a good idea to invent many <spanclass="sc">xml</span> compatible format and even programming languages with <spanclass="sc">xml</span> syntax.</p>
<p>Happy! Happy! Joy! Joy!</p>
<p>Unfortunately, <spanclass="sc">xml</span> was made to transfert structured data. Not a format a human should see or edit directly. The sad reality is <spanclass="sc">xml</span> 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 <spanclass="sc">xml</span> 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 <spanclass="sc">xml</span>.</p>
<p>Unfortunately <spanclass="sc">xml</span> 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…</p>
<p>If like me you hate with passion <spanclass="sc">xslt</span> or writing <spanclass="sc">xml</span>, I will show you how you could deal with this bad format or language.</p>
<p>Let’s start by the worst case of misused <spanclass="sc">xml</span> I know: <spanclass="sc">xslt</span>. Any developer who had to deal with <spanclass="sc">xslt</span> know how horrible it is.</p>
<p>In order to reduce the verbosity of such a bad languages, there is a way. <strong><code>m4</code></strong>. Yes, the preprocessor you use when you program in <code>C</code> and <code>C++</code>.</p>
<p>Here are some example:</p>
<ul>
<li>Variable, instead of writing the natural <code>myvar = value</code>, here is the <sc>xslt</sc> way of doing this:</li>
<aclass="sourceLine"id="cb4-9"title="9"><spanclass="co"><!-- Yes, <span class="sc">xml</span> sucks to be read --></span></a>
<p><spanclass="sc">svg</span> is an <spanclass="sc">xml</span> 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.</p>
<imgsrc="../../../../Scratch/img/blog/SVG-and-m4-fractals/main.png"alt="Yesod logo made in SVG and m4"/>
</div>
<p>Click to view directly the <spanclass="sc">svg</span>. It might slow down your computers if you have an old one. </a></p>
<p>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.</p>
<p>Making such a fractal is mostly:</p>
<oltype="1">
<li>take a root element</li>
<li>duplicate and transform it (scaling, translating, rotate)</li>
<li>the result is a sub new element.</li>
<li>repeat from 2 but by taking the sub new element as new root.</li>
<li>Stop when recursion is deep enough.</li>
</ol>
<p>If I had to do this for each step, I had make a lot of copy/paste in my <spanclass="sc">svg</span>, because the transformation is always the same, but I cannot say, use transformation named “titi”. Then instead of manually copying some <spanclass="sc">xml</span>, I used m4</p>
<aclass="sourceLine"id="cb6-22"title="22"><spanclass="kw"><g</span><spanclass="ot"> id=</span><spanclass="st">"level_0"</span><spanclass="kw">></span><spanclass="co"><!-- some group, if I want to add other elements --></span></a>
<aclass="sourceLine"id="cb6-23"title="23"><spanclass="co"><!-- the text "λ" --></span></a>
<p>The main λ is duplicated 3 times. Each transformation is named by: <code>YTRANSFORMONE</code>, <code>YTRANSFORMTWO</code> and <code>YTRANSFORMTHREE</code>.</p>
<p>Each transformation is just a similarity (translate + rotation + scale).</p>
<p>Once fixed, we should now simply copy and repeat for each new level.</p>
<p>Now it is time to talk about where the magic occurs: <code>YTRANSCOMPLETE</code>. This macro takes two arguments. The current depth and the preceding one. It duplicates using the three transformations the preceding level.</p>
<ul>
<li>At level 0 there is only one λ,</li>
<li>at level 1 there is 3 λ,</li>
<li>at level 2 there is 9 λ</li>
<li>etc…</li>
</ul>
<p>At the final 5th level there is 3<sup>5</sup>=243 λ. All level combined have 3<sup>6</sup>-1 / 2 = 364 λ.</p>
<p>I could preview the final result easily. Without the macro system, I would have to make 5 copy/paste + modifications for each try.</p>
<h2id="conclusion">Conclusion</h2>
<p>It was fun to make a fractal in <sc>svg</sc>, but the interesting part is how to augment the power of a language using this preprocessor method. I used the <sc>xslt</sc> 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 <sc>html</sc> instead of copy/paste the menu and the footer, or using AJAX.</p>
<p>Another usage I thouhgt about is to use m4 to organize languages such as brainfuck.</p>
