Fibonacci Spiral
About This Sketch
The Fibonacci spiral appears everywhere in nature—from nautilus shells to hurricane formations to galaxy arms. This mathematical perfection emerges from the simplest rule: each number is the sum of the previous two.
The spiral's proportions approach the golden ratio (φ), considered the most aesthetically pleasing ratio in mathematics and art. The slow rotation reveals how the squares tile together to form this perfect spiral.
Algorithm
The golden spiral emerges from Fibonacci squares—each square's side equals the sum of the previous two. Quarter-circle arcs connect through the squares, creating nature's most perfect spiral.
**Key Concepts:**
- **Fibonacci Sequence**: Each number is sum of previous two (1, 1, 2, 3, 5, 8...)
- **Golden Ratio**: As sequence progresses, ratio approaches φ ≈ 1.618
- **Tiling Pattern**: Squares pack together following spiral arrangement
- **Geometric Spiral**: Quarter-circle arcs create smooth logarithmic spiral
- **Natural Proportions**: Found in nautilus shells, galaxies, flower petals
**How it works:**
1. Generate Fibonacci sequence: F(n) = F(n-1) + F(n-2)
2. Draw square with side length = Fibonacci number
3. Draw quarter-circle arc through the square
4. Position next square adjacent to current square
5. Rotate direction 90° clockwise for each new square
6. Spiral naturally emerges from the golden ratio
7. Slow rotation shows the spiral from different angles
Pseudocode
SETUP:
rotation = 0
DRAW (every frame):
CLEAR background
MOVE to center
ROTATE by rotation
fib = [1, 1]
FOR i = 2 to 12:
fib[i] = fib[i-1] + fib[i-2]
x = 0, y = 0
direction = 0
FOR i = 0 to fib.length:
size = fib[i] × scale
color = gradient based on i
DRAW square at (x, y) with size
DRAW quarter-circle arc through square
IF direction == RIGHT:
x = x + size, y = y - size
ELSE IF direction == UP:
(x stays same)
ELSE IF direction == LEFT:
x = x - size
ELSE IF direction == DOWN:
y = y + size
direction = (direction + 1) mod 4
rotation = rotation + 0.005
Source Code
let sketch = function(p) {
let rotation = 0;
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
p.translate(p.width/2, p.height/2);
p.rotate(rotation);
// Fibonacci sequence
let fib = [1, 1];
for (let i = 2; i < 12; i++) {
fib.push(fib[i-1] + fib[i-2]);
}
let scale = 2;
let x = 0;
let y = 0;
let direction = 0; // 0: right, 1: up, 2: left, 3: down
p.noFill();
for (let i = 0; i < fib.length; i++) {
let size = fib[i] * scale;
let t = i / fib.length;
let col = t < 0.5 ?
colors.accent1.map((c, idx) => p.lerp(c, colors.accent2[idx], t * 2)) :
colors.accent2.map((c, idx) => p.lerp(c, colors.accent3[idx], (t - 0.5) * 2));
p.stroke(...col);
p.strokeWeight(2);
// Draw square
p.rect(x, y, size, size);
// Draw arc for spiral
let arcStartAngle = direction * p.HALF_PI;
let arcEndAngle = (direction + 1) * p.HALF_PI;
p.arc(
x + (direction % 2 === 0 ? 0 : size),
y + (direction < 2 ? size : 0),
size * 2, size * 2,
arcStartAngle, arcEndAngle
);
// Move to next position
if (direction === 0) { // right
x += size;
y -= size;
} else if (direction === 1) { // up
// x stays same
} else if (direction === 2) { // left
x -= size;
} else if (direction === 3) { // down
y += size;
}
direction = (direction + 1) % 4;
}
rotation += 0.002;
};
};