403 lines
No EOL
18 KiB
HTML
403 lines
No EOL
18 KiB
HTML
<?xml version="1.0" encoding="utf-8"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
||
|
||
<meta name="keywords" content="m4, SVG, XSLT, XML, design, programming, fractal">
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="/Scratch/img/favicon.ico" />
|
||
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/main.css" />
|
||
<link rel="stylesheet" type="text/css" href="/Scratch/css/solarized.css" />
|
||
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
|
||
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomen"/>
|
||
|
||
<link rel="alternate" lang="fr" xml:lang="fr" title="Accroître le pouvoir des languages déficients." type="text/html" hreflang="fr" href="/Scratch/fr/blog/SVG-and-m4-fractals/" />
|
||
<link rel="alternate" lang="en" xml:lang="en" title="Increase the power of deficient languages." type="text/html" hreflang="en" href="/Scratch/en/blog/SVG-and-m4-fractals/" />
|
||
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
|
||
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
|
||
<script type="text/javascript" src="/Scratch/js/index.js"></script>
|
||
<script type="text/javascript" src="/Scratch/js/highlight/highlight.pack.js"></script>
|
||
<script type="text/javascript" src="/Scratch/js/article.js"></script>
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
<title>Increase the power of deficient languages.</title>
|
||
</head>
|
||
<body lang="en" class="article">
|
||
<script type="text/javascript">// <![CDATA[
|
||
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="loading..."/></div>');
|
||
// ]]>
|
||
</script>
|
||
|
||
<div id="content">
|
||
|
||
<div id="choix">
|
||
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
||
<div id="choixlang">
|
||
<a href="/Scratch/fr/blog/SVG-and-m4-fractals/" onclick="setLanguage('fr')">en Français</a>
|
||
</div>
|
||
<div class="flush"></div>
|
||
</div>
|
||
<div id="titre">
|
||
<h1>
|
||
Increase the power of deficient languages.
|
||
</h1>
|
||
|
||
<h2>
|
||
Fractals with SVG and m4
|
||
</h2>
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="flush"></div>
|
||
<div id="afterheader">
|
||
<div class="corps">
|
||
<p><img alt="Yesod logo made in SVG and m4" src="/Scratch/img/blog/SVG-and-m4-fractals/main.png" /></p>
|
||
|
||
|
||
<div class="intro">
|
||
|
||
|
||
<p><span class="sc"><abbr title="Too long; didn't read">tl;dr</abbr>: </span> How to use m4 to increase the power of deficient languages. Two examples: improve <span class="sc">xslt</span> syntax and make fractal with <span class="sc">svg</span>.</p>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<p><span class="sc">xml</span> was a very nice idea about structuring data.
|
||
Some people where so enthusiastic about <span class="sc">xml</span> they saw it everywhere.
|
||
The idea was: the future is <span class="sc">xml</span>.
|
||
Then some believed it would be a good idea to invent many <span class="sc">xml</span> compatible format and even programming languages with <span class="sc">xml</span> syntax.</p>
|
||
|
||
<p>Happy! Happy! Joy! Joy! </p>
|
||
|
||
<p>Unfortunately, <span class="sc">xml</span> was made to transfert structured data.
|
||
Not a format a human should see or edit directly.
|
||
The sad reality is <span class="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 <span class="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 <span class="sc">xml</span>.</p>
|
||
|
||
<p>Unfortunately <span class="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 <span class="sc">xslt</span> or writing <span class="sc">xml</span>,
|
||
I will show you how you could deal with this bad format
|
||
or language.</p>
|
||
|
||
<h2 id="the-span-classscxsltspan-example">The <span class="sc">xslt</span> Example</h2>
|
||
|
||
<p>Let’s start by the worst case of misused <span class="sc">xml</span> I know: <span class="sc">xslt</span>.
|
||
Any developer who had to deal with <span class="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 <span class="sc">xslt</span> way of doing this:</li>
|
||
</ul>
|
||
|
||
<pre><code class="xml"><xsl:variable name="myvar" select="value"/>
|
||
</code></pre>
|
||
|
||
<ul>
|
||
<li>Printing something. Instead of <code>print "Hello world!"</code> here is the <span class="sc">xslt</span> equivalent:</li>
|
||
</ul>
|
||
|
||
<pre><code class="xml"><xsl:text
|
||
disable-output-escaping="yes"><![CDATA[Hello world!
|
||
]]></xsl:text>
|
||
</code></pre>
|
||
|
||
<ul>
|
||
<li>printing the value of a variable, instead of <code>print myvar</code> the <span class="sc">xslt</span> is:</li>
|
||
</ul>
|
||
|
||
<pre><code class="xml"><xslt:value-of select="myvar"/>
|
||
</code></pre>
|
||
|
||
<ul>
|
||
<li>Just try to imagine how verbose it is to declare a function with this language.</li>
|
||
</ul>
|
||
|
||
<h2 id="the-cure-m4-to-the-rescue">The cure (m4 to the rescue)</h2>
|
||
|
||
<pre><code class="xml"><?xml version="1.0" standalone="yes"?> <!-- YES its <span class="sc">xml</span> -->
|
||
<!-- ← start a comment, then write some m4 directives:
|
||
|
||
define(`ydef',`<xsl:variable name="$1" select="$2"/>')
|
||
define(`yprint',`<xsl:text disable-output-escaping="yes"><![CDATA[$1]]></xsl:text>')
|
||
define(`yshow',`<xsl:value-of select="$1"/>')
|
||
|
||
-->
|
||
<!-- Yes, <span class="sc">xml</span> sucks to be read -->
|
||
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||
<!-- And it sucks even more to edit -->
|
||
<xsl:template match="/">
|
||
ydef(myvar,value)
|
||
yprint(Hello world!)
|
||
yshow(myvar)
|
||
</xsl:template>
|
||
</code></pre>
|
||
|
||
<p>Now just compile this file:</p>
|
||
|
||
<pre><code class="zsh">m4 myfile.m4 > myfile.xslt
|
||
</code></pre>
|
||
|
||
<p>Profit! Now <span class="sc">xslt</span> is more readable and easier to edit!</p>
|
||
|
||
<h2 id="the-cool-part-fractals">The cool part: Fractals!</h2>
|
||
|
||
<p><span class="sc">svg</span> is an <span class="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>
|
||
|
||
<p>Let me show you the result:</p>
|
||
|
||
<p><a href="blogimagedirmain.svg">
|
||
<img alt="Yesod logo made in SVG and m4" src="/Scratch/img/blog/SVG-and-m4-fractals/main.png" />
|
||
Click to view directly the <span class="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>
|
||
|
||
<ol>
|
||
<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 <span class="sc">svg</span>, because the transformation is always the same, but I cannot say, use transformation named “titi”. Then instead of manually copying some <span class="sc">xml</span>, I used m4</p>
|
||
|
||
<p>and here is the commented code:</p>
|
||
|
||
<div class="codefile"><a href="/Scratch/en/blog/SVG-and-m4-fractals/code/yesodlogo.m4">➥ yesodlogo.m4</a></div>
|
||
|
||
<pre><code class="xml"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||
<!--
|
||
M4 Macros
|
||
define(`YTRANSFORMONE', `scale(.43) translate(-120,-69) rotate(-10)')
|
||
define(`YTRANSFORMTWO', `scale(.43) translate(-9,-67.5) rotate(10)')
|
||
define(`YTRANSFORMTHREE', `scale(.43) translate(53,41) rotate(120)')
|
||
define(`YGENTRANSFORM', `translate(364,274) scale(3)')
|
||
define(`YTRANSCOMPLETE', `
|
||
<g id="level_$1">
|
||
<use style="opacity: .8" transform="YTRANSFORMONE" xlink:href="#level_$2" />
|
||
<use style="opacity: .8" transform="YTRANSFORMTWO" xlink:href="#level_$2" />
|
||
<use style="opacity: .8" transform="YTRANSFORMTHREE" xlink:href="#level_$2" />
|
||
</g>
|
||
<use transform="YGENTRANSFORM" xlink:href="#level_$1" />
|
||
')
|
||
-->
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
x="64" y="64" width="512" height="512" viewBox="64 64 512 512"
|
||
id="svg2" version="1.1">
|
||
<g id="level_0"> <!-- some group, if I want to add other elements -->
|
||
<!-- the text "λ" -->
|
||
<text id="lambda"
|
||
fill="#333" style="font-family:Ubuntu; font-size: 100px"
|
||
transform="rotate(180)">λ</text>
|
||
</g>
|
||
<!-- the text "esod" -->
|
||
<text
|
||
fill="#333"
|
||
style="font-family:Ubuntu; font-size: 28px; letter-spacing: -0.10em"
|
||
x="-17.3"
|
||
y="69"
|
||
transform="YGENTRANSFORM">esod</text>
|
||
<!-- ROOT ELEMENT -->
|
||
<use transform="YGENTRANSFORM" xlink:href="#level_0" />
|
||
|
||
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 -->
|
||
</svg>
|
||
</code></pre>
|
||
|
||
<p>and I compiled it to <span class="sc">svg</span> and then to <span class="sc">png</span> with:</p>
|
||
|
||
<pre><code class="zsh">m4 yesodlogo.m4 > yesodlogo.svg && convert yesodlogo.svg yesodlogo.png
|
||
</code></pre>
|
||
|
||
<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 5<sup>th</sup> 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>
|
||
|
||
<h2 id="conclusion">Conclusion</h2>
|
||
|
||
<p>It was fun to make a fractal in <span class="sc">svg</span>, but the interesting part is how to augment the power of a language using this preprocessor method.
|
||
I used the <span class="sc">xslt</span> 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 <span class="sc">html</span> 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>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div id="social">
|
||
<div class="left"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="yogsototh">Tweet</a>
|
||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
||
</div>
|
||
<div class="left"> <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="106"></div>
|
||
<script type="text/javascript">
|
||
(function() {
|
||
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
|
||
po.src = 'https://apis.google.com/js/plusone.js';
|
||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
|
||
})();
|
||
</script>
|
||
</div>
|
||
<div class="flush"></div>
|
||
</div>
|
||
<div id="choixrss">
|
||
<a id="rss" href="http://feeds.feedburner.com/yannespositocomen">
|
||
Subscribe
|
||
</a>
|
||
</div>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){
|
||
$('#comment').hide();
|
||
$('#clickcomment').click(showComments);
|
||
});
|
||
function showComments() {
|
||
$('#comment').show();
|
||
$('#clickcomment').fadeOut();
|
||
}
|
||
document.write('<div id="clickcomment">Comments & Share</div>');
|
||
</script>
|
||
<div class="flush"></div>
|
||
|
||
<div class="corps" id="comment">
|
||
<h2 class="first">comments</h2>
|
||
<noscript>
|
||
You must enable javascript to comment.
|
||
</noscript>
|
||
|
||
<script type="text/javascript">
|
||
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
|
||
var idcomments_post_id = '/Scratch/en/blog/SVG-and-m4-fractals/';
|
||
var idcomments_post_url = 'http://yannesposito.com/Scratch/en/blog/SVG-and-m4-fractals/';
|
||
</script>
|
||
<span id="IDCommentsPostTitle" style="display:none"></span>
|
||
<script type='text/javascript' src='/Scratch/js/genericCommentWrapperV2.js'></script>
|
||
|
||
</div>
|
||
|
||
<div id="entete" class="corps_spaced">
|
||
<div id="liens">
|
||
<ul><li><a href="/Scratch/en/">Home</a></li>
|
||
<li><a href="/Scratch/en/blog/">Blog</a></li>
|
||
<li><a href="/Scratch/en/softwares/">Softwares</a></li>
|
||
<li><a href="/Scratch/en/about/">About</a></li></ul>
|
||
</div>
|
||
<div class="flush"></div>
|
||
<hr/>
|
||
<div id="next_before_articles">
|
||
<div id="previous_articles">
|
||
previous entries
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/en/blog/Yesod-excellent-ideas/"><span class="nicer">«</span> Yesod excellent ideas</a>
|
||
</div>
|
||
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/en/blog/Higher-order-function-in-zsh/"><span class="nicer">«</span> Higher order function in zsh</a>
|
||
</div>
|
||
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/en/blog/programming-language-experience/"><span class="nicer">«</span> Programming Language Experience</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div id="next_articles">
|
||
next entries
|
||
|
||
<div class="next_article">
|
||
<a href="/Scratch/en/blog/Yesod-tutorial-for-newbies/">Haskell web programming <span class="nicer">»</span></a>
|
||
</div>
|
||
|
||
|
||
<div class="next_article">
|
||
<a href="/Scratch/en/blog/Typography-and-the-Web/">Typography and the Web <span class="nicer">»</span></a>
|
||
</div>
|
||
|
||
|
||
<div class="next_article">
|
||
<a href="/Scratch/en/blog/Haskell-the-Hard-Way/">Learn Haskell Fast and Hard <span class="nicer">»</span></a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="bottom">
|
||
<div>
|
||
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
|
||
</div>
|
||
<div>
|
||
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a>
|
||
</div>
|
||
<div id="lastmod">
|
||
Created: 10/20/2011
|
||
Modified: 04/26/2012
|
||
</div>
|
||
<div>
|
||
Entirely done with
|
||
<a href="http://www.vim.org">Vim</a>
|
||
and
|
||
<a href="http://nanoc.stoneship.org">nanoc</a>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</body>
|
||
</html> |