Generating Beautiful Procedural Fractal Art in the Browser

Fractals are geometric patterns that repeat infinitely at different scales, displaying the connection between mathematics and visual art. By leveraging the HTML5 Canvas API and recursive JavaScript algorithms, developers can generate complex fractal patterns directly in browser environments.

Lindenmayer Systems (L-Systems)

L-systems are formal grammars developed to model the growth processes of plants and trees. They use a starting string (axiom) and a set of replacement rules to build instructions:

- Axiom: The initial character string (e.g., `F`).

- Rules: Replacement patterns applied recursively (e.g., `F -> F+F-F-F+F`).

Once generated, these string instructions are read by a turtle graphics parser (translating characters into instructions like "move forward" or "rotate left") to draw plant-like structures and geometric curves.

Space-Filling Curves

Space-filling curves are continuous paths that fold recursively to cover a two-dimensional grid without self-intersecting:

- Hilbert Curve: Often used in data index configurations and signal processing applications due to its locality-preserving properties.

- Dragon Curve: A fractal pattern generated by recursively folding a strip of paper in half, producing complex layouts.

Renders are computed on the client side, displaying how simple recursive formulas can create intricate visual patterns.

Drawing Pythagoras Trees

The Pythagoras Tree is a fractal shape constructed from squares. Starting with a single base square, two smaller squares are drawn on top of it, forming a right-angled triangle. This construction is applied recursively, producing a branching tree layout:

$$a^2 + b^2 = c^2$$

By drawing these structures recursively onto an HTML5 Canvas, users can adjust rotation angles, colors, and iteration depths in real-time, creating an interactive math workspace.