DN-6: Explanations.

client/src/app/blog/posts/20241214_new-blog-feature-canvases.mdx

@@ -1,6 +1,6 @@
 ---
-title: "New blog feature: canvases"
-blurb: "Circus bitch world"
+title: "Canvases a canvas for creativity"
+blurb: "L'extase de l'extase"
 coverImage: 205
 author: "Dereck Mezquita"
 date: 2024-12-14
@@ -9,7 +9,21 @@ published: true
 comments: true
 ---
 
-## Golden Spiral Demo (Smaller Canvas)
+In this article, we explore the power of integrating HTML canvases into our blog posts. Each demonstration is a live rendering powered by JavaScript, illustrating not just beautiful patterns but also fundamental mathematical principles. The new website feature lets us embed custom code and produce dynamic figures on the fly—ideal for bringing complex ideas to life.
+
+We'll delve into the mathematics behind golden spirals, fractal sets, and parametric curves. Along the way, we'll discuss the programming strategies that implement these visualisations and show how combining mathematics with code can produce stunning results.
+
+## The Golden Spiral: A Visualisation of the Divine Proportion
+
+The golden ratio, **φ ≈ 1.618**, is a mathematical constant that appears in art, nature, and geometry. One captivating manifestation is the **golden spiral**, generated by a logarithmic curve that grows outward proportionally.
+
+A simplified version of the golden spiral can be represented in polar coordinates as:
+
+$$
+r(\theta) = a \cdot \phi^{\frac{\theta}{\pi/2}}
+$$
+
+where $ \phi $ is the golden ratio and $ a $ is a scale factor. We convert these $(r,\theta)$ values to Cartesian coordinates to draw the curve. Programmatically, we step through angles, compute radii, and trace out the spiral on the canvas.
 
 <CanvasWithJs 
     code={`
@@ -59,7 +73,15 @@ comments: true
     height={400}
 />
 
-## Fractal Demo: Sierpinski Triangle
+## Sierpinski's Triangle: Recursive Geometry in Action
+
+The **Sierpinski triangle** is a fractal formed by recursively removing the central triangle from a subdivided larger one. Its fractal dimension $ D $ is:
+
+$$
+D = \frac{\ln(3)}{\ln(2)} \approx 1.585
+$$
+
+As the recursion deepens, the pattern reveals infinite self-similarity. Programmatically, we use recursion: at each step, we subdivide and remove parts of the figure until a certain depth is reached.
 
 <CanvasWithJs code={`
     // Fill the canvas with white
@@ -106,7 +128,15 @@ comments: true
     sierpinski(ctx, x1, y1, x2, y2, x3, y3, depth);
 `} width={400} height={300} />
 
-## Fractal Demo: Koch Snowflake
+## The Koch Snowflake: Infinite Perimeter, Finite Area
+
+The **Koch Snowflake** starts with an equilateral triangle and, at each iteration, transforms each line segment. Its fractal dimension is:
+
+$$
+D = \frac{\ln(4)}{\ln(3)} \approx 1.2619
+$$
+
+The perimeter grows without bound, yet the area converges. Our code recursively subdivides each line segment, introducing a protrusion to form the characteristic "flake" shape.
 
 <CanvasWithJs code={`
     ctx.fillStyle = '#ffffff';
@@ -163,7 +193,9 @@ comments: true
     koch(ctx, x3, y3, x1, y1, depth);
 `} width={400} height={300} />
 
-## Fractal Demo: Fractal Tree (Revised to Fill Canvas)
+## The Fractal Tree: Self-Similarity in Nature's Architecture
+
+Fractal trees mirror patterns found in nature. By repeatedly branching at certain angles and applying a length scale factor, we get a self-similar structure. Each branch reduces to a smaller copy of the whole, reflecting the fractal principle of self-similarity.
 
 <CanvasWithJs code={`
     ctx.fillStyle = '#ffffff';
@@ -184,14 +216,11 @@ comments: true
         ctx.lineTo(x2, y2);
         ctx.stroke();
 
-        // Branch reduction
         const newLength = length * 0.7;
         const newDepth = depth - 1;
         const newBranchWidth = branchWidth * 0.7;
 
-        // Draw right branch
         drawBranch(ctx, x2, y2, newLength, angle + Math.PI/4, newDepth, newBranchWidth);
-        // Draw left branch
         drawBranch(ctx, x2, y2, newLength, angle - Math.PI/4, newDepth, newBranchWidth);
     }
 
@@ -200,8 +229,20 @@ comments: true
     drawBranch(ctx, centerX, bottomY, 60, -Math.PI/2, 8, 6);
 `} width={300} height={400} />
 
+## The Barnsley Fern: Chaos, Probability, and a Leaf Pattern
+
+The **Barnsley Fern** employs four linear transformations chosen with certain probabilities. Despite the randomness, the points converge into a realistic fern shape. The transformations can be described as:
 
-## Barnsley Fern Demo
+$$
+\begin{aligned}
+f_1(x,y) &= (0,0.16y) \\
+f_2(x,y) &= (0.85x + 0.04y,\; -0.04x + 0.85y + 1.6) \\
+f_3(x,y) &= (0.20x - 0.26y,\; 0.23x + 0.22y + 1.6) \\
+f_4(x,y) &= (-0.15x + 0.28y,\; 0.26x + 0.24y + 0.44)
+\end{aligned}
+$$
+
+Applying these transformations iteratively results in the fractal fern pattern.
 
 <CanvasWithJs code={`
     ctx.fillStyle = '#ffffff';
