Fractals

CalcpadCE treats fractals as a stress-test for its iterative-computation, complex-number and inline-SVG capabilities — the same primitives that drive engineering worksheets are repurposed here to render self-similar geometry.

Two flavours coexist: escape-time sets, where every pixel is the result of an iterated map evaluated to a divergence threshold (the Mandelbrot set is the canonical example), and L-system style replacements, where a seed polygon is recursively subdivided into ever-finer detail. The animated variants (Koch snowflake, Kochwave, Kochwave snowflake) reveal each subdivision step as a separate SVG layer, turning convergence toward the limit shape into a watchable timeline. A stochastic chaos-game (Sierpinski tree) closes the set, showing how randomness alone reproduces a fixed attractor.

Iteration depth, viewport and palette are exposed at the top of every sheet for easy zoom-and-render experiments.

Mandelbrot Set

Renders the Mandelbrot set and a deep-zoom inset by mapping each grid point through the iterated quadratic \(z_{n+1} = z_n^2 + c\) via $Map. Pixel intensity is the escape iteration count, raised to a power for contrast control.

Code:

#hide
PlotStep = 1','PlotWidth = 1200','PlotHeight = PlotWidth
PlotShadows = 0','PlotSmooth = 1','PlotPalette = 4
#show
$Map{Mandelbrot(x; y)^2 @ x = -2 : 0.5 & y = -1.25 : 1.25}
$Map{Mandelbrot(x; y)^4 @ x = -0.59 : -0.58 & y = 0.55 : 0.56}

Rendered Output:

Koch Snowflake

Static construction of the Koch snowflake up to five iterations, with each level rendered as a separate SVG polygon. Each segment is split into four by inserting two intermediate points and a tip rotated by \(60°\).

Code:

'Initial triangle coordinates
a = sqrt(3)/2
x = hp([0; 1; 0.5; 0])
y = hp([0; 0; a; 0])
'Number of iterations -'n = 5
#val
'<style>polygon {stroke:steelBlue; stroke-width:0.2; stroke-opacity:0.4;}</style>
#hide
w = 150', 'h = 1.2*w', 'k = 100
#for i = 1 : n
    n_p = len(x)
    #show
    '<h4>Iteration 'i'</h4>
    '<svg viewBox="0 10 'k' 'k'" style="transform:scale(0.9); width:'w'pt; height:'h'pt">
    '<defs><radialGradient id="sff" cx="50%" cy="50%"><stop offset="0%" stop-color="lightCyan"/><stop offset="100%" stop-color="lightBlue"/></radialGradient></defs>
    '<polygon id = "sf'i'" points = "
    #for j = 1 : n_p
        x.j*k','(a - y.j)*k' '
    #loop
    '" fill="url(#sff)"/></svg>
    #hide
    x1 = x.1', 'y1 = y.1
    'Iterate over the segments
    #for j = 1 : n_p - 1
        p1 = hp([x.j; y.j])'- the first point of the current segment
        p2 = hp([x.(j + 1); y.(j + 1)])'- the second point
        Δ = p2 - p1'- difference
        'Add three intermediate points
        A = p1 + Δ/3
        B = p1 + Δ/2 + hp([Δ.2; -Δ.1])*a/3
        C = p1 + Δ*2/3
        'Build new vectors by concatenation
        x1 = join(x1; A.1; B.1; C.1; p2.1)
        y1 = join(y1; A.2; B.2; C.2; p2.2)
    #loop
    'Reassign to the original vectors
    x = join(x1; p2.1)
    y = join(y1; p2.2)
#loop

Rendered Output:

Initial triangle coordinates

a =    √ 32 = 0.866

⃗x = hp ( [0; 1; 0.5; 0] )  = [0 1 0.5 0]

⃗y = hp ( [0; 0; a; 0] )  = hp ( [0; 0; 0.866; 0] )  = [0 0 0.866 0]

Number of iterations - n = 5

Iteration 1

Iteration 2

Iteration 3

Iteration 4

Iteration 5

Koch Snowflake 🎬

Animated variant of the Koch snowflake: every iteration becomes an SVG layer, toggled in sequence by CSS so the limit curve emerges over time.

Code:

'Initial triangle coordinates
#def a$ = sqrt(3)/2
x = hp([0; 1; 0.5; 0])', 'y = hp([0; 0; a$; 0])
'Number of iterations -'n = 6

