04. Phyllotaxis - Painting the Nature

 

Introduction

In nature, we see a variety of intricate patterns. Phyllotaxy is the arrangement of leaves on a plant stem. This arrangement also follows an intricate yet simple pattern. Examples of these patterns appear in sunflowers, cacti, etc.

This pattern emerge thanks to two simple equations:

φ = n ∗ 137.5°             |             r = c√n

In order to draw our points on the screen, we have to work with the polar coordinate system. The polar coordinate system is different from the cartesian coordinate system we usually use. Here we consider the distance from the centre and the angle from the positive x-axis as the coordinates instead of the x and y coordinates of the cartesian convention.

The above equations correspond to these two parameters: angle and distance respectively. Here, 'n' is a counter that starts from 0 and increments by one each time. 'c' is a constant that we can adjust according to our liking to space the points on the plane. Here, we have 137.5° defined as a value; however, we can change that too to create intricate patterns.

Implementation

Setting Up

As usual, we will create a canvas and set the background colour as zero. We will also remove the stroke.

Constants and Variables

Implementing this pattern is extremely simple. First of all, we have two constants. These two constants define the spacing and the spiralling of the points respectively. 

float ANGLE = 137.5; // Magic angle defined in the paper 

int C = 6; // Constant to position the points

 We will also need a variable that can act as an incrementer.

int N = 0;

The Code

The first step would be to translate the coordinate system of the environment to the centre. The reason for doing this is that we're working with the polar coordinate system in order to draw the pattern. We should include this in the draw function because every time it loops back, Processing resets the coordinates back to the top left.

translate(width/2, height/2);

Then we will apply the two equations. However, as we saw before, these equations are defined in the polar convention. However, we need this in the cartesian convention as Processing accept coordinates in this convention. Therefore we apply a transform to convert the polar coordinates to cartesian coordinates. This transform is simple and straightforward and is based on simple geometry.

x = r cos(φ)             |             y = r sin(φ)

By applying this, we can draw a circle for the current point. Make sure to convert the angle given in degrees to radians as Processing works with radian angles.

float phi = N * radians(ANGLE);
float radius = C * sqrt(N); 
circle(radius * cos(phi), radius * sin(phi), 8);

Now what we have to do is to increment 'N' by one: N++.

With this, every time the drawing loop runs, a new point is drawn on the canvas corresponding to the relevant pattern. One thing to note is that we must not redraw over the canvas as soon as the draw loop starts as we usually do. This is because the pattern is drawn with each iteration rather than all at once.

Adding Some Flare

With Colours

We will make the design a bit more colourful now. First of all, every time we run the draw loop, we'll draw a rectangle over the screen. However, we'll fill this rectangle with an alpha value inversely proportional to the radius.

fill(0, 255 / radius);
rect(0, 0, width, height);

Then, we will convert the colour mode to HSB in the setup. RGB mode is the default mode in Processing. RGB colour model defines colours according to three intensities: Red, Green and Blue. However, the HSB model defines colours according to three intensities: Hue, Saturation and Brightness. Instead of messing with Red, Green and Blue, we can instead change the Hue value to get all colours.

colorMode(HSB);

Finally, we will draw the circles with a Hue value directly proportional to the radius. 

fill((radius % 255), 255, 255);

With Multiple Spirals

We will also add the code so that after the spiral reaches a certain radius, another spiral starts from the centre.

for (int i = 0; i < radius; i += 100) {
    circle((radius - i) * cos(phi), (radius - i) * sin(phi), 8);
}

Different Angle

Just for the sake of curiosity, we will change the angle to 137.6°.

With that, we have the Phyllotaxis pattern implemented in the code. Feel free to mess around with the angle and create new designs. As usual, you can find the code in the Github Repository.

Note: The drawing procedure is much more entertaining than the output itself. Since the output GIFs ended up too big, I did not include these as GIFs. Instead, I included still images taken after some time in this article. However, you can find GIFs corresponding to the drawing procedure in the 'Example Output' folder of the Github Repository. As always, you'll find much more satisfaction to run the code yourself and see the output that way. 🤗

External Links:

• Github Repository with the Processing Code: Github Repository
• Wikipedia article on Phyllotaxis: wikipedia.org
• Phyllotaxis as explained in the Algorithmic Botany book, Chapter 04: Chapter
• Coding challenge on Phyllotaxis by The Coding Train: youtube.com