Creative Coding: The Math of Fractals
Many natural patterns possess a striking geometric quality: the jagged contour of a mountain range, the branch splits of a winter tree, the detailed nodes of a Romanesco broccoli, or the outline of a coastline. In standard Euclidean geometry, objects have integer dimensions—a line is 1D, a plane is 2D, and a solid is 3D. But natural shapes exist in between, displaying fractional dimensions.
These shapes are called fractals: self-similar mathematical curves that repeat their detailed structures recursively at infinitely smaller scales.
To showcase these concepts, we overhauled a creative coding project into a browser-based Interactive Fractal & Chaos Theory Suite. In this lesson, we study the mathematics behind three iconic fractal systems: boolean logic landscapes, recursive growth, and complex plane orbits.
The Chaos Glossary
- Self-Similarity: A property where a small part of an object looks identical or similar to the whole.
- Recursion: A process where a function calls itself, breaking a problem into smaller instances.
- Complex Number: A number in the form a + bi, where i² = -1. Represents coordinates on a 2D plane.
- Perlin Noise: A gradient noise algorithm generating smooth, natural random transitions.
1. Bitwise Landscapes (Boolean Grids)
The original iteration of this project investigated how binary logic operations (like AND, OR, XOR) produce geometric structures when mapped to coordinate pixels.
Computers store integers in binary bits. When we evaluate the bitwise XOR (^) or AND (&) of coordinates x and y, the resulting integers repeat at powers-of-two boundaries. By plotting random points ($x, y$) colored by their logic outcomes:
\(\text{Point}_1 = (x \lor y, x \land y)\) \(\text{Point}_2 = (x \land y, x \oplus y)\)
We reveal a grid of self-similar rectangles. This demonstrates that boolean logic gates naturally form fractal patterns when evaluated over 2D spans.
2. Recursive Trees (Organic Geometry)
A recursive branching tree is a classic geometric fractal. We define a function branch(length, theta) that draws a straight line representing the trunk, translates to the tip, and then calls itself twice at opposing angles ($\theta$ and $-\theta$) with a scaled-down branch length ($L_{next} = r \cdot L$):
\(x_{next} = x + L \cdot \cos(\theta)\) \(y_{next} = y - L \cdot \sin(\theta)\)
To make the tree look organic, we simulate wind gusts. Rather than using simple random values (which create jerky movements), we query Perlin Noise to add a smooth, continuous angular sway offset to the branch rotation angles:
\[\theta_{sway} = \theta + \text{Noise}(t)\]3. The Mandelbrot & Julia Sets
The most famous fractals in mathematics exist in the complex plane. We define a simple iterative quadratic formula:
\[z_{n+1} = z_n^2 + c\]| Where $z$ and $c$ are complex numbers. We map every pixel $(x, y)$ to a complex coordinate. We start at $z_0 = 0$ and iterate the formula. If the magnitude of $z$ escapes to infinity ($ | z | > 2$), the point is outside the set. The number of iterations it takes to escape determines the pixel’s color. |
- Mandelbrot Set: We vary $c$ (each pixel has its own coordinate $c$) and start with $z_0 = 0$.
- Julia Set: We keep $c$ constant for the entire grid, and vary the starting position $z_0$ based on each pixel’s coordinate.
By dragging your mouse across the canvas, you change the constant $c$, morphing the Julia set through infinite geometric configurations.
Interactive Fractal & Chaos Suite
Select a mode, adjust parameters, and watch complex math shapes form. Drag your mouse inside the Julia canvas to morph the equations.
Explore the full codebase and run local builds via the repository: shubhamkrshandilya/fractal