Slides and Video of Elm talk at Polyconf

Hello,

Recording of my Elm talk at Polyconf this year is available now.

 

Elm – fun with L-System (Part 7)

Series:

  1. Algae
  2. Pythago­ras Tree
  3. Can­tor Dust
  4. Koch Curve
  5. Sier­pin­ski Triangle
  6. Dragon Curve
  7. Frac­tal Plant (this)

Last time out we imple­mented the Dragon Curve exam­ple from the L-System wikipedia page. Now, we’re finally at the end of our journey, let’s see how we can implement the Fractal Plant example in Elm.

 

Example 7 : Fractal Plant

Let’s start by defining our L-System:

image

What’s interesting about the Fractal Plant is that it combines elements from Pythagoras Tree (the use of a stack) and other L-Systems we looked at recently.

image

 

Here’s how it looks, by gen 7 the plant looks pretty good!

fractal_plant

 

In fact, with the implementation we ended up with, we can use it to support any number of L-Systems so long:

  • ‘F’ is the only symbol that means “draw forward”
  • we can programmatically change the angle for ‘–’ and ‘+’ (easy!)

with that, let’s take a couple of the examples from LSystemBot’s tweets and see them in action!

 

Example 7.1

image

 

l-system-bot-01

 

Example 7.2

image

l-system-bot-02

 

Example 7.3

image

l-system-bot-03

 

So that’s it guys, hope you’ve enjoyed this series! Please let me know via the comments if you like to see more mini-series like this one.

 

Live Demo (here)

Use LEFT and RIGHT arrow keys to evolve/devolve the L-System.

Source Code (here)

 

 

Links

Elm – fun with L-System (Part 6)

Series:

  1. Algae
  2. Pythago­ras Tree
  3. Can­tor Dust
  4. Koch Curve
  5. Sier­pin­ski Triangle
  6. Dragon Curve (this)
  7. Frac­tal Plant

Last time out we imple­mented the Sierpinski Triangle exam­ple from the L-System wikipedia page. Now, let’s con­tinue our jour­ney and see how we can imple­ment the (rather impressive sounding) Dragon Curve exam­ple in Elm.

 

Example 6 : Dragon Curve

First, let’s define our L-System:

image

Again, thanks to the work we did in Part 4, our work here is rather simple:

image

which is a pretty straight translation of:

  • ‘F’ : draw forward
  • ‘–’ : turn left 90 degrees
  • ‘+’ : turn right 90 degrees
  • ‘X’ and ‘Y’ : ignore

Unlike the other L-Systems, this one grows much slower and as it slows it does make a nice picture!

dragon_curve

 

Live Demo (here)

Use LEFT and RIGHT arrow keys to evolve/devolve the L-System.

Source Code (here)

 

 

Next : Fractal Plant

 

Links

Elm – fun with L-System (Part 5)

Series:

  1. Algae
  2. Pythago­ras Tree
  3. Can­tor Dust
  4. Koch Curve
  5. Sier­pin­ski Triangle (this)
  6. Dragon Curve
  7. Frac­tal Plant

Last time out we imple­mented the Koch Curve exam­ple from the L-System wikipedia page. Now, let’s con­tinue our jour­ney and see how we can imple­ment the Sierpinski Triangle exam­ple in Elm.

 

Example 5 : Sierpinski Triangle

First, let’s define our L-System:

image

Since we have done a lot of the heavy lifting in the last post (recall the Path module we created), we actually don’t have much to do here.

image

The only thing of interest here is that both ‘A’ and ‘B’ mean “draw forward”, but need to be represented different for the growth rules.

As far as I know, (please correct me in the comments if I’m wrong about this) there is no way to handle both symbols using case..of here, e.g.

case sym of

    ‘A’ | ‘B’ –> …

similar to how one would do in F#:

match sym of

| ‘A’ | ‘B’ –> …

| ‘+’ –> …

| ‘–‘ –> …

Hence why I opted for a multi-way if statement here instead.

Here’s how it looks, feel free to try it out yourself via the live demo links below.

sierpinski_tri_v1

 

But wait, the L-System wikipedia page also mentions a second way to draw the Sierpinski Triangle:

image

So, let’s implemented this as well, as v2.

image

When I used the suggested 120 degrees, I got an upside-down triangle. So instead, I used –120 degrees here:

image

Yup, it’s basically a carbon copy of the first version, except for a different value for angle  plus different symbols.

Why are the examples not consistent with the choice of symbols for “draw forward”? One wonders…

Anyhow, here’s how it looks, which you can also try out via the live demo links below.

sierpinski_tri_v2

 

Live Demo (here, here)

Use LEFT and RIGHT arrow keys to evolve/devolve the L-System.

Source Code (here, here)

 

 

Next : Dragon Curve

 

Links

Elm – fun with L-System (Part 4)

Series:

  1. Algae
  2. Pythago­ras Tree
  3. Can­tor Dust
  4. Koch Curve (this)
  5. Sier­pin­ski Triangle
  6. Dragon Curve
  7. Frac­tal Plant

Last time out we imple­mented the Cantor Dust exam­ple from the L-System wikipedia page. Now, let’s con­tinue our jour­ney and see how we can imple­ment the Koch Curve exam­ple in Elm.

 

Example 4 : Koch Curve

Once again, we will start by defining our L-System:

image

From here, there are a lot of similarities with our implementation for Part 2, so time for a minor refactor!

We’ll add a shared Path module, and move the common abstractions and helper functions there:

image

Over the course of the series, we’ll add to this common module to help handle other aspects of drawing our L-Systems.

 

For the Koch Curve, the only thing we really need to implement is the display function to handle ‘F’, ‘–’ and ‘+’:

“Here, F means “draw forward”, + means “turn left 90 degrees”, and – means “turn right 90 degrees”..”

So this was what I ended up with as a 1st pass:

image

OK, so that was a lot of code to digest, so let’s break it down a bit.

The most important bit of code is here:

image

where we implemented the logic for:

  • ‘F’ : draw a line segment
  • ‘–‘ :  turn left 90 degrees
  • ‘+’ : turn right 90 degrees

in a left fold over the current state, using the starting position (0, 0) and rotation angle 0 (radians).

But, what’s this canvasArea that’s passed along?

Aha, good, you caught me! I’ve secretly added a little something to the Path module:

image

These are to help me track the area that has been drawn on so that I can use this information to scale down and move the completed path later on so that it fits inside the collage and is centred.

canvas_area

Whenever a new segment has been added the ending position is used to expand the canvas area:

image

At the end, we work out the scale factor, and move the path to the centre of the collage:

image

 

As it turns out, much of what’s in the display function is the same across most of the examples, so let’s refactor and move it into the Path module:

image

and our Koch Curve implementation becomes much simpler:

image

 

Run­ning this exam­ple in Elm Reac­tor I can get the demo to gen 6, before the rendering time starts to go up noticeably.

koch_curve

 

Live Demo (here)

Use LEFT and RIGHT arrow keys to evolve/devolve the L-System.

 

Source Code (here)

 

 

Next : Sierpinski Triangle

 

Links