From 1eb458a6b66f9f199324464e141868cffd7a5074 Mon Sep 17 00:00:00 2001
From: TobiasMue91 <tobias.mue91@googlemail.com>
Date: Sun, 1 Sep 2024 17:57:11 +0200
Subject: [PATCH] - add more color schemes and fractal types

---
 tools/fractal_viewer.html | 227 +++++++++++++++++++++++++++++++-------
 1 file changed, 190 insertions(+), 37 deletions(-)

diff --git a/tools/fractal_viewer.html b/tools/fractal_viewer.html
index ca61497..be5e057 100644
--- a/tools/fractal_viewer.html
+++ b/tools/fractal_viewer.html
@@ -17,25 +17,37 @@
         <canvas id="fractalCanvas" class="w-full rounded-lg shadow-inner mb-4 cursor-move"></canvas>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
             <div><label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="fractalType">Fractal
-                Type:</label><select id="fractalType"
-                                     class="w-full p-2 border rounded dark:bg-gray-700 dark:text-white">
-                <option value="mandelbrot">Mandelbrot Set</option>
-                <option value="julia">Julia Set</option>
-                <option value="burningShip">Burning Ship</option>
-                <option value="mandelbox">Mandelbox</option>
-            </select></div>
+                Type:</label>
+                <select id="fractalType" class="w-full p-2 border rounded dark:bg-gray-700 dark:text-white">
+                    <option value="mandelbrot">Mandelbrot Set</option>
+                    <option value="julia">Julia Set</option>
+                    <option value="burningShip">Burning Ship</option>
+                    <option value="mandelbox">Mandelbox</option>
+                    <option value="sierpinskiCarpet">Sierpinski Carpet</option>
+                    <option value="lyapunov">Lyapunov Fractal</option>
+                    <option value="phoenix">Phoenix Fractal</option>
+                    <option value="mandelbox3DSlice">Mandelbox 3D Slice</option>
+                    <option value="newtonFractal">Newton Fractal</option>
+                </select>
+            </div>
             <div><label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="maxIterations">Max
                 Iterations: <span id="iterationValue">100</span></label><input type="range" id="maxIterations" min="50"
                                                                                max="1000" value="100" class="w-full">
             </div>
             <div><label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="colorScheme">Color
-                Scheme:</label><select id="colorScheme"
-                                       class="w-full p-2 border rounded dark:bg-gray-700 dark:text-white">
+                Scheme:</label><select id="colorScheme" class="w-full p-2 border rounded dark:bg-gray-700 dark:text-white">
                 <option value="default">Default</option>
                 <option value="rainbow">Rainbow</option>
                 <option value="fire">Fire</option>
                 <option value="ocean">Ocean</option>
                 <option value="psychedelic">Psychedelic</option>
+                <option value="pastel">Pastel</option>
+                <option value="neon">Neon</option>
+                <option value="grayscale">Grayscale</option>
+                <option value="autumn">Autumn</option>
+                <option value="electric">Electric</option>
+                <option value="cosmic">Cosmic</option>
+                <option value="vintage">Vintage</option>
             </select></div>
             <div><label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="juliaReal">Julia
                 Real:</label><input type="number" id="juliaReal" value="-0.7" step="0.1"
@@ -95,13 +107,43 @@
         const type = fractalType.value;
         const jr = parseFloat(juliaReal.value);
         const ji = parseFloat(juliaImag.value);
