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" / >
2011-11-16 12:30:46 +00:00
< meta name = "keywords" content = "m4, SVG, XSLT, XML, design, programming, fractal" >
2011-11-16 11:57:39 +00:00
2011-10-21 14:48:31 +00:00
< 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" / >
2011-11-16 12:30:46 +00:00
< 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/" / >
2011-10-21 14:48:31 +00:00
< 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]-->
2011-11-16 12:30:46 +00:00
< title > Increase the power of deficient languages.< / title >
2011-10-21 14:48:31 +00:00
< / head >
< body lang = "en" class = "article" >
< script type = "text/javascript" > / / < ! [ C D A T A [
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 >
2011-11-16 12:30:46 +00:00
Increase the power of deficient languages.
2011-10-21 14:48:31 +00:00
< / h1 >
< h2 >
2011-11-16 12:30:46 +00:00
Fractals with SVG and m4
2011-10-21 14:48:31 +00:00
< / 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" >
2011-11-16 11:57:39 +00:00
< 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 >
2011-10-21 14:48:31 +00:00
< / div >
2011-11-16 11:57:39 +00:00
< 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 people believe it would be a good idea to invent many < span class = "sc" > xml< / span > compatible format and also programming languages with < span class = "sc" > xml< / span > syntax.< / p >
< p > Happy! Happy! Joy! Joy! < / p >
< p > Unfortunately, < span class = "sc" > xml< / span > was a format mean 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.
2011-11-16 12:30:46 +00:00
Most of the time it shouldn’ t be a problem, as nobody should see it.
2011-11-16 11:57:39 +00:00
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?
2011-11-16 12:30:46 +00:00
Our world isn’ t perfect. Too sad, a bunch of developer have to deal directly with this ugly < span class = "sc" > xml< / span > .< / p >
2011-11-16 11:57:39 +00:00
2011-11-16 12:30:46 +00:00
< 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 >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > But I am here to help.
If like me you hate with passion < span class = "sc" > xslt< / span > or writing < span class = "sc" > xml< / span > .
I will show you how m4 could help you deal with bad format.
Or language with too few power.< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< h2 id = "the-span-classscxsltspan-example" > The < span class = "sc" > xslt< / span > Example< / h2 >
2011-10-21 14:48:31 +00:00
2011-11-16 12:30:46 +00:00
< p > Let’ s start by the worst case of misused < span class = "sc" > xml< / span > I know: < span class = "sc" > xslt< / span > .
2011-11-16 11:57:39 +00:00
Any developer who had to deal with < span class = "sc" > xslt< / span > know how horrible it is.< / p >
2011-10-21 14:48:31 +00:00
< 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" > < < / 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" > " < / span > myvar< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > select< / span > =< span class = "String" > < span class = "String" > " < / span > value< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > /> < / 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" > < < / 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" > " < / span > yes< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > < span class = "String" > < span class = "String" > < ![CDATA[< / span > Hello world!< / span >
< span class = "String" > < span class = "String" > ]]> < / span > < / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > xsl< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > text< / span > < span class = "MetaTagAll" > > < / 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" > < < / 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" > " < / span > myvar< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > /> < / 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" >
2011-11-16 11:57:39 +00:00
< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > < ?< / span > < span class = "DoctypeXmlProcessing" > xml< / span > < span class = "DoctypeXmlProcessing" > version< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > 1.0< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > standalone< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > yes< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > ?> < / span > < / span > < span class = "Comment" > < span class = "Comment" > < !--< / span > YES its < span class = "sc" > xml< / span > < span class = "Comment" > -→ < / span > < / span >
2011-10-21 14:48:31 +00:00
< span class = "Comment" > < span class = "Comment" > < !--< / span > ← start a comment, then write some m4 directives:< / span >
< span class = "Comment" / >
< span class = "Comment" > define(`ydef',`< xsl:variable name=" $1" select=" $2" /> ')< / span >
< span class = "Comment" > define(`yprint',`< xsl:text disable-output-escaping=" yes" > < ![CDATA[$1]]> < /xsl:text> ')< / span >
< span class = "Comment" > define(`yshow',`< xsl:value-of select=" $1" /> ')< / span >
< span class = "Comment" / >
< span class = "Comment" > < span class = "Comment" > -→ < / span > < / span >
2011-11-16 11:57:39 +00:00
< span class = "Comment" > < span class = "Comment" > < !--< / span > Yes, < span class = "sc" > xml< / span > sucks to be read < span class = "Comment" > -→ < / span > < / span >
2011-10-21 14:48:31 +00:00
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / 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" > " < / span > 1.0< span class = "String" > " < / 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" > " < / span > http://www.w3.org/1999/XSL/Transform< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > And it sucks even more to edit < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / 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" > " < / span > /< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span >
ydef(myvar,value)
yprint(Hello world!)
yshow(myvar)
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > xsl< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > :< / span > < / span > < span class = "MetaTagAll" > template< / span > < span class = "MetaTagAll" > > < / span > < / span >
< / pre >
< p > Now just compile this file:< / p >
< pre class = "twilight" >
m4 myfile.m4 < span class = "Keyword" > > < / 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 >
2011-11-16 11:57:39 +00:00
< p > < span class = "sc" > svg< / span > is an < span class = "sc" > xml< / span > format used to represent vector graphics, it even support animations.
2011-10-21 14:48:31 +00:00
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 >
2011-11-16 11:57:39 +00:00
< p > < a href = "/Scratch/img/blog/SVG-and-m4-fractals/main.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 >
2011-10-21 14:48:31 +00:00
2011-11-16 12:30:46 +00:00
< 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 >
2011-10-21 14:48:31 +00:00
< 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 >
2011-11-16 12:30:46 +00:00
< 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 >
2011-10-21 14:48:31 +00:00
< 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" > ➥ yesodlogo.m4 < / a > < / div > < div class = "withfile" >
< pre class = "twilight" >
< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > < ?< / span > < span class = "DoctypeXmlProcessing" > xml< / span > < span class = "DoctypeXmlProcessing" > version< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > 1.0< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > encoding< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > UTF-8< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > standalone< / span > =< span class = "DoctypeXmlProcessing" > < span class = "DoctypeXmlProcessing" > " < / span > no< span class = "DoctypeXmlProcessing" > " < / span > < / span > < span class = "DoctypeXmlProcessing" > ?> < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / 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" > < g id=" level_$1" > < / span >
< span class = "Comment" > < use style=" opacity: .8" transform=" YTRANSFORMONE" xlink:href=" #level_$2" /> < / span >
< span class = "Comment" > < use style=" opacity: .8" transform=" YTRANSFORMTWO" xlink:href=" #level_$2" /> < / span >
< span class = "Comment" > < use style=" opacity: .8" transform=" YTRANSFORMTHREE" xlink:href=" #level_$2" /> < / span >
< span class = "Comment" > < /g> < / span >
< span class = "Comment" > < use transform=" YGENTRANSFORM" xlink:href=" #level_$1" /> < / span >
< span class = "Comment" > ')< / span >
< span class = "Comment" > < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > svg< / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > xmlns< / span > =< span class = "String" > < span class = "String" > " < / span > http://www.w3.org/2000/svg< span class = "String" > " < / 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" > " < / span > http://www.w3.org/1999/xlink< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > x< / span > =< span class = "String" > < span class = "String" > " < / span > 64< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > y< / span > =< span class = "String" > < span class = "String" > " < / span > 64< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > width< / span > =< span class = "String" > < span class = "String" > " < / span > 512< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > height< / span > =< span class = "String" > < span class = "String" > " < / span > 512< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > viewBox< / span > =< span class = "String" > < span class = "String" > " < / span > 64 64 512 512< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > =< span class = "String" > < span class = "String" > " < / span > svg2< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > version< / span > =< span class = "String" > < span class = "String" > " < / span > 1.1< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > g< / span > < span class = "MetaTagAll" > id< / span > =< span class = "String" > < span class = "String" > " < / span > level_0< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > < span class = "Comment" > < span class = "Comment" > < !--< / span > some group, if I want to add other elements < span class = "Comment" > -→ < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > the text " λ" < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > text< / span > < span class = "MetaTagAll" > id< / span > =< span class = "String" > < span class = "String" > " < / span > lambda< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > fill< / span > =< span class = "String" > < span class = "String" > " < / span > #333< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > style< / span > =< span class = "String" > < span class = "String" > " < / span > font-family:Ubuntu; font-size: 100px< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > transform< / span > =< span class = "String" > < span class = "String" > " < / span > rotate(180)< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > λ< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > text< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > g< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > the text " esod" < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > text< / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > fill< / span > =< span class = "String" > < span class = "String" > " < / span > #333< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > style< / span > =< span class = "String" > < span class = "String" > " < / span > font-family:Ubuntu; font-size: 28px; letter-spacing: -0.10em< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > x< / span > =< span class = "String" > < span class = "String" > " < / span > -17.3< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > y< / span > =< span class = "String" > < span class = "String" > " < / span > 69< span class = "String" > " < / span > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > transform< / span > =< span class = "String" > < span class = "String" > " < / span > YGENTRANSFORM< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > esod< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > text< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "Comment" > < span class = "Comment" > < !--< / span > ROOT ELEMENT < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > use< / span > < span class = "MetaTagAll" > transform< / span > =< span class = "String" > < span class = "String" > " < / span > YGENTRANSFORM< span class = "String" > " < / 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" > " < / span > #level_0< span class = "String" > " < / span > < / span > < span class = "MetaTagAll" > /> < / span > < / span >
YTRANSCOMPLETE(1,0) < span class = "Comment" > < span class = "Comment" > < !--< / span > First recursion < span class = "Comment" > -→ < / span > < / span >
YTRANSCOMPLETE(2,1) < span class = "Comment" > < span class = "Comment" > < !--< / span > deeper < span class = "Comment" > -→ < / span > < / span >
YTRANSCOMPLETE(3,2) < span class = "Comment" > < span class = "Comment" > < !--< / span > deeper < span class = "Comment" > -→ < / span > < / span >
YTRANSCOMPLETE(4,3) < span class = "Comment" > < span class = "Comment" > < !--< / span > even deeper < span class = "Comment" > -→ < / span > < / span >
YTRANSCOMPLETE(5,4) < span class = "Comment" > < span class = "Comment" > < !--< / span > Five level seems enough < span class = "Comment" > -→ < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > svg< / span > < span class = "MetaTagAll" > > < / span > < / span >
< / pre >
< / div > < / div >
2011-11-16 11:57:39 +00:00
< p > and I compiled it to < span class = "sc" > svg< / span > and then to < span class = "sc" > png< / span > with:< / p >
2011-10-21 14:48:31 +00:00
< pre class = "twilight" >
m4 yesodlogo.m4 < span class = "Keyword" > > < / span > yesodlogo.svg < span class = "Keyword" > & & < / span > convert yesodlogo.svg yesodlogo.png
< / pre >
2011-11-16 11:57:39 +00:00
< 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 duplicate 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 ther is 9 λ< / li >
2011-11-16 12:30:46 +00:00
< li > etc… < / li >
2011-11-16 11:57:39 +00:00
< / ul >
2011-11-16 12:14:39 +00:00
< p > At the final 5< sup > th< / sup > level there is 3< sup > 5< / sup > =243 λ.< / p >
2011-11-16 11:57:39 +00:00
< p > The main advantage is I could preview the final result easily. Without the macro system, I would have to make 5 copy/paste + modifications for each try.< / p >
2011-10-21 14:48:31 +00:00
< 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.
2011-11-16 11:57:39 +00:00
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 >
2011-10-21 14:48:31 +00:00
< / 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 > Yesod excellent ideas< / a >
< / div >
< div class = "previous_article" >
2011-11-16 12:08:26 +00:00
< a href = "/Scratch/en/blog/Higher-order-function-in-zsh/" > < span class = "nicer" > «< / span > Higher order function in zsh< / a >
2011-10-21 14:48:31 +00:00
< / div >
< div class = "previous_article" >
2011-11-16 12:08:26 +00:00
< a href = "/Scratch/en/blog/programming-language-experience/" > < span class = "nicer" > «< / span > Programming Language Experience< / a >
2011-10-21 14:48:31 +00:00
< / 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
2011-11-16 12:08:26 +00:00
Modified: 11/16/2011
2011-10-21 14:48:31 +00:00
< / 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 >
< / body >
< / html >