#val
'<style>#kochAnim polygon{display:none; stroke:#08a; stroke-width:0.1}</style>
#hide
w = 300', 'h = 1.2*w', 'k = 100
#show
'<center><svg id="kochAnim" viewBox="0 10 'k' 'k'" style="width:'w'pt; height:'h'pt;">
'<defs><radialGradient id="sff" cx="50%" cy="50%"><stop offset="0%" stop-color="lightSkyBlue"/><stop offset="70%" stop-color="steelBlue"/><stop offset="120%" stop-color="#2060a0"/></radialGradient></defs>
#for i = 1 : n
    #hide
    n_p = len(x)
    #show
    '<polygon id="kochAnim-fr-'i'" points="
    #for j = 1 : n_p
        x.j*k','(a$ - y.j)*k' '
    #loop
    '" fill="url(#sff)" fill-opacity="0.8"/>
    #hide
    x1 = x.1', 'y1 = y.1
    'Iterate over the segments
    #for j = 1 : n_p - 1
        p1 = hp([x.j; y.j])'- the first point of the current segment
        p2 = hp([x.(j + 1); y.(j + 1)])'- the second point
        Δ = p2 - p1'- difference
        'Add three intermediate points
        A = p1 + Δ/3
        B = p1 + Δ/2 + hp([Δ.2; -Δ.1])*a$/3
        C = p1 + Δ*2/3
        'Build new vectors by concatenation
        x1 = join(x1; A.1; B.1; C.1; p2.1)
        y1 = join(y1; A.2; B.2; C.2; p2.2)
    #loop
    'Reassign to the original vectors
    x = join(x1; p2.1)
    y = join(y1; p2.2)
    #show
#loop
'</svg></center>
'<script>(function(){var i=1;var f=$("#kochAnim-fr-1");f.show();setInterval(function(){if(++i>'n'){i=1;$("#kochAnim polygon:not(#kochAnim-fr-1)").hide();}f=$("#kochAnim-fr-"+i);f.show(600);},500);})();</script>

Rendered Output:

Initial triangle coordinates

⃗x = hp ( [0; 1; 0.5; 0] )  = [0 1 0.5 0] , ⃗y = hp([0; 0;    √ 32; 0]) = [0 0 0.866 0]

Number of iterations - n = 6

 

Kochwave 🎬

Open-curve cousin of the Koch snowflake — a single horizontal segment subdivided seven times, animated step by step to show the wavefront fractalising into a self-similar coastline.

Code:

'Initial coordinates
#def a$ = sqrt(3)/2
x = hp([0; 1])', 'y = hp([0; 0])
'Number of iterations -'n = 7
'<h4>Animation</h4>
#val
'<style>#kochwaveWave polyline{display:none; stroke:Teal; stroke-width:0.08; stroke-linejoin:round;}</style>
#hide 8
w = 400', 'h = 200', 'k = 120
#round 12
#show
'<svg id="kochwaveWave" viewBox="0 '0.4*k' 'k' 'k/2'" style="width:'w'pt; height:'h'pt;">
'<defs><linearGradient id="sff" gradientTransform="rotate(90)"><stop offset="0%" stop-color="#8de"/><stop offset="30%" stop-color="#bef"/><stop offset="100%" stop-color="White"/></linearGradient></defs>
#for i = 1 : n
    #hide
    n_p = len(x)
    #show
    '<polyline id="kochwaveWave-fr-'i'" points="
    #for j = 1 : n_p
        x.j*k','(a$ + y.j)*k' '
    #loop
    '" fill="url(#sff)" />
    #hide
    x1 = x.1', 'y1 = y.1
    'Iterate over the segments
    #for j = 1 : n_p - 1
        p1 = hp([x.j; y.j])'- the first point of the current segment
        p2 = hp([x.(j + 1); y.(j + 1)])'- the second point
        Δ = p2 - p1'- difference
        'Add three intermediate points
        A = p1 + Δ/3
        B = p1 + 5*Δ/6 + hp([Δ.2; -Δ.1])*a$/3
        C = p1 + Δ*2/3
        'Build new vectors by concatenation
        x1 = join(x1; A.1; B.1; C.1; p2.1)
        y1 = join(y1; A.2; B.2; C.2; p2.2)
    #loop
    'Reassign to the original vectors
    x = join(x1; p2.1)
    y = join(y1; p2.2)
    #show
#loop
'</svg><br/>
'Number of points -'n_p
'<script>
'(function(){
'var i = 1;
'var f = $("#kochwaveWave-fr-1");
'f.show();
'setInterval(function(){
  'if(++i > 'n'){i=1;}
  'let f1 = $("#kochwaveWave-fr-"+i);
  'f1.show();
  'f.hide();
  'f = f1;
