The Fractal Dimension

Overview

The fractal implementations visualize self-similar mathematical structures through iterative animations. Four types are included: Cantor set, Sierpinski triangle, von Koch snowflake curve, and complex fractals (Mandelbrot/Julia sets). Each uses different rendering techniques optimized for their specific geometry.

Cantor Fractal

Description

Animates the construction of the Cantor set by repeatedly removing the middle third of line segments. The visualization shows multiple layers simultaneously, revealing the fractal’s hierarchical structure.

Implementation

Uses HTML divs with flexbox to represent segments. Each iteration:

1. Identifies solid segments in the current layer
2. Splits them into two segments with a gap in the middle
3. Animates the gap expansion over splitDuration ticks
4. Maintains the transformation across all lower layers

The element uses data-grow, data-shrink, and data-empty attributes to track animation state. Empty segments (gaps) have black backgrounds at 50% opacity.

Animation Timing

• Initial fade-in of base layer: pauseDuration ticks
• Each split: splitDuration ticks of animation + pauseDuration pause
• Final fade-out: pauseDuration ticks before reset

Sierpinski Fractal

Description

Renders the Sierpinski triangle by recursively removing inverted triangles from an equilateral triangle. Uses canvas-based rendering for smooth, scalable graphics.

Implementation

The element uses the canvas 2D API to draw triangles. The recursive drawSierpinski function:

1. Draws an upward-pointing triangle in the center (creating a “hole”)
2. Recursively processes the three remaining triangular regions
3. Uses alpha blending to animate the appearance of new holes

The animation gradually increases the recursion depth, revealing one layer at a time. Triangle positioning uses trigonometric calculations to maintain equilateral geometry.

Technical Details

The canvas is resized to maintain aspect ratio ($1 : \frac{\sqrt{3}}{2}$) during viewport changes. Background and triangle colors are pulled from theme constants, with alpha values controlled by animation progress for smooth fade-ins.

Von Koch Fractal

Description

Animates the construction of the von Koch curve by replacing each line segment with a four-segment path that includes an equilateral triangle protrusion.

Implementation

Uses SVG for vector-based rendering. Each line element stores target coordinates in data attributes. The animation:

1. Divides each segment into four parts (two straight, two forming a triangle peak)
2. Interpolates positions over splitDuration ticks
3. Applies the transformation recursively across all layers

The division algorithm:

• Calculates points at $\frac{1}{3}$ and $\frac{2}{3}$ along the segment
• Finds the peak point using rotation by $-60^\circ$ around the first third point
• Creates four new segments connecting these points

Animation Cycle

After reaching maximum depth, the fractal animates back to a straight line by interpolating all points back to $y=10$. Final fade-out occurs before reset.

Complex Fractals (Mandelbrot & Julia Sets)

Description

Renders complex number fractals using escape-time algorithms. Supports both Mandelbrot set (varying $c$, fixed $z_0$) and Julia set (fixed $c$, varying $z_0$) with customizable parameters.

Core Algorithm

For each pixel, iterate:

$$z_{n+1} = z_n^{power} + c$$

Count iterations until $|z| > 2$ or max iterations reached. Color based on escape time.

Mandelbrot Set

• $c$ varies across complex plane (real: -2.2 to 1.2, imaginary: -2.2 to 2.2)
• $z_0 = 0$

Julia Set

• $c$ is fixed (controlled by re and im parameters)
• $z_0$ varies across complex plane (real and imaginary: -2.2 to 2.2)
• Includes sliders for real-time parameter adjustment (power, real, imaginary components)

Optimization

Caching: Stores iteration counts in a 2D array to avoid recalculation during color changes or resizing.

Progressive Coloring: Gradually increases the color palette from 8 to 16 colors over animationDuration ticks, creating an animation effect without recalculating the set.

Complex Power: For Julia sets with power $\neq$ 2, uses polar form: $z^n = r^n \cdot e^{i n \theta}$

Color Scheme

Generates gradients between background and main theme colors. The set itself (points that don’t escape) renders as background color, while escaped points use gradient colors based on their escape time modulo palette size.

Technical Details

Uses ImageData API for direct pixel manipulation, avoiding DOM overhead. The canvas is redrawn entirely each frame during color animation, but uses cached iteration data to maintain performance.

For Julia sets, the sliders use custom styling to match the theme and synchronize with numeric inputs for precise control.