Spaces:

LuciferDS
/

fractal-generator

Running

App Files Files Community

LuciferDS commited on Mar 30, 2025

Commit

461c732

verified ·

1 Parent(s): c6bf9e3

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +642 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Fractal Generator
-emoji: 😻
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: fractal-generator
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,642 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fractal Universe Explorer</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Ubuntu+Mono&display=swap');
+        :root {
+            --primary: #6c5ce7;
+            --secondary: #0984e3;
+            --dark: #2d3436;
+            --light: #dfe6e9;
+            --accent: #e17055;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background: linear-gradient(135deg, var(--dark), #000);
+            color: var(--light);
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        .header {
+            text-align: center;
+            padding: 2rem;
+            position: relative;
+        }
+        .title {
+            font-size: 3.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(to right, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            opacity: 0.8;
+            max-width: 800px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 2rem;
+        }
+        .controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            justify-content: center;
+            margin-bottom: 2rem;
+            width: 100%;
+            max-width: 900px;
+        }
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            min-width: 150px;
+        }
+        label {
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+        select, input, button {
+            padding: 0.8rem 1rem;
+            border-radius: 8px;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.05);
+            color: var(--light);
+            font-family: 'Ubuntu Mono', monospace;
+            transition: all 0.3s ease;
+        }
+        select:focus, input:focus, button:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
+        }
+        button {
+            cursor: pointer;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            color: white;
+            font-weight: bold;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            border: none;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        }
+        .canvas-container {
+            position: relative;
+            width: 800px;
+            height: 600px;
+            margin: 0 auto;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+        }
+        canvas {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+        .info-panel {
+            margin-top: 2rem;
+            max-width: 800px;
+            padding: 1.5rem;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 16px;
+            line-height: 1.6;
+        }
+        .fractal-info {
+            margin-bottom: 1rem;
+        }
+        .fractal-title {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+            color: var(--primary);
+        }
+        .fractal-description {
+            font-size: 0.95rem;
+            opacity: 0.9;
+        }
+        .loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 10;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        .loading.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            border-top-color: var(--primary);
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        @media (max-width: 900px) {
+            .canvas-container {
+                width: 100%;
+                height: 500px;
+            }
+        }
+        @media (max-width: 600px) {
+            .title {
+                font-size: 2.5rem;
+            }
+            .subtitle {
+                font-size: 1rem;
+            }
+            .canvas-container {
+                height: 400px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1 class="title">Fractal Universe Explorer</h1>
+        <p class="subtitle">Explore the infinite complexity of mathematical fractals. Each fractal is generated in real-time using JavaScript, simulating what you might create with Python.</p>
+    </div>
+    <div class="container">
+        <div class="controls">
+            <div class="control-group">
+                <label for="fractal-type">Fractal Type</label>
+                <select id="fractal-type">
+                    <option value="mandelbrot">Mandelbrot Set</option>
+                    <option value="julia">Julia Set</option>
+                    <option value="burning-ship">Burning Ship</option>
+                    <option value="sierpinski">Sierpinski Triangle</option>
+                    <option value="koch">Koch Snowflake</option>
+                </select>
+            </div>
+            <div class="control-group">
+                <label for="color-scheme">Color Scheme</label>
+                <select id="color-scheme">
+                    <option value="rainbow">Rainbow</option>
+                    <option value="fire">Fire</option>
+                    <option value="ocean">Ocean</option>
+                    <option value="monochrome">Monochrome</option>
+                    <option value="pastel">Pastel</option>
+                </select>
+            </div>
+            <div class="control-group">
+                <label for="iterations">Iterations</label>
+                <input type="range" id="iterations" min="10" max="200" value="100">
+                <span id="iterations-value">100</span>
+            </div>
+            <div class="control-group">
+                <label for="zoom">Zoom Level</label>
+                <input type="range" id="zoom" min="1" max="20" value="1">
+                <span id="zoom-value">1x</span>
+            </div>
+            <button id="generate-btn">Generate Fractal</button>
+        </div>
+        <div class="canvas-container">
+            <canvas id="fractal-canvas"></canvas>
+            <div class="loading" id="loading">
+                <div class="spinner"></div>
+            </div>
+        </div>
+        <div class="info-panel">
+            <div class="fractal-info">
+                <h3 class="fractal-title">Mandelbrot Set</h3>
+                <p class="fractal-description" id="fractal-description">
+                    The Mandelbrot set is the set of complex numbers c for which the function f(z) = z² + c does not diverge when iterated from z = 0.
+                    It's one of the most famous fractals, exhibiting infinite complexity at every scale.
+                </p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM elements
+            const canvas = document.getElementById('fractal-canvas');
+            const ctx = canvas.getContext('2d');
+            const loading = document.getElementById('loading');
+            const generateBtn = document.getElementById('generate-btn');
+            const fractalType = document.getElementById('fractal-type');
+            const colorScheme = document.getElementById('color-scheme');
+            const iterations = document.getElementById('iterations');
+            const iterationsValue = document.getElementById('iterations-value');
+            const zoom = document.getElementById('zoom');
+            const zoomValue = document.getElementById('zoom-value');
+            const fractalDescription = document.getElementById('fractal-description');
+            // Canvas setup
+            function setupCanvas() {
+                const dpr = window.devicePixelRatio || 1;
+                const rect = canvas.getBoundingClientRect();
+                canvas.width = rect.width * dpr;
+                canvas.height = rect.height * dpr;
+                ctx.scale(dpr, dpr);
+            }
+            setupCanvas();
+            window.addEventListener('resize', setupCanvas);
+            // Update displayed values
+            iterations.addEventListener('input', function() {
+                iterationsValue.textContent = this.value;
+            });
+            zoom.addEventListener('input', function() {
+                zoomValue.textContent = `${this.value}x`;
+            });
+            // Fractal descriptions
+            const fractalDescriptions = {
+                'mandelbrot': 'The Mandelbrot set is the set of complex numbers c for which the function f(z) = z² + c does not diverge when iterated from z = 0. It\'s one of the most famous fractals, exhibiting infinite complexity at every scale.',
+                'julia': 'Julia sets are mathematically defined shapes that are closely related to the Mandelbrot set. Each Julia set corresponds to a different complex number c, determining the shape and complexity of the fractal pattern.',
+                'burning-ship': 'The Burning Ship fractal is a variation of the Mandelbrot set that uses a slightly different iteration formula. It reveals ship-like structures that appear to be burning, hence the name.',
+                'sierpinski': 'The Sierpinski triangle is a fractal that can be created by recursively subdividing an equilateral triangle into smaller equilateral triangles. It demonstrates perfect self-similarity at all scales.',
+                'koch': 'The Koch snowflake is a fractal constructed by starting with an equilateral triangle, then recursively altering each line segment to add a triangular bump. It has an infinite perimeter but finite area.'
+            };
+            // Color palettes
+            const palettes = {
+                'rainbow': (t) => {
+                    const r = Math.floor((1 - t) * 255);
+                    const g = Math.floor((Math.sin(t * Math.PI * 2) * 0.5 + 0.5) * 255);
+                    const b = Math.floor(t * 255);
+                    return `rgb(${r}, ${g}, ${b})`;
+                },
+                'fire': (t) => {
+                    const r = 255;
+                    const g = Math.floor(t * 128 + 127);
+                    const b = Math.floor(t * 50);
+                    return `rgb(${r}, ${g}, ${b})`;
+                },
+                'ocean': (t) => {
+                    const r = 0;
+                    const g = Math.floor(t * 100 + 50);
+                    const b = Math.floor(t * 200 + 55);
+                    return `rgb(${r}, ${g}, ${b})`;
+                },
+                'monochrome': (t) => {
+                    const c = Math.floor(t * 255);
+                    return `rgb(${c}, ${c}, ${c})`;
+                },
+                'pastel': (t) => {
+                    const r = Math.floor((1 - t) * 200);
+                    const g = Math.floor((t * 0.5 + 0.5) * 200);
+                    const b = Math.floor((Math.sin(t * Math.PI) + 1) * 100);
+                    return `rgb(${r}, ${g}, ${b})`;
+                }
+            };
+            // Generate fractal
+            function generateFractal() {
+                loading.classList.add('active');
+                // Get selected values
+                const type = fractalType.value;
+                const palette = palettes[colorScheme.value];
+                const maxIter = parseInt(iterations.value);
+                const zoomLevel = parseInt(zoom.value);
+                // Update description
+                document.querySelector('.fractal-title').textContent =
+                    fractalType.options[fractalType.selectedIndex].text;
+                fractalDescription.textContent = fractalDescriptions[type];
+                // Clear and prepare canvas
+                const width = canvas.width;
+                const height = canvas.height;
+                // Use setTimeout to prevent UI freeze during heavy computation
+                setTimeout(() => {
+                    // Draw selected fractal
+                    switch(type) {
+                        case 'mandelbrot':
+                            drawMandelbrot(width, height, palette, maxIter, zoomLevel);
+                            break;
+                        case 'julia':
+                            drawJulia(width, height, palette, maxIter, zoomLevel);
+                            break;
+                        case 'burning-ship':
+                            drawBurningShip(width, height, palette, maxIter, zoomLevel);
+                            break;
+                        case 'sierpinski':
+                            drawSierpinski(width, height, palette, maxIter);
+                            break;
+                        case 'koch':
+                            drawKochSnowflake(width, height, palette, Math.floor(maxIter/15));
+                            break;
+                    }
+                    loading.classList.remove('active');
+                }, 100);
+            }
+            // Mandelbrot set
+            function drawMandelbrot(width, height, palette, maxIter, zoomLevel) {
+                const zoomFactor = Math.pow(2, zoomLevel);
+                const centerX = -0.5;
+                const centerY = 0;
+                const scale = 2 / (Math.min(width, height) / 2) / zoomFactor;
+                const imageData = ctx.createImageData(width, height);
+                const data = imageData.data;
+                for (let px = 0; px < width; px++) {
+                    for (let py = 0; py < height; py++) {
+                        // Convert pixel coordinates to complex plane
+                        const x0 = (px - width/2) * scale + centerX;
+                        const y0 = (py - height/2) * scale + centerY;
+                        let x = 0;
+                        let y = 0;
+                        let iter = 0;
+                        // Iterate until escape or max iterations
+                        while (x*x + y*y <= 4 && iter < maxIter) {
+                            const x_new = x*x - y*y + x0;
+                            y = 2*x*y + y0;
+                            x = x_new;
+                            iter++;
+                        }
+                        // Color based on iterations
+                        const color = palette(iter/maxIter);
+                        const [r, g, b] = color.match(/\d+/g);
+                        const idx = (px + py * width) * 4;
+                        // Set pixel color
+                        if (iter === maxIter) {
+                            // Inside the set (black)
+                            data[idx] = 0;
+                            data[idx+1] = 0;
+                            data[idx+2] = 0;
+                        } else {
+                            // Outside (colored by iterations)
+                            data[idx] = r;
+                            data[idx+1] = g;
+                            data[idx+2] = b;
+                        }
+                        data[idx+3] = 255; // Alpha
+                    }
+                }
+                ctx.putImageData(imageData, 0, 0);
+            }
+            // Julia set (similar to Mandelbrot but with fixed c)
+            function drawJulia(width, height, palette, maxIter, zoomLevel) {
+                const zoomFactor = Math.pow(2, zoomLevel);
+                const centerX = 0;
+                const centerY = 0;
+                const scale = 2.5 / (Math.min(width, height) / 2) / zoomFactor;
+                // Julia parameters (can be randomized)
+                const cRe = -0.7;
+                const cIm = 0.27;
+                const imageData = ctx.createImageData(width, height);
+                const data = imageData.data;
+                for (let px = 0; px < width; px++) {
+                    for (let py = 0; py < height; py++) {
+                        const zx = (px - width/2) * scale + centerX;
+                        const zy = (py - height/2) * scale + centerY;
+                        let x = zx;
+                        let y = zy;
+                        let iter = 0;
+                        while (x*x + y*y <= 4 && iter < maxIter) {
+                            const x_new = x*x - y*y + cRe;
+                            y = 2*x*y + cIm;
+                            x = x_new;
+                            iter++;
+                        }
+                        const color = palette(iter/maxIter);
+                        const [r, g, b] = color.match(/\d+/g);
+                        const idx = (px + py * width) * 4;
+                        data[idx] = (iter === maxIter) ? 0 : r;
+                        data[idx+1] = (iter === maxIter) ? 0 : g;
+                        data[idx+2] = (iter === maxIter) ? 0 : b;
+                        data[idx+3] = 255;
+                    }
+                }
+                ctx.putImageData(imageData, 0, 0);
+            }
+            // Burning Ship fractal
+            function drawBurningShip(width, height, palette, maxIter, zoomLevel) {
+                const zoomFactor = Math.pow(2, zoomLevel);
+                const centerX = -0.5;
+                const centerY = -0.5;
+                const scale = 2.8 / (Math.min(width, height) / 2) / zoomFactor;
+                const imageData = ctx.createImageData(width, height);
+                const data = imageData.data;
+                for (let px = 0; px < width; px++) {
+                    for (let py = 0; py < height; py++) {
+                        const x0 = (px - width/2) * scale + centerX;
+                        const y0 = (py - height/2) * scale + centerY;
+                        let x = 0;
+                        let y = 0;
+                        let iter = 0;
+                        while (x*x + y*y <= 4 && iter < maxIter) {
+                            const x_new = x*x - y*y + x0;
+                            y = Math.abs(2*x*y) + y0;
+                            x = Math.abs(x_new);
+                            iter++;
+                        }
+                        const color = palette(iter/maxIter);
+                        const [r, g, b] = color.match(/\d+/g);
+                        const idx = (px + py * width) * 4;
+                        data[idx] = (iter === maxIter) ? 0 : r;
+                        data[idx+1] = (iter === maxIter) ? 0 : g;
+                        data[idx+2] = (iter === maxIter) ? 0 : b;
+                        data[idx+3] = 255;
+                    }
+                }
+                ctx.putImageData(imageData, 0, 0);
+            }
+            // Sierpinski Triangle (geometric fractal)
+            function drawSierpinski(width, height, palette, maxIter) {
+                ctx.fillStyle = 'black';
+                ctx.fillRect(0, 0, width, height);
+                const size = Math.min(width, height) * 0.9;
+                const marginX = (width - size) / 2;
+                const marginY = (height - size) / 2;
+                // Starting points (triangle)
+                let points = [
+                    {x: marginX + size/2, y: marginY},
+                    {x: marginX, y: marginY + size},
+                    {x: marginX + size, y: marginY + size}
+                ];
+                // Random starting point
+                let px = Math.random() * width;
+                let py = Math.random() * height;
+                // Draw many iterations
+                for (let i = 0; i < maxIter * 300; i++) {
+                    // Choose a random corner
+                    const corner = Math.floor(Math.random() * 3);
+                    // Move halfway toward that corner
+                    px = (px + points[corner].x) / 2;
+                    py = (py + points[corner].y) / 2;
+                    // Draw point
+                    ctx.fillStyle = palette(i/(maxIter*300));
+                    ctx.fillRect(px, py, 1, 1);
+                }
+            }
+            // Koch Snowflake (recursive fractal)
+            function drawKochSnowflake(width, height, palette, depth) {
+                ctx.fillStyle = 'black';
+                ctx.fillRect(0, 0, width, height);
+                const size = Math.min(width, height) * 0.7;
+                const centerX = width / 2;
+                const centerY = height / 2;
+                // Starting equilateral triangle
+                let points = [
+                    {x: centerX, y: centerY - size/2},
+                    {x: centerX - size/2, y: centerY + size/2},
+                    {x: centerX + size/2, y: centerY + size/2}
+                ];
+                // Draw the snowflake
+                ctx.strokeStyle = palette(1.0);
+                ctx.lineWidth = 1;
+                function koch(p1, p2, level) {
+                    if (level === 0) {
+                        ctx.beginPath();
+                        ctx.moveTo(p1.x, p1.y);
+                        ctx.lineTo(p2.x, p2.y);
+                        ctx.strokeStyle = palette(1 - level/depth);
+                        ctx.stroke();
+                    } else {
+                        const dx = p2.x - p1.x;
+                        const dy = p2.y - p1.y;
+                        // Calculate intermediate points
+                        const a = {
+                            x: p1.x + dx / 3,
+                            y: p1.y + dy / 3
+                        };
+                        const b = {
+                            x: p1.x + dx / 2 - dy * Math.sqrt(3)/6,
+                            y: p1.y + dy / 2 + dx * Math.sqrt(3)/6
+                        };
+                        const c = {
+                            x: p1.x + 2*dx/3,
+                            y: p1.y + 2*dy/3
+                        };
+                        // Recursively draw the 4 segments
+                        koch(p1, a, level - 1);
+                        koch(a, b, level - 1);
+                        koch(b, c, level - 1);
+                        koch(c, p2, level - 1);
+                    }
+                }
+                // Draw the three initial sides
+                koch(points[0], points[1], depth);
+                koch(points[1], points[2], depth);
+                koch(points[2], points[0], depth);
+            }
+            // Events
+            generateBtn.addEventListener('click', generateFractal);
+            fractalType.addEventListener('change', function() {
+                document.querySelector('.fractal-title').textContent =
+                    this.options[this.selectedIndex].text;
+                fractalDescription.textContent = fractalDescriptions[this.value];
+            });
+            // Generate initial fractal
+            generateFractal();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>