'},500);
'})();
'</script>

Rendered Output:

Initial coordinates

⃗x = hp ( [0; 1] )  = [0 1] , ⃗y = hp ( [0; 0] )  = [0 0]

Number of iterations - n = 7

Animation

Number of points -5462

Kochwave Snowflake 🎬

Closed-loop Kochwave: the wave-style subdivision rule is applied to a triangular seed, producing an inverted snowflake whose seven iterations are rendered as a CSS-driven SVG animation.

Code:

'Initial coordinates
#def a$ = sqrt(3)/2
x = hp([0; 1; 0.5; 0])', 'y = hp([0; 0; -a$; 0])
'Number of iterations -'n = 7
'<h4>Animation</h4>
#val
'<style>#kochwaveAnim polygon{display:none; stroke:Teal; stroke-width:0.1; stroke-linejoin:round;fill:Turquoise;}</style>
#hide 8
w = 360', 'h = w', 'k = 100
#round 12
#show
'<svg id="kochwaveAnim" viewBox="0 '0' 'k' 'k'" style="width:'w'pt; height:'h'pt">
#for i = 1 : n
    #hide
    n_p = len(x)
    #show
    '<polygon id="kochwaveAnim-fr-'i'" points="
    #for j = 1 : n_p
        x.j*k','(a$ + y.j)*k' '
    #loop
    '" fill="url(#sff)"/>
    #hide
    x1 = x.1', 'y1 = y.1
    'Iterate over the segments
    #for j = 1 : n_p - 1
        p1 = join(x.j; y.j)'- the first point of the current segment
        p2 = join(x.(j + 1); y.(j + 1))'- the second point
        Δ = p2 - p1'- difference
        'Add three intermediate points
        A = p1 + Δ/3
        B = p1 + 5*Δ/6 + join(Δ.2; -Δ.1)*a$/3
        C = p1 + Δ*2/3
        'Build new vectors by concatenation
        x1 = join(x1; A.1; B.1; C.1; p2.1)
        y1 = join(y1; A.2; B.2; C.2; p2.2)
    #loop
    'Reassign to the original vectors
    x = join(x1; p2.1)
    y = join(y1; p2.2)
    #show
#loop
'</svg><br/>
'Number of points - 'n_p
'<script>
'(function(){
'var i = 1;
'var f = $("#kochwaveAnim-fr-1");
'f.show();
'var timer = setInterval(
  'function(){
     'if(++i > 'n'){i=1;}
     'f.hide(600);
     'f = $("#kochwaveAnim-fr-"+i);
     'f.show(400);
   '}
',500);
'})();
'</script>

Rendered Output:

Initial coordinates

⃗x = hp ( [0; 1; 0.5; 0] )  = [0 1 0.5 0] , ⃗y = hp([0; 0; -   √ 32; 0]) = [0 0 -0.866 0]

Number of iterations - n = 7

Animation

Number of points - 13654

Sierpinski Christmas Tree

Chaos-game construction of a Sierpinski-style triangle, dressed up as a Christmas tree. A point is repeatedly moved halfway toward a randomly chosen vertex; after 100 000 iterations the attractor emerges as a green ellipse cloud.

Code:

#val
#hide
w = 300','h = 800
p = hp([0; 0|w; 0|w/2; h])
v = hp([random(w); random(h)])
n = 100000
#show
'<svg viewBox="'0' '-40' 'w' 'h + 120'" style="width:'w'px; height:'h'px;">
#for i = 1 : n
    #hide
    d = 2 + i/n
    k = max(1; min(round(5*random(d/3.5)); 3))
    v = (v + row(p; k))/2
    cx = v.1','cy = h - v.2
    #show
    '<ellipse cx="'cx'" cy="'cy'" rx="0.3"  ry="0.8" fill="green"/>
#loop
'<defs><radialGradient id="ball" cx="35%" cy="35%"><stop offset="0%" stop-color="Gold"/><stop offset="100%" stop-color="GoldenRod"/></defs>
'<circle cx="'w/2'" cy="-12" r="12" fill="url(#ball)"/>
'<text x="'w/2'" y="'h + 40'" text-anchor="middle" fill="firebrick" style="font-size:42px;">Merry Christmas!</text>
'</svg>
#equ

Rendered Output:

Spotted an error? Edit these examples.