Archive for the ‘Uncategorized’ Category


Posted on: August 2nd, 2016 by Peter Balazs No Comments

This week we’ll move on to the L-system which was named after Aristid Lindenmayer, who was a Hungarian theoretical biologist and botanist. He worked with yeast, fungi, algae and he used L-systems to describe the development of such simple, multicellular organisms.


The system is based on an alphabet of symbols that are used to create strings, a collection of rules that expand the symbols into larger strings, an axiom string which is the starting point of the construction, and a mechanism that translates the string into geometric structures.

His original modelling of the growth of algae looked like the following:
alphabet: A B
axiom: A
rules: (A becomes AB), (B becomes A)
‘n’ is the number of iterations.

The above produces these strings:
n = 0 : A
n = 1 : AB
n = 2 : ABA
n = 3 : ABAAB
n = 4 : ABAABABA

The task at hand

For this little experiment – just as last week – we’re going to use P5.js which is really good JavaScript framework for (not exclusively) animation / drawing.
Our L-system looks like this:

alphabet: X F
constants: + − [ ]
axiom: X
rules: (X → F−[[X]+X]+F[+FX]−X), (F → FF)
angle: 25°
n: 6

How are we going to make a plant out of this? We’ll use turtle graphics. The turtle moves according to commands relative to his own position. By the way, he also carries a pen, and draws a line as he moves.

This is how we’re going to translate the rules / strings into turtle graphics:
F: draw forward
−: turn left 25°
+: turn right 25°
X: won’t do anything, it only helps the evolution of the strings
[: save the current values for position and angle
]: restore previously saved position and angle

And here is our plant constructed with the help of the L-system:

source: Wikipedia


Posted on: July 25th, 2016 by Peter Balazs No Comments

Let’s talk about trees! …and plants. More precisely: mathematically generated trees! …and plants. Why? This is something a computer would be good at.
We’re going to create things with recursive definition. Now recursive definition of course means something that is defined in terms of itself. In our case it’ll work like this:
We’ll define a branch that has two other branches attached. Since those two attached branches are also defined as branches they also have two branches attached. The two new branches are defined as branches so they also have… You get the idea.

Now in this case this is going to produce an infinite loop, so we’ll need to establish some rules. Namely if a branch reaches a certain number of pixels in length, we’ll stop the loop. Also the branches will get shorter and thinner each iteration.

How are we going to do this? We’re not going to use jQuery for this project. We’ll use P5.js, simply because it works really well with drawing and animation.

Here’s our beautiful tree (by the way, you’ll get a different one every time you refresh the page):

The branches have a random angle between 44.5 – 45.5 degrees, so it looks a little less like a fractal tree. I also added some color and buds for some more treeness 🙂
Why those angles? I tested it with a few variations, these two numbers produced the effect I was looking for.

Hope you liked this little experiment, next time we’ll look at the L-System, and how it can help to grow some digital plants.


Posted on: June 18th, 2016 by Peter Balazs No Comments

Hello dear Reader, welcome to the Lab…

You may wondering what this is about. The Lab is a blog about web design and coding (mainly HTML, CSS and JavaScript). I have a bunch of ideas that I can’t use in my work at the moment, but find interesting and would like to experiment with them. I thought I might as well write about these ideas in this blog, someone else might also benefit from the information – be it good or bad.

The Lab will feature small to medium size web experiments: the ideas and working prototypes.

I hope you’ll find the posts interesting, and check back regularly.


lamb of designs