Phyllotactic Patterns

Everything has a purpose when you look at a plant, the shape of the leaves, the petals, the thorns on the stem, and the way it grows. When you look at how plants grow, you slowly realize that some patterns are visible from the outside. For example, the way the branches grow on a tree, the way the leaves grow on a stem, and the pattern that the flowers form on the stem, can all be classified into a distinctive class of patterns known as phyllotaxis.

A spiral phyllotactic pattern inspired the design above. It was programmatically generated using D3 and the following script. You can see it live and play with the code at https://replit.com/@devudara/Phyllotaxis.

// Adapted from https://bl.ocks.org/mbostock/11463507 (by Mike Bostock)

const width = window.innerWidth;
const height = window.innerHeight;
const radius = Math.sqrt(width / 2 * width / 2 + height / 2 * height / 2) + 5;

// Golden ratio
theta = (1 + Math.sqrt(5)) / 2

const color = d3.scaleSequential(d3.interpolateTurbo).domain([0, 90])
const spacing = 4;
const size = 2;
let speed = 1;
let index = 0;
let total = (radius * radius) * 2 / (spacing * spacing);

let canvas = d3.select("body").append("canvas")
  .attr("width", radius * 2)
  .attr("height", radius * 2);

let context = canvas.node().getContext("2d");

context.translate(radius, radius);

d3.timer(() => {
  for (let j = 0; index < total && j < speed; ++j) {
    let radius = spacing * Math.sqrt(++index);
    let angle = index * theta;
    let x = radius * Math.cos(angle);
    let y = radius * Math.sin(angle);

    context.beginPath();
    context.arc(x, y, size, 0, 2 * Math.PI);
    context.fillStyle = color(j / theta);
    context.fill();
  }

  speed += 1;
});

What initially grabbed my attention is that the sequence of spiral dots this pattern produces generally leads to a number of left and right spirals that are successive Fibonacci numbers. For example, in the above example, 34 spirals go to one side and 55 to the other. This is just one example of the Fibonacci sequence being used in the design of things in nature.

The pattern of interconnecting spirals that emerges from a simple set of rules is harmonious. This pattern also produces the most efficient packing of seeds mathematically possible within the flower head in plants such as sunflowers. The similicity of nature is only overshadowed by its complexity.