Elm – fun with L-System (Part 2)

You can become a serverless blackbelt. Enrol to my 4-week online workshop Production-Ready Serverless and gain hands-on experience building something from scratch using serverless technologies. At the end of the workshop, you should have a broader view of the challenges you will face as your serverless architecture matures and expands. You should also have a firm grasp on when serverless is a good fit for your system as well as common pitfalls you need to avoid. Sign up now and get 15% discount with the code yanprs15!


  1. Algae
  2. Pythagoras Tree (this)
  3. Cantor Dust
  4. Koch Curve
  5. Sierpinski Triangle
  6. Dragon Curve
  7. Fractal Plant


Last time out we implemented the Algae example from the L-System wikipedia page.

Frankly, it wasn’t very exciting at all, but still we needed to lay the ground work for stuff we’ll be looking at today. In this post (and the subsequent posts in the series) we’ll make use of the Core module that we had established in Part 1.


Example 2 : Pythagoras Tree

Starting from this example, things get interesting as we need to draw things on the screen, yay!

First, we need to define our L-System:


and a couple of type aliases:


Notice that we’re going to use a linked-list as the LIFO stack to record the position and angle. Because that’s how this particular L-System work:


Next, let’s add 2 helper functions for working with the stack:



Now, before we get into the drawing part, let’s take a quick refresher on how the coordinate system works in Elm (when you’re working with a collage at least).


Here, (0, 0) is at the centre of the collage. For every object, its position is also determined by its centre point.

This coordinate system works great in some cases, but having been used to most other coordinate systems (that places (0, 0) at the top-left corner) this can take a while to get used to.


Next, let’s add another helper function that takes the current position of the path, and work out the next position based on the rotation angle (in radians) and the length of the new segment.



Next, let’s add a createSegments function that takes in:

  • the starting position (at the base of the tree);
  • the length of a line segment not ending in a leaf, with the assumption that line segments ending in a leaf is half as long;
  • the current state of the tree

and returns a list of line segments.


The above code is a pretty literal translation of the instructions:


However, for those of you coming from F#, you might notice that I used newRotation’ when popping from the stack, but then used newRotation on the next line:


This is because shadowing is not allowed in Elm.


All that is left to do now, is to collect the line segments and put them inside a collage that covers the entire window.


As I experimented with a number of length settings it became clear that the length really needs to change along with the generations.

I thought of two approaches:

  1. use a simple formula to calculate the length based on a baseline value and the current generation number;
  2. use the same length throughout, then scale the whole tree back to fit into collage

In the end, I opted for the first approach for simplicity and for this example it works sufficiently well.


Finally, to tie everything together:



Live Demo (here)

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


Source Code (here)


Next : Cantor Dust



Liked this article? Support me on Patreon and get direct help from me via a private Slack channel or 1-2-1 mentoring.
Subscribe to my newsletter

Hi, I’m Yan. I’m an AWS Serverless Hero and I help companies go faster for less by adopting serverless technologies successfully.

Are you struggling with serverless or need guidance on best practices? Do you want someone to review your architecture and help you avoid costly mistakes down the line? Whatever the case, I’m here to help.

Hire me.

Skill up your serverless game with this hands-on workshop.

My 4-week Production-Ready Serverless online workshop is back!

This course takes you through building a production-ready serverless web application from testing, deployment, security, all the way through to observability. The motivation for this course is to give you hands-on experience building something with serverless technologies while giving you a broader view of the challenges you will face as the architecture matures and expands.

We will start at the basics and give you a firm introduction to Lambda and all the relevant concepts and service features (including the latest announcements in 2020). And then gradually ramping up and cover a wide array of topics such as API security, testing strategies, CI/CD, secret management, and operational best practices for monitoring and troubleshooting.

If you enrol now you can also get 15% OFF with the promo code “yanprs15”.

Enrol now and SAVE 15%.

Check out my new podcast Real-World Serverless where I talk with engineers who are building amazing things with serverless technologies and discuss the real-world use cases and challenges they face. If you’re interested in what people are actually doing with serverless and what it’s really like to be working with serverless day-to-day, then this is the podcast for you.

Check out my new course, Learn you some Lambda best practice for great good! In this course, you will learn best practices for working with AWS Lambda in terms of performance, cost, security, scalability, resilience and observability. We will also cover latest features from re:Invent 2019 such as Provisioned Concurrency and Lambda Destinations. Enrol now and start learning!

Check out my video course, Complete Guide to AWS Step Functions. In this course, we’ll cover everything you need to know to use AWS Step Functions service effectively. There is something for everyone from beginners to more advanced users looking for design patterns and best practices. Enrol now and start learning!