@@ -217,44 +258,37 @@ comments: true
         let xNext, yNext;
 
         if (r < 0.01) {
-            // Stem transformation
             xNext = 0;
             yNext = 0.16 * y;
         } else if (r < 0.86) {
-            // Main frond transformation
             xNext = 0.85 * x + 0.04 * y;
             yNext = -0.04 * x + 0.85 * y + 1.6;
         } else if (r < 0.93) {
-            // Left leaf transformation
             xNext = 0.20 * x - 0.26 * y;
             yNext = 0.23 * x + 0.22 * y + 1.6;
         } else {
-            // Right leaf transformation
             xNext = -0.15 * x + 0.28 * y;
             yNext = 0.26 * x + 0.24 * y + 0.44;
         }
 
         x = xNext;
         y = yNext;
 
-        // Scale and center the fern
         const px = canvas.width / 2 + x * canvas.height / 11;
         const py = canvas.height - y * canvas.height / 11;
         ctx.fillRect(px, py, 1, 1);
     }
 `} width={400} height={300} />
 
+## The Dragon Curve: Folding a Line into Complexity
 
-## Dragon Curve Demo
-
-The Dragon Curve is generated by repeatedly folding a line and flattening it. We’ll generate coordinates iteratively.
+The **Dragon Curve** emerges from a simple string rewriting system (an L-system). By repeatedly replacing characters $F$ and $G$ with patterns like $F \to F+G$ and $G \to F-G$, and interpreting $+$ and $-$ as turns, we produce a fractal curve of remarkable complexity.
 
 <CanvasWithJs code={`
     ctx.fillStyle = '#ffffff';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     ctx.strokeStyle = '#000000';
 
-    // Generate Dragon Curve points using a simple L-system-like expansion
     let sequence = 'F';
     const iterations = 10;
     for (let i = 0; i < iterations; i++) {
@@ -269,11 +303,8 @@ The Dragon Curve is generated by repeatedly folding a line and flattening it. We
             }
         }
         sequence = next;
-        // Replace '+' and '-' remain the same
     }
 
-    // We now have a string of F, G, +, - that defines a path
-    // Interpret F/G as forward moves, + as turn left 90°, - as turn right 90°
     let x = canvas.width / 2;
     let y = canvas.height / 2;
     let angle = 0;
@@ -288,19 +319,24 @@ The Dragon Curve is generated by repeatedly folding a line and flattening it. We
             y += Math.sin(angle) * step;
             ctx.lineTo(x, y);
         } else if (ch === '+') {
-            angle += Math.PI / 2; // turn left 90°
+            angle += Math.PI / 2; 
         } else if (ch === '-') {
-            angle -= Math.PI / 2; // turn right 90°
+            angle -= Math.PI / 2; 
         }
     }
 
     ctx.stroke();
 `} width={400} height={300} />
 
+## The Rose (Rhodonea) Curve: Petals of Pure Mathematics
 
-## Rose Curve (Rhodonea Curve) Demo
+A **Rose Curve** can be defined as:
 
-A rose curve is defined by a polar equation r = cos(kθ) or r = sin(kθ) for some integer k. These produce symmetrical petal-like patterns.
+$$
+r(\theta) = \cos(k\theta) \quad \text{or} \quad r(\theta) = \sin(k\theta)
+$$
+
+Adjusting $k$ changes the number of petals. We map this polar equation into Cartesian coordinates and draw a smooth, petal-like pattern.
 
 <CanvasWithJs code={`
     ctx.fillStyle = '#ffffff';
@@ -309,7 +345,7 @@ A rose curve is defined by a polar equation r = cos(kθ) or r = sin(kθ) for som
     ctx.lineWidth = 2;
     ctx.beginPath();
 
-    const k = 5; // number of petals if k is odd, rose has k petals; if even, it has 2k petals.
+    const k = 5; 
     const radius = Math.min(canvas.width, canvas.height) / 2 * 0.8;
     const centerX = canvas.width / 2;
     const centerY = canvas.height / 2;
@@ -325,4 +361,10 @@ A rose curve is defined by a polar equation r = cos(kθ) or r = sin(kθ) for som
     }
 
     ctx.stroke();
-`} width={400} height={300} />
+`} width={400} height={300} />
+
+# Conclusion
+
+By marrying mathematics with programming and rendering on a canvas, we've brought to life patterns that bridge art, geometry, and complexity theory. Each example demonstrates the website's new capacity to integrate interactive, dynamic visuals directly into blog posts, turning abstract equations into captivating experiences.
+
+From the divine proportion of the golden spiral to the chaotic elegance of the Barnsley Fern, these demonstrations show how code can illuminate mathematical truths, inspiring both deeper understanding and aesthetic appreciation.