yogsototh/scratch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
scratch/output/Scratch/en/blog/SVG-and-m4-fractals/index.html

349 lines
24 KiB
HTML
Raw Normal View History

updated new article
2011-10-21 14:48:31 +00:00
<?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" />
<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/twilight.css" />
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.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="SVG and m4 fractals" type="text/html" hreflang="fr" href="/Scratch/fr/blog/SVG-and-m4-fractals/" />
<link rel="alternate" lang="en" xml:lang="en" title="SVG and m4 fractals" 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>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- < % if containMaths %>
<script type="text/javascript" src="/Scratch/js/MathJax/MathJax.js"></script>
< % end %>
-->
<title>SVG and m4 fractals</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">&darr; Menu &darr;</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>
SVG and m4 fractals
</h1>
<h2>
Increase the power of deficient languages.
</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 and SVG to make fractals easily.</p>
</div>
<p>You might want to know how I made the logo for yesod in my preceding post.</p>
<p>First, I hate with passion most XML based languages. Because XML wasn&rsquo;t created to be exposed to developer.
XML should be read and generated by some software. But you should <em>never</em> read or edit it manually.</p>
<h2 id="the-xslt-example">The XSLT Example</h2>
<p>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.</p>
<p>In order to reduce the verbosity of such so 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 class="twilight">
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">variable</span> <span class="MetaTagAll">name</span>=<span class="String"><span class="String">&quot;</span>myvar<span class="String">&quot;</span></span> <span class="MetaTagAll">select</span>=<span class="String"><span class="String">&quot;</span>value<span class="String">&quot;</span></span><span class="MetaTagAll">/&gt;</span></span>
</pre>
<ul>
<li>Printing something. Instead of <code>print "Hello world!"</code> here is the <span class="sc">xslt</span> equivalent:</li>
</ul>
<pre class="twilight">
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">text</span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">disable-output-escaping</span>=<span class="String"><span class="String">&quot;</span>yes<span class="String">&quot;</span></span><span class="MetaTagAll">&gt;</span></span><span class="String"><span class="String">&lt;![CDATA[</span>Hello world!</span>
<span class="String"><span class="String">]]&gt;</span></span><span class="MetaTagAll"><span class="MetaTagAll">&lt;/</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">text</span><span class="MetaTagAll">&gt;</span></span>
</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 class="twilight">
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">xslt</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">value-of</span> <span class="MetaTagAll">select</span>=<span class="String"><span class="String">&quot;</span>myvar<span class="String">&quot;</span></span><span class="MetaTagAll">/&gt;</span></span>
</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 class="twilight">
<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">&lt;?</span><span class="DoctypeXmlProcessing">xml</span><span class="DoctypeXmlProcessing"> version</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">&quot;</span>1.0<span class="DoctypeXmlProcessing">&quot;</span></span><span class="DoctypeXmlProcessing"> standalone</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">&quot;</span>yes<span class="DoctypeXmlProcessing">&quot;</span></span><span class="DoctypeXmlProcessing">?&gt;</span></span> <span class="Comment"><span class="Comment">&lt;!--</span> YES its XML <span class="Comment">-&rarr;</span></span>
<span class="Comment"><span class="Comment">&lt;!--</span> ← start a comment, then write some m4 directives:</span>
<span class="Comment" />
<span class="Comment">define(`ydef',`&lt;xsl:variable name=&quot;$1&quot; select=&quot;$2&quot;/&gt;')</span>
<span class="Comment">define(`yprint',`&lt;xsl:text disable-output-escaping=&quot;yes&quot;&gt;&lt;![CDATA[$1]]&gt;&lt;/xsl:text&gt;')</span>
<span class="Comment">define(`yshow',`&lt;xsl:value-of select=&quot;$1&quot;/&gt;')</span>
<span class="Comment" />
<span class="Comment"><span class="Comment">-&rarr;</span></span>
<span class="Comment"><span class="Comment">&lt;!--</span> Yes, XML sucks to be read <span class="Comment">-&rarr;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">stylesheet</span> <span class="MetaTagAll">version</span>=<span class="String"><span class="String">&quot;</span>1.0<span class="String">&quot;</span></span> <span class="MetaTagAll">xmlns</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">xsl</span>=<span class="String"><span class="String">&quot;</span>http://www.w3.org/1999/XSL/Transform<span class="String">&quot;</span></span><span class="MetaTagAll">&gt;</span></span>
<span class="Comment"><span class="Comment">&lt;!--</span> And it sucks even more to edit <span class="Comment">-&rarr;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">template</span> <span class="MetaTagAll">match</span>=<span class="String"><span class="String">&quot;</span>/<span class="String">&quot;</span></span><span class="MetaTagAll">&gt;</span></span>
ydef(myvar,value)
yprint(Hello world!)
yshow(myvar)
<span class="MetaTagAll"><span class="MetaTagAll">&lt;/</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">template</span><span class="MetaTagAll">&gt;</span></span>
</pre>
<p>Now just compile this file:</p>
<pre class="twilight">
m4 myfile.m4 <span class="Keyword">&gt;</span> myfile.xslt
</pre>
<p>And you can 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>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.</p>
<p>Let me show you the result:</p>
<object data="/Scratch/img/blog/SVG-and-m4-fractals/main.svg" type="image/svg+xml" height="512" width="512"><img alt="Yesod logo made in SVG and m4" src="/Scratch/img/blog/SVG-and-m4-fractals/main.png" /></object>
<p>The positionning of the &ldquo;esod&rdquo; text with regards to the reversed &ldquo;λ&rdquo; was done by changing position in firebug. I didn&rsquo;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 SVG, because the transformation is always the same, but I cannot say, use transformation named &ldquo;titi&rdquo;. Then instead of manually copying some XML, I used m4</p>
<p>and here is the commented code:</p>
<div class="code"><div class="file"><a href="/Scratch/en/blog/SVG-and-m4-fractals/code/yesodlogo.m4"> &#x27A5; yesodlogo.m4 </a></div><div class="withfile">
<pre class="twilight">
<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">&lt;?</span><span class="DoctypeXmlProcessing">xml</span><span class="DoctypeXmlProcessing"> version</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">&quot;</span>1.0<span class="DoctypeXmlProcessing">&quot;</span></span><span class="DoctypeXmlProcessing"> encoding</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">&quot;</span>UTF-8<span class="DoctypeXmlProcessing">&quot;</span></span><span class="DoctypeXmlProcessing"> standalone</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">&quot;</span>no<span class="DoctypeXmlProcessing">&quot;</span></span><span class="DoctypeXmlProcessing">?&gt;</span></span>
<span class="Comment"><span class="Comment">&lt;!--</span></span>
<span class="Comment"> M4 Macros</span>
<span class="Comment">define(`YTRANSFORMONE', `scale(.43) translate(-120,-69) rotate(-10)')</span>
<span class="Comment">define(`YTRANSFORMTWO', `scale(.43) translate(-9,-67.5) rotate(10)')</span>
<span class="Comment">define(`YTRANSFORMTHREE', `scale(.43) translate(53,41) rotate(120)')</span>
<span class="Comment">define(`YGENTRANSFORM', `translate(364,274) scale(3)')</span>
<span class="Comment">define(`YTRANSCOMPLETE', `</span>
<span class="Comment"> &lt;g id=&quot;level_$1&quot;&gt;</span>
<span class="Comment"> &lt;use style=&quot;opacity: .8&quot; transform=&quot;YTRANSFORMONE&quot; xlink:href=&quot;#level_$2&quot; /&gt;</span>
<span class="Comment"> &lt;use style=&quot;opacity: .8&quot; transform=&quot;YTRANSFORMTWO&quot; xlink:href=&quot;#level_$2&quot; /&gt;</span>
<span class="Comment"> &lt;use style=&quot;opacity: .8&quot; transform=&quot;YTRANSFORMTHREE&quot; xlink:href=&quot;#level_$2&quot; /&gt;</span>
<span class="Comment"> &lt;/g&gt;</span>
<span class="Comment"> &lt;use transform=&quot;YGENTRANSFORM&quot; xlink:href=&quot;#level_$1&quot; /&gt;</span>
<span class="Comment">')</span>
<span class="Comment"> <span class="Comment">-&rarr;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">svg</span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">xmlns</span>=<span class="String"><span class="String">&quot;</span>http://www.w3.org/2000/svg<span class="String">&quot;</span></span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">xmlns</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">xlink</span>=<span class="String"><span class="String">&quot;</span>http://www.w3.org/1999/xlink<span class="String">&quot;</span></span></span>
<span class="MetaTagAll"> <span class="MetaTagAll">x</span>=<span class="String"><span class="String">&quot;</span>64<span class="String">&quot;</span></span> <span class="MetaTagAll">y</span>=<span class="String"><span class="String">&quot;</span>64<span class="String">&quot;</span></span> <span class="MetaTagAll">width</span>=<span class="String"><span class="String">&quot;</span>512<span class="String">&quot;</span></span> <span class="MetaTagAll">height</span>=<span class="String"><span class="String">&quot;</span>512<span class="String">&quot;</span></span> <span class="MetaTagAll">viewBox</span>=<span class="String"><span class="String">&quot;</span>64 64 512 512<span class="String">&quot;</span></span></span>
<span class="MetaTagAll"> <span class="MetaTagAll">id</span>=<span class="String"><span class="String">&quot;</span>svg2<span class="String">&quot;</span></span> <span class="MetaTagAll">version</span>=<span class="String"><span class="String">&quot;</span>1.1<span class="String">&quot;</span></span><span class="MetaTagAll">&gt;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">g</span> <span class="MetaTagAll">id</span>=<span class="String"><span class="String">&quot;</span>level_0<span class="String">&quot;</span></span><span class="MetaTagAll">&gt;</span></span> <span class="Comment"><span class="Comment">&lt;!--</span> some group, if I want to add other elements <span class="Comment">-&rarr;</span></span>
<span class="Comment"><span class="Comment">&lt;!--</span> the text &quot;λ&quot; <span class="Comment">-&rarr;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">text</span> <span class="MetaTagAll">id</span>=<span class="String"><span class="String">&quot;</span>lambda<span class="String">&quot;</span></span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">fill</span>=<span class="String"><span class="String">&quot;</span>#333<span class="String">&quot;</span></span> <span class="MetaTagAll">style</span>=<span class="String"><span class="String">&quot;</span>font-family:Ubuntu; font-size: 100px<span class="String">&quot;</span></span></span>
<span class="MetaTagAll"> <span class="MetaTagAll">transform</span>=<span class="String"><span class="String">&quot;</span>rotate(180)<span class="String">&quot;</span></span><span class="MetaTagAll">&gt;</span></span>λ<span class="MetaTagAll"><span class="MetaTagAll">&lt;/</span><span class="MetaTagAll">text</span><span class="MetaTagAll">&gt;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;/</span><span class="MetaTagAll">g</span><span class="MetaTagAll">&gt;</span></span>
<span class="Comment"><span class="Comment">&lt;!--</span> the text &quot;esod&quot; <span class="Comment">-&rarr;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">text</span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">fill</span>=<span class="String"><span class="String">&quot;</span>#333<span class="String">&quot;</span></span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">style</span>=<span class="String"><span class="String">&quot;</span>font-family:Ubuntu; font-size: 28px; letter-spacing: -0.10em<span class="String">&quot;</span></span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">x</span>=<span class="String"><span class="String">&quot;</span>-17.3<span class="String">&quot;</span></span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">y</span>=<span class="String"><span class="String">&quot;</span>69<span class="String">&quot;</span></span> </span>
<span class="MetaTagAll"> <span class="MetaTagAll">transform</span>=<span class="String"><span class="String">&quot;</span>YGENTRANSFORM<span class="String">&quot;</span></span><span class="MetaTagAll">&gt;</span></span>esod<span class="MetaTagAll"><span class="MetaTagAll">&lt;/</span><span class="MetaTagAll">text</span><span class="MetaTagAll">&gt;</span></span>
<span class="Comment"><span class="Comment">&lt;!--</span> ROOT ELEMENT <span class="Comment">-&rarr;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">use</span> <span class="MetaTagAll">transform</span>=<span class="String"><span class="String">&quot;</span>YGENTRANSFORM<span class="String">&quot;</span></span> <span class="MetaTagAll">xlink</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">href</span>=<span class="String"><span class="String">&quot;</span>#level_0<span class="String">&quot;</span></span> <span class="MetaTagAll">/&gt;</span></span>
YTRANSCOMPLETE(1,0) <span class="Comment"><span class="Comment">&lt;!--</span> First recursion <span class="Comment">-&rarr;</span></span>
YTRANSCOMPLETE(2,1) <span class="Comment"><span class="Comment">&lt;!--</span> deeper <span class="Comment">-&rarr;</span></span>
YTRANSCOMPLETE(3,2) <span class="Comment"><span class="Comment">&lt;!--</span> deeper <span class="Comment">-&rarr;</span></span>
YTRANSCOMPLETE(4,3) <span class="Comment"><span class="Comment">&lt;!--</span> even deeper <span class="Comment">-&rarr;</span></span>
YTRANSCOMPLETE(5,4) <span class="Comment"><span class="Comment">&lt;!--</span> Five level seems enough <span class="Comment">-&rarr;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;/</span><span class="MetaTagAll">svg</span><span class="MetaTagAll">&gt;</span></span>
</pre>
</div></div>
<p>and I compiled it to <span class="sc">svg</span> and then to <span class="sc">png<sc> with:</span></sc></p>
<pre class="twilight">
m4 yesodlogo.m4 <span class="Keyword">&gt;</span> yesodlogo.svg <span class="Keyword">&amp;&amp;</span> convert yesodlogo.svg yesodlogo.png
</pre>
<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.</p>
</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</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>&nbsp;Yesod excellent ideas</a>
</div>
<div class="previous_article">
<a href="/Scratch/en/blog/programming-language-experience/"><span class="nicer">«</span>&nbsp;Programming Language Experience</a>
</div>
<div class="previous_article">
<a href="/Scratch/en/blog/Learn-Vim-Progressively/"><span class="nicer">«</span>&nbsp;Learn Vim Progressively</a>
</div>
</div>
<div id="next_articles">
next entries
</div>
<div class="flush"></div>
</div>
</div>
<div id="bottom">
<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: 10/21/2011
</div>
<div>
Entirely done with
<a href="http://www.vim.org">Vim</a>
and
<a href="http://nanoc.stoneship.org">nanoc</a>
</div>
<div>
<a href="/Scratch/en/validation/">Validation</a>
<a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
.
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
.
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/en/blog/feed/feed.xml">[rss]</a>
</div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
var clicky = { log: function(){ return; }, goal: function(){ return; }};
var clicky_site_id = 66374971;
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = ( document.location.protocol == 'https:' ? 'https://static.getclicky.com/js' : 'http://static.getclicky.com/js' );
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66374971ns.gif" /></p></noscript>
</body>
</html>
Reference in a new issue Copy permalink