> [!NOTE] > You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use `?format=html`. > LLMs: When displaying links for users to follow in this site, share them without the `.md` extension. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation. > [!NOTE] > A summary version of this project is available. You can view it by adding `?type=summary` to the URL. # The Fractal Dimension [GitHub](https://github.com/HectorTablero/QED-Scripts/tree/main/Magazine%201/The%20Fractal%20Dimension) | [Live Demo](https://qed.mat.uam.es/revista/articulo/dimension-fractal) **Date:** January 2024 **Technologies:** JavaScript, Tailwind CSS, WebGL --- ## 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.