+
         for (let x = 0; x < width; x++) {
             for (let y = 0; y < height; y++) {
                 const zx = 1.5 * (x - width / 2) / (0.5 * zoomLevel * width) + centerX;
                 const zy = (y - height / 2) / (0.5 * zoomLevel * height) + centerY;
-                let i;
-                if (type === 'julia') i = julia(zx, zy, jr, ji, maxIter); else if (type === 'burningShip') i = burningShip(zx, zy, maxIter); else if (type === 'mandelbox') i = mandelbox(zx, zy, maxIter); else i = mandelbrot(zx, zy, maxIter);
-                const [r, g, b] = getColor(i, maxIter, scheme);
+
+                let value;
+                switch (type) {
+                    case 'julia':
+                        value = julia(zx, zy, jr, ji, maxIter);
+                        break;
+                    case 'burningShip':
+                        value = burningShip(zx, zy, maxIter);
+                        break;
+                    case 'mandelbox':
+                        value = mandelbox(zx, zy, maxIter);
+                        break;
+                    case 'sierpinskiCarpet':
+                        value = sierpinskiCarpet(zx, zy, maxIter);
+                        break;
+                    case 'lyapunov':
+                        value = lyapunov(zx, zy, maxIter);
+                        break;
+                    case 'phoenix':
+                        value = phoenix(zx, zy, maxIter);
+                        break;
+                    case 'mandelbox3DSlice':
+                        value = mandelbox3DSlice(zx, zy, maxIter);
+                        break;
+                    case 'newtonFractal':
+                        value = newtonFractal(zx, zy, maxIter);
+                        break;
+                    default:
+                        value = mandelbrot(zx, zy, maxIter);
+                }
+
+                const [r, g, b] = getColor(value, maxIter, scheme, type);
                 const pos = (y * width + x) * 4;
                 data[pos] = r;
                 data[pos + 1] = g;
@@ -109,6 +151,7 @@
                 data[pos + 3] = 255;
             }
         }
+
         ctx.putImageData(imageData, 0, 0);
     }
 
@@ -185,18 +228,140 @@
         return c;
     }
 
-    function getColor(i, maxIter, scheme) {
-        if (i === maxIter) return [0, 0, 0];
-        const t = i / maxIter;
+    function sierpinskiCarpet(x, y, maxIter) {
+        let iter = 0;
+        while (iter < maxIter) {
+            if ((Math.floor(x * 3) % 3 == 1) && (Math.floor(y * 3) % 3 == 1)) {
+                return iter;
+            }
+            x *= 3;
+            y *= 3;
+            x -= Math.floor(x);
+            y -= Math.floor(y);
+            iter++;
+        }
+        return maxIter;
+    }
+
+    function lyapunov(x, y, maxIter) {
+        const a = 3.7 * x;
+        const b = 3.7 * y;
+        let x0 = 0.5;
+        let sum = 0;
+        for (let i = 0; i < maxIter; i++) {
+            const r = i % 2 === 0 ? a : b;
+            x0 = r * x0 * (1 - x0);
+            sum += Math.log(Math.abs(r * (1 - 2 * x0)));
+        }
+        return sum / maxIter;
+    }
+
+    function phoenix(x, y, maxIter) {
+        let x1 = x, y1 = y, x2 = 0, y2 = 0;
+        const p = -0.5, q = 0.0;
+        for (let i = 0; i < maxIter; i++) {
+            const xx = x1 * x1 - y1 * y1 + x + p * x2;
+            const yy = 2 * x1 * y1 + y + q * y2;
+            if (xx * xx + yy * yy > 4) return i;
+            x2 = x1;
+            y2 = y1;
+            x1 = xx;
+            y1 = yy;
+        }
+        return maxIter;
+    }
+
+    function mandelbox3DSlice(x, y, maxIter) {
+        const scale = 2;
+        let zx = x, zy = y, zz = 0;
+        let c = 0;
+        for (let i = 0; i < maxIter; i++) {
+            zx = clamp(zx, -1, 1) * 2 - zx;
+            zy = clamp(zy, -1, 1) * 2 - zy;
+            zz = clamp(zz, -1, 1) * 2 - zz;
+
+            const r = Math.sqrt(zx*zx + zy*zy + zz*zz);
+            if (r < 0.5) {
+                zx *= 4; zy *= 4; zz *= 4;
+            } else if (r < 1) {
+                zx /= r*r; zy /= r*r; zz /= r*r;
+            }
+
+            zx = zx * scale + x;
+            zy = zy * scale + y;
+            zz = zz * scale;
+
+            if (zx*zx + zy*zy + zz*zz > 4) return i;
+            c++;
+        }
+        return c;
+    }
+
+    function clamp(x, min, max) {
+        return Math.min(Math.max(x, min), max);
+    }
+
+    function newtonFractal(x, y, maxIter) {
+        let zx = x, zy = y;
+        for (let i = 0; i < maxIter; i++) {
+            const zx2 = zx * zx, zy2 = zy * zy;
+            const zx3 = zx2 * zx - 3 * zx * zy2;
+            const zy3 = 3 * zx2 * zy - zy2 * zy;
+            const mag = zx3 * zx3 + zy3 * zy3;
+            if (mag < 1e-6) return i;
+            const denom = 3 * (zx2 + zy2);
+            zx -= (zx3 + 1) / denom;
+            zy -= zy3 / denom;
+        }
+        return maxIter;
+    }
+
+    function getColor(value, maxIter, scheme, type) {
+        if (type === 'lyapunov') {
+            // Lyapunov fractal uses a different coloring scheme
+            const hue = (value + 5) / 10; // Adjust this range as needed
+            return hsvToRgb(hue, 1, 1);
+        }
+
+        if (value === maxIter) return [0, 0, 0];
+
+        const t = value / maxIter;
         switch (scheme) {
-            case'rainbow':
+            case 'rainbow':
                 return hsvToRgb(t, 1, 1);
-            case'fire':
+            case 'fire':
                 return hsvToRgb(t / 3, 1, Math.min(1, t * 2));
-            case'ocean':
+            case 'ocean':
                 return hsvToRgb(0.6 + t / 3, 1, Math.min(1, t * 2));
-            case'psychedelic':
+            case 'psychedelic':
                 return hsvToRgb(Math.sin(t * Math.PI), 1, 1);
+            case 'pastel':
+                return hsvToRgb(t, 0.5, 1);
+            case 'neon':
+                return hsvToRgb(t, 1, t < 0.5 ? 0.5 + t : 1);
+            case 'grayscale':
+                const gray = Math.floor(t * 255);
+                return [gray, gray, gray];
+            case 'autumn':
+                return [
+                    Math.floor(255 * t),
+                    Math.floor(128 * Math.sin(Math.PI * t)),
+                    Math.floor(64 * (1 - t))
+                ];
+            case 'electric':
+                return hsvToRgb(0.6 + 0.4 * t, 1, t < 0.5 ? 2 * t : 1);
+            case 'cosmic':
+                return [
+                    Math.floor(128 * (1 + Math.sin(2 * Math.PI * t))),
+                    Math.floor(128 * (1 + Math.sin(2 * Math.PI * t + 2 * Math.PI / 3))),
+                    Math.floor(128 * (1 + Math.sin(2 * Math.PI * t + 4 * Math.PI / 3)))
+                ];
+            case 'vintage':
+                return [
+                    Math.floor(255 * (0.5 + 0.5 * Math.sin(Math.PI * t))),
+                    Math.floor(255 * (0.5 + 0.5 * Math.sin(Math.PI * t + Math.PI / 2))),
+                    Math.floor(255 * (0.5 + 0.5 * Math.sin(Math.PI * t + Math.PI)))
+                ];
             default:
                 return hsvToRgb(t, 1, Math.sqrt(t));
         }
@@ -210,24 +375,12 @@
         const q = v * (1 - f * s);
         const t = v * (1 - (1 - f) * s);
         switch (i % 6) {
-            case 0:
-                r = v, g = t, b = p;
-                break;
-            case 1:
-                r = q, g = v, b = p;
-                break;
-            case 2:
-                r = p, g = v, b = t;
-                break;
-            case 3:
-                r = p, g = q, b = v;
-                break;
-            case 4:
-                r = t, g = p, b = v;
-                break;
-            case 5:
-                r = v, g = p, b = q;
-                break;
+            case 0: r = v, g = t, b = p; break;
+            case 1: r = q, g = v, b = p; break;
+            case 2: r = p, g = v, b = t; break;
+            case 3: r = p, g = q, b = v; break;
+            case 4: r = t, g = p, b = v; break;
+            case 5: r = v, g = p, b = q; break;
         }
         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
     }