Understanding L Systems


This week, I made a point to dive into something I've held an interest in for a long time, prodded on by the rediscovery of the book "[The Algorithmic Beauty of Plants](algorithmicbotany.org/papers/abop/abop.pdf)" whose mere title made such an impact that I have not been able to forget about it. It is a textbook all about the fascinating world of modeling plants algorithmically.&#x20;

I could go on about all the things I want to do related to the topic of the textbook, but before I go on too long of a tangent, I'm going to stop myself short, and discuss (mostly for my own sake) the first framework needed to understand algorithmic plant modeling: L Systems.

# L Systems?

Named after Aristid Lindenmayer, Lindenmayer Systems were first created with the intention of representing the development of cellular plant life and blah blah boring and certainly very important history.

The point is, I've known *about* them for a long time for the simple fact that "L Systems" is a term that comes up a lot alongside fractals, and just like most people that have even a marginal interest in math, programming, or just nature in general, I have found fractals as fascinating as they are elusive.

They main idea is pretty simple, but sounds complex at first. Before I say anything about it, just know that the L Systems create pretty shapes by repeating other shapes as much as you want, forever.

Got it? Okay, so you have a \*grammar, \*a *generator* and a *producer.*

Using the grammar, I can define a generator that spawns producers. Producers create more producers.

This is accomplished by giving a turtle simple but specific instructions.

# Yes, a Turtle.

A helpful way to visualize L-Systems is by imagining a turtle that understands only the grammar defined by the L-System (this is not some cute metaphor I came up with, the turtle idea is in the textbook and has existed for a long time).

The turtle moves based on specific symbols, such as:

F: move forward
\+: turn clockwise
\-: turn counter-clockwise

![](/LSystemTurtle.jpeg)

# Generators and Producers

In an L-System, the generator serves as the initial shape or structure from which the pattern will be developed. The generator is a string composed of symbols, which are defined by the grammar. The producer, on the other hand, is responsible for interpreting the grammar and creating new shapes or structures based on the rules provided.

As the L-System iterates, the producer continually rewrites the generator string, replacing certain symbols with new ones according to the grammar rules. The process of rewriting allows the pattern to grow and evolve, generating intricate and complex patterns over time.

![](/LSystemConcept.jpeg)

# Starting to Code

To gain a better understanding of L-Systems, I created a simple program in C using the SDL2 library. The program sets up an SDL environment and displays a window with the resulting L-System pattern.

First, I defined the initial turtle state and created a function called interpret\_sequence to take in a string representing a sequence of rules, such as "F+F-F-F+F-." The turtle would then move according to these rules.

Then, right after setting the draw color I insert the first touch of L system magic

```c
const char *generator = "F-F-F-F-F";

// Define the L-system parameters
const float angle = 90.0f; // angle in degrees
const float scale = 10.0f; // length of each line segment

typedef struct
{
	float x;
	float y;
	float angle;
} TurtleState;

// Define a function to interpret the L-system sequence
void interpret_sequence(SDL_Renderer *renderer, const char *sequence, TurtleState *state)
{
	while (*sequence)
	{
		switch (*sequence)
		{
		case 'F': // move forward
			float x1 = state->x;
			float y1 = state->y;
			state->x += scale * cos(state->angle * M_PI / 180.0f);
			state->y += scale * sin(state->angle * M_PI / 180.0f);
			float x2 = state->x;
			float y2 = state->y;
			SDL_RenderDrawLine(renderer, x1, y1, x2, y2);
			break;
		case '+': // turn left
			state->angle += angle;
			break;
		case '-': // turn right
			state->angle -= angle;
			break;
		}
		++sequence;
	}
}

```

After compiling and running the program, I was able to create a simple L-System pattern.

```bat
gcc garden.c -o garden -lSDL2 -lm
./garden
```

![](</Pasted image 20230317003018.png>)

A square! Breathtaking, I know.

What I just wrote was a zero iteration parser, meaning there's no depth, recursion, or rewriting of anything. The shape is unsurprisingly simple. In L-System terms, that square is defined by the string `F-F-F-F`, and it was written by a "turtle" that makes 90 degree turns.&#x20;

Now what happens when we replace the square's edges with a new shape?&#x20;

![](</Pasted image 20230317003251.png>)

This is what happens when you replace each `F` of the generator with a new string (called the producer) `F-F+F+F-F`

Now *this* is pod racing.&#x20;

We can keep doing this infinitely, replacing the edge again and again with the same shape. Let's say I do this *n* times. The shape above is the result when `n=1`. So let's see what we get when I keep going.

# n=2

![](</Pasted image 20230317003547.png>)

# n=3

![](</Pasted image 20230317003724.png>)

These images demonstrate the iterative nature of L-Systems, where each iteration adds complexity to the pattern. Through the simple process of rewriting and following the specified grammar, L-Systems can generate intricate and mesmerizing patterns reminiscent of natural structures. I am excited to keep diving into the topic, and eventually learn the intricacies of modeling plant life.&#x20;

The code I wrote for this post can be found here: [https://github.com/kaiobarb/LSystems](https://github.com/kaiobarb/LSystems)

Thanks for reading!


Building a Website


I have been creating websites for a long time. In third grade I touched HTML for the first time; there was a week-long after-school program that culminated in writing a page that was supposedly sent to the White House (I'm not really sure why). It's lost to the void of time, but I wish I had some way of seeing it now.

Over the years, developing a website cam to be a marker of my progress. In high-school I knew a photographer that needed a portfolio website. In college, I had some assignments and projects that were on the web. When I needed to get a job? Better update that website.

Throughout it all, there's been a constant tug-and-pull that other developers will be familiar with, and it happens between the two poles of the full DIY method, and the drag-and-drop site builder solution.

Realistically, I want something in-between. I have been trying to find a solution that is highly customizable, but not garbage. And let me tell you, I've got a few piece of garbage sites under my belt. The real answer is, and has always been simplicity!&#x20;

Make it **simple**, make it **maintainable**, and make it **frictionless** to add content. The way I have this site set up right now with React, Next.js, and TinaCMS feels right because I feel like I'm addressing all of those points appropriately.

### Simple

It is immediately clear from the look of this site that that's what I was aiming for. It's got that minimalist, black-and-white aesthetic that is oh-so-easy to design around. That doesn't mean that I need to be boring! In fact, a lot of the CSS work is pretty straightforward because it's so simple, and I can use that time to make more interesting things like the homepage blob, or the wavy footer. They are small, simple things that serve the purpose of keeping the site looking just the way I like it, and makes it easier for me to express myself.

### Maintainable

Out of the three, this is the one I'm hitting the mark on the least. It's a React site, using Next.js, which let's be honest, will both look extremely different in less than. To keep the architecture of this site future-proof (such that I can throw whatever functionality onto this and have it stick) I will have to put in some elbow-grease, but the trade off for making it easily customizable and quick to get going was worth it for me. Other than those two frameworks, I'm limiting myself from adding a ton of dependencies to the project, besides what's necessary in order to keep my house in order.

The good news is that for a static website like this, only a small amount of work is needed to have large positive impacts on longevity. In the grand scheme of things, one can even argue that it's not that important because even if I don't update the architecture of the site at all over a long period of time, it will still stay online, and I'll still be able to add content to it. Regardless, it's still something I think about and it's a good principle to work by. In a previous personal website, I had the experience of cloning its repo, running `npm install` and having absolutely nothing work. I don't ever want that to be the case again!

### Frictionless

This is the most important one for me. It has a lot to do with the title image of this text, and I've fallen victim to the phenomenon of spending countless hours making a custom website only to never touch it again. The links break, pages disappear, and obsolete information takes the spotlight for all of eternity to see.

To address this, I google'd around and fortunately came across Tina, a headless CMS that I can pop into my site, log into it from any machine, and make updates to it that are integrated with git. I can also customize it for the type of data I want to display, but that is for another article and another time.&#x20;

Did I publish something and notice a typo? I can fix that in under a minute.

## What is This Site, Anyway?

There's no format. That's the point of having this thing in the first place. I do feel that is is good for both my personal and professional development to have something public facing, and social media exists! The only problem is that I barely post on Twitter, my Facebook has gathered cobwebs years ago, and Instagram is a distant memory. Rather than try to get myself to do something I do not naturally  gravitate towards (using social media) I'd rather try this.

It takes longer, but it's more fun to have a site I built. Why not build something I have full creative control over? A place where I can ramble, keep a record of milestones in my life, and write something I think someone else might find useful.

Sure, it's not perfect. I'm sure I'll be creating more problems of my own by coding the front-end myself, but that's kind of the point. I'll have something to tinker on, improve over time, and genuinely call my own.


Posts

Understanding L Systems

Building a Website