167 lines
5.5 KiB
Markdown
167 lines
5.5 KiB
Markdown
|
-----
|
||
|
isHidden: false
|
||
|
menupriority: 1
|
||
|
kind: article
|
||
|
created_at: 2011-10-20T11:39:36+02:00
|
||
|
title: SVG and m4 fractals
|
||
|
subtitle: Increase the power of deficient languages.
|
||
|
author_name: Yann Esposito
|
||
|
author_uri: yannesposito.com
|
||
|
# tags:
|
||
|
-----
|
||
|
<%= blogimage("main.png","Yesod logo made in SVG and m4") %>
|
||
|
|
||
|
begindiv(intro)
|
||
|
|
||
|
<%= tldr %> How to use m4 and SVG to make fractals easily.
|
||
|
|
||
|
|
||
|
enddiv
|
||
|
|
||
|
You might want to know how I made the logo for yesod in my preceding post.
|
||
|
|
||
|
First, I hate with passion most XML based languages. Because XML wasn't created to be exposed to developer.
|
||
|
XML should be read and generated by some software. But you should _never_ read or edit it manually.
|
||
|
|
||
|
## The XSLT Example
|
||
|
|
||
|
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.
|
||
|
|
||
|
In order to reduce the verbosity of such so 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 <sc>xslt</sc> way of doing this:
|
||
|
|
||
|
<code class="xml">
|
||
|
<xsl:variable name="myvar" select="value"/>
|
||
|
</code>
|
||
|
|
||
|
- Printing something. Instead of `print "Hello world!"` here is the <sc>xslt</sc> equivalent:
|
||
|
|
||
|
<code class="xml">
|
||
|
<xsl:text
|
||
|
disable-output-escaping="yes"><![CDATA[Hello world!
|
||
|
]]></xsl:text>
|
||
|
</code>
|
||
|
|
||
|
|
||
|
- printing the value of a variable, instead of `print myvar` the <sc>xslt</sc> is:
|
||
|
|
||
|
<code class="xml">
|
||
|
<xslt:value-of select="myvar"/>
|
||
|
</code>
|
||
|
|
||
|
- Just try to imagine how verbose it is to declare a function with this language.
|
||
|
|
||
|
## The cure (m4 to the rescue)
|
||
|
|
||
|
<code class="xml">
|
||
|
<?xml version="1.0" standalone="yes"?> <!-- YES its XML -->
|
||
|
<!-- ← 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, XML 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>
|
||
|
|
||
|
Now just compile this file:
|
||
|
|
||
|
<code class="zsh">
|
||
|
m4 myfile.m4 > myfile.xslt
|
||
|
</code>
|
||
|
|
||
|
And you can profit! Now <sc>xslt</sc> is more readable and easier to edit!
|
||
|
|
||
|
## The cool part: Fractals!
|
||
|
|
||
|
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.
|
||
|
|
||
|
Let me show you the result:
|
||
|
|
||
|
<object data="<%= blogimagedir %>main.svg" type="image/svg+xml" height="512" width="512"><%= blogimage("main.png","Yesod logo made in SVG and m4") %></object>
|
||
|
|
||
|
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:
|
||
|
|
||
|
<code class="xml" file="yesodlogo.m4">
|
||
|
<?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>
|
||
|
|
||
|
and I compiled it to <sc>svg</sc> and then to <sc>png<sc> with:
|
||
|
|
||
|
<code class="zsh">
|
||
|
m4 yesodlogo.m4 > yesodlogo.svg && convert yesodlogo.svg yesodlogo.png
|
||
|
</code>
|
||
|
|
||
|
## Conclusion
|
||
|
|
||
|
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.
|