Fibonacci sequence

Both of these examples are inspired by the Fibonacci sequence, where:

F₀ = 0,
F₁ = 1,
F_n = F_{n - 1} + F_{n - 2} for each n > 2.

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...

Time: 0

The corresponding udpateData function is as follows:

function updateData({ data, tick }) {
  if (tick === 0) {
    return [0];
  }
  if (tick === 1) {
    return [0, 1];
  }
  const lastNumber = data[tick - 1] + data[tick - 2];
  return [...data, lastNumber];
}

F_n / F_n-1 converges to φ, the golden ratio - (1 - √5) / 2.

Because of this convergence, the Fibonacci sequence is sometimes associated with spirals. We could:

draw a square of side F_n, then
draw a square of side F_n+1 to its right, then
draw a square of side F_n+2 below these two squares, then
draw a square of side F_n+3 to the left of these squares, then
a square of side F_n+4 above, etc, etc.

and by linking their corners, obtain a Golden spiral.

But we can also draw a Golden Spiral without even needing to initiate or update data.

We can start from a rectangle φ * k by k rectangle, divide its longer side by φ, draw that square, and keep on dividing the remaining rectangle. We'll have squares of same proportions and can also draw a similar spiral.

Time: 0

All we need is the number of steps we want to go (tick) and a Frame to render the squares and spiral.

const FibonacciSpiral = () => (
  <Model initialParams={{ size: 500 }} delay={100} maxTime={20}>
    <FibonacciSpiralFrame />
  </Model>
);