Demote headers to avoid first-level as <h1>

This commit is contained in:
Dimitri Lozeve 2020-05-26 17:21:53 +02:00
parent aa841f4ba2
commit 02f4a537bd
13 changed files with 222 additions and 220 deletions

View file

@ -53,13 +53,13 @@
<section>
<p>L-systems are a formal way to make interesting visualisations. You can use them to model a wide variety of objects: space-filling curves, fractals, biological systems, tilings, etc.</p>
<p>See the Github repo: <a href="https://github.com/dlozeve/lsystems" class="uri">https://github.com/dlozeve/lsystems</a></p>
<h1 id="what-is-an-l-system">What is an L-system?</h1>
<h2 id="a-few-examples-to-get-started">A few examples to get started</h2>
<h2 id="what-is-an-l-system">What is an L-system?</h2>
<h3 id="a-few-examples-to-get-started">A few examples to get started</h3>
<p><img src="../images/lsystems/dragon.png" /></p>
<p><img src="../images/lsystems/gosper.png" /></p>
<p><img src="../images/lsystems/plant.png" /></p>
<p><img src="../images/lsystems/penroseP3.png" /></p>
<h2 id="definition">Definition</h2>
<h3 id="definition">Definition</h3>
<p>An <a href="https://en.wikipedia.org/wiki/L-system">L-system</a> is a set of rewriting rules generating sequences of symbols. Formally, an L-system is a triplet of:</p>
<ul>
<li>an <em>alphabet</em> <span class="math inline">\(V\)</span> (an arbitrary set of symbols)</li>
@ -68,7 +68,7 @@
</ul>
<p>During an iteration, the algorithm takes each symbol in the current word and replaces it by the value in its rewriting rule. Not that the output of the rewriting rule can be absolutely <em>anything</em> in <span class="math inline">\(V^*\)</span>, including the empty word! (So yes, you can generate symbols just to delete them afterwards.)</p>
<p>At this point, an L-system is nothing more than a way to generate very long strings of characters. In order to get something useful out of this, we have to give them <em>meaning</em>.</p>
<h2 id="drawing-instructions-and-representation">Drawing instructions and representation</h2>
<h3 id="drawing-instructions-and-representation">Drawing instructions and representation</h3>
<p>Our objective is to draw the output of the L-system in order to visually inspect the output. The most common way is to interpret the output as a sequence of instruction for a LOGO-like drawing turtle. For instance, a simple alphabet consisting only in the symbols <span class="math inline">\(F\)</span>, <span class="math inline">\(+\)</span>, and <span class="math inline">\(-\)</span> could represent the instructions “move forward”, “turn right by 90°”, and “turn left by 90°” respectively.</p>
<p>Thus, we add new components to our definition of L-systems:</p>
<ul>
@ -86,8 +86,8 @@
<p>Finally, our complete L-system, representable by a turtle with capabilities <span class="math inline">\(I\)</span>, can be defined as <span class="math display">\[ L = (V, \omega, P, d, \theta,
R). \]</span></p>
<p>One could argue that the representation is not part of the L-system, and that the same L-system could be represented differently by changing the representation rules. However, in our setting, we wont observe the L-system other than by displaying it, so we might as well consider that two systems differing only by their representation rules are different systems altogether.</p>
<h1 id="implementation-details">Implementation details</h1>
<h2 id="the-lsystem-data-type">The <code>LSystem</code> data type</h2>
<h2 id="implementation-details">Implementation details</h2>
<h3 id="the-lsystem-data-type">The <code>LSystem</code> data type</h3>
<p>The mathematical definition above translate almost immediately in a Haskell data type:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode haskell"><code class="sourceCode haskell"><a class="sourceLine" id="cb1-1" title="1"><span class="co">-- | L-system data type</span></a>
<a class="sourceLine" id="cb1-2" title="2"><span class="kw">data</span> <span class="dt">LSystem</span> a <span class="fu">=</span> <span class="dt">LSystem</span></a>
@ -106,12 +106,12 @@ R). \]</span></p>
<a class="sourceLine" id="cb1-15" title="15"> } <span class="kw">deriving</span> (<span class="dt">Eq</span>, <span class="dt">Show</span>, <span class="dt">Generic</span>)</a></code></pre></div>
<p>Here, <code>a</code> is the type of the literal in the alphabet. For all practical purposes, it will almost always be <code>Char</code>.</p>
<p><code>Instruction</code> is just a sum type over all possible instructions listed above.</p>
<h2 id="iterating-and-representing">Iterating and representing</h2>
<h3 id="iterating-and-representing">Iterating and representing</h3>
<p>From here, generating L-systems and iterating is straightforward. We iterate recursively by looking up each symbol in <code>rules</code> and replacing it by its expansion. We then transform the result to a list of <code>Instruction</code>.</p>
<h2 id="drawing">Drawing</h2>
<h3 id="drawing">Drawing</h3>
<p>The only remaining thing is to implement the virtual turtle which will actually execute the instructions. It goes through the list of instructions, building a sequence of points and maintaining an internal state (position, angle, stack). The stack is used when <code>Push</code> and <code>Pop</code> operations are met. In this case, the turtle builds a separate line starting from its current position.</p>
<p>The final output is a set of lines, each being a simple sequence of points. All relevant data types are provided by the <a href="https://hackage.haskell.org/package/gloss">Gloss</a> library, along with the function that can display the resulting <code>Picture</code>.</p>
<h1 id="common-file-format-for-l-systems">Common file format for L-systems</h1>
<h2 id="common-file-format-for-l-systems">Common file format for L-systems</h2>
<p>In order to define new L-systems quickly and easily, it is necessary to encode them in some form. We chose to represent them as JSON values.</p>
<p>Here is an example for the <a href="https://en.wikipedia.org/wiki/Gosper_curve">Gosper curve</a>:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><a class="sourceLine" id="cb2-1" title="1"><span class="fu">{</span></a>
@ -132,12 +132,12 @@ R). \]</span></p>
<a class="sourceLine" id="cb2-16" title="16"> <span class="ot">]</span></a>
<a class="sourceLine" id="cb2-17" title="17"><span class="fu">}</span></a></code></pre></div>
<p>Using this format, it is easy to define new L-systems (along with how they should be represented). This is translated nearly automatically to the <code>LSystem</code> data type using <a href="https://hackage.haskell.org/package/aeson">Aeson</a>.</p>
<h1 id="variations-on-l-systems">Variations on L-systems</h1>
<h2 id="variations-on-l-systems">Variations on L-systems</h2>
<p>We can widen the possibilities of L-systems in various ways. L-systems are in effect deterministic context-free grammars.</p>
<p>By allowing multiple rewriting rules for each symbol with probabilities, we can extend the model to <a href="https://en.wikipedia.org/wiki/Probabilistic_context-free_grammar">probabilistic context-free grammars</a>.</p>
<p>We can also have replacement rules not for a single symbol, but for a subsequence of them, thus effectively taking into account their neighbours (context-sensitive grammars). This seems very close to 1D cellular automata.</p>
<p>Finally, L-systems could also have a 3D representation (for instance space-filling curves in 3 dimensions).</p>
<h1 id="usage-notes">Usage notes</h1>
<h2 id="usage-notes">Usage notes</h2>
<ol>
<li>Clone the repository: <code>git clone [[https://github.com/dlozeve/lsystems]]</code></li>
<li>Build: <code>stack build</code></li>
@ -162,7 +162,7 @@ Available options:
<p>Apart from the selection of the input JSON file, you can adjust the number of iterations and the colors.</p>
<p><code>stack exec lsystems-exe -- examples/levyC.json -n 12 -c 0,255,255</code></p>
<p><img src="../images/lsystems/levyC.png" /></p>
<h1 id="references">References</h1>
<h2 id="references">References</h2>
<ol>
<li>Prusinkiewicz, Przemyslaw; Lindenmayer, Aristid (1990). <em>The Algorithmic Beauty of Plants.</em> Springer-Verlag. ISBN 978-0-387-97297-8. <a href="http://algorithmicbotany.org/papers/#abop" class="uri">http://algorithmicbotany.org/papers/#abop</a></li>
<li>Weisstein, Eric W. “Lindenmayer System.” From MathWorldA Wolfram Web Resource. <a href="http://mathworld.wolfram.com/LindenmayerSystem.html" class="uri">http://mathworld.wolfram.com/LindenmayerSystem.html</a></li>