Animated Fractal with Three.js | MicroEval | Artificial Analysis

Animated Fractal with Three.js

This microeval asks the LLM to produce a single HTML code block with optional CSS JavaScript and GLSL that renders a full screen Julia set shader animation with smooth color transitions from golden yellow through orange magenta purple to deep indigo, continuously morphs via a rotating complex constant, supports click and drag panning mouse wheel or pinch zoom and a space bar toggle for play and pause, and relies solely on Three.js loaded from a CDN.

Prompt

Create a Three.js animation that renders a morphing Julia-set fractal shader on full-screen. Compute many iterations in the fragment shader and apply smooth colors that transition from golden yellow through orange, magenta, and purple to deep indigo. Rotate the complex constant at a steady, moderate pace. Provide built-in click-and-drag panning and mouse-wheel (or pinch) zooming, and bind the space bar to toggle play and pause. Build it exclusively with Three.js—no other libraries or assets.

A system prompt was added to support web rendering

Google

Gemini 2.5 Pro

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Morphing Julia Set</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
        .info {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            color: #fff;
            font-family: monospace;
            z-index: 100;
            pointer-events: none; /* Let clicks/drags pass through */
        }
    </style>
</head>
<body>
    <div id="info" class="info">
        [ Drag to Pan ] &nbsp;&nbsp; [ Scroll to Zoom ] &nbsp;&nbsp; [ Space to Pause/Play ]
    </div>
    
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
        }
    }
    </script>
    
    <script type="module">
        import * as THREE from 'three';

        // --- GLOBAL VARIABLES ---
        let scene, camera, renderer, mesh;
        let uniforms;
        let isPlaying = true;
        let isDragging = false;
        let previousMousePosition = { x: 0, y: 0 };
        const clock = new THREE.Clock();

        // --- SHADERS ---

        const vertexShader = `
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `;

        const fragmentShader = `
            // Varyings passed from the vertex shader
            varying vec2 vUv;
            
            // Uniforms passed from JavaScript
            uniform vec2 u_resolution;
            uniform float u_time;
            uniform float u_zoom;
            uniform vec2 u_pan;
            uniform vec2 u_c; // The complex constant for the Julia set

            // --- CONSTANTS ---
            const int MAX_ITER = 256;

            // --- COLOR PALETTE DEFINITIONS ---
            // Golden Yellow -> Orange -> Magenta -> Purple -> Deep Indigo
            vec3 color1 = vec3(1.0, 0.843, 0.0);    // Golden Yellow
            vec3 color2 = vec3(1.0, 0.5, 0.0);      // Orange
            vec3 color3 = vec3(1.0, 0.0, 1.0);      // Magenta
            vec3 color4 = vec3(0.53, 0.0, 0.93);    // Purple
            vec3 color5 = vec3(0.29, 0.0, 0.51);    // Deep Indigo
            vec3 color_inside = vec3(0.0, 0.0, 0.05); // Color for points inside the set

            // Function to multiply two complex numbers (represented as vec2)
            vec2 complex_mult(vec2 a, vec2 b) {
                return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
            }

            void main() {
                // Map screen coordinates (0-1) to complex plane coordinates
                // Adjust for aspect ratio, zoom, and pan
                vec2 aspect_ratio = vec2(u_resolution.x / u_resolution.y, 1.0);
                vec2 z = (vUv * 2.0 - 1.0) * aspect_ratio / u_zoom + u_pan;
                
                vec2 c = u_c; // Use the animated constant from JS
                
                int i;
                for (i = 0; i < MAX_ITER; i++) {
                    z = complex_mult(z, z) + c;
                    
                    // Bailout condition
                    if (dot(z, z) > 16.0) {
                        break;
                    }
                }
                
                // Color calculation
                vec3 color;
                if (i == MAX_ITER) {
                    // This point is inside the set
                    color = color_inside;
                } else {
                    // This point is outside the set. Use a smooth coloring algorithm.
                    // This uses the final magnitude of z to create a fractional iteration count.
                    float smooth_i = float(i) - log2(log2(dot(z,z))) + 4.0;
                    
                    // Normalize the smooth iteration count to create a repeating gradient
                    float t = smooth_i / (float(MAX_ITER)*0.2);
                    t = fract(t); // Use the fractional part for seamless looping

                    // Create the multi-stop gradient using mix and smoothstep
                    vec3 col = mix(color1, color2, smoothstep(0.0, 0.25, t));
                    col = mix(col, color3, smoothstep(0.25, 0.5, t));
                    col = mix(col, color4, smoothstep(0.5, 0.75, t));
                    col = mix(col, color5, smoothstep(0.75, 1.0, t));
                    
                    color = col;
                }
                
                gl_FragColor = vec4(color, 1.0);
            }
        `;


        // --- INITIALIZATION ---
        function init() {
            // Scene
            scene = new THREE.Scene();

            // Camera
            // An orthographic camera is best for 2D shaders
            camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
            camera.position.z = 1;

            // Renderer
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            document.body.appendChild(renderer.domElement);

            // Shader Uniforms
            uniforms = {
                u_time: { value: 0.0 },
                u_resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
                u_c: { value: new THREE.Vector2(-0.8, 0.156) },
                u_zoom: { value: 1.0 },
                u_pan: { value: new THREE.Vector2(0.0, 0.0) }
            };

            // Geometry and Material
            const geometry = new THREE.PlaneGeometry(2, 2);
            const material = new THREE.ShaderMaterial({
                uniforms: uniforms,
                vertexShader: vertexShader,
                fragmentShader: fragmentShader
            });

            // Mesh
            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            // Event Listeners
            window.addEventListener('resize', onWindowResize, false);
            window.addEventListener('keydown', onKeyDown, false);
            renderer.domElement.addEventListener('mousedown', onMouseDown, false);
            renderer.domElement.addEventListener('mouseup', onMouseUp, false);
            renderer.domElement.addEventListener('mousemove', onMouseMove, false);
            renderer.domElement.addEventListener('wheel', onMouseWheel, false);
        }

        // --- EVENT HANDLERS ---
        function onWindowResize() {
            renderer.setSize(window.innerWidth, window.innerHeight);
            uniforms.u_resolution.value.x = window.innerWidth;
            uniforms.u_resolution.value.y = window.innerHeight;
        }

        function onKeyDown(event) {
            if (event.code === 'Space') {
                isPlaying = !isPlaying;
                document.getElementById('info').style.display = isPlaying ? 'block' : 'none';
            }
        }
        
        function onMouseDown(event) {
            isDragging = true;
            previousMousePosition.x = event.clientX;
            previousMousePosition.y = event.clientY;
        }

        function onMouseUp() {
            isDragging = false;
        }

        function onMouseMove(event) {
            if (!isDragging) return;
            
            const deltaX = event.clientX - previousMousePosition.x;
            const deltaY = event.clientY - previousMousePosition.y;

            // Pan sensitivity decreases as we zoom in
            const panSpeed = 2.0 / uniforms.u_zoom.value;

            uniforms.u_pan.value.x -= deltaX * (panSpeed / window.innerWidth);
            uniforms.u_pan.value.y += deltaY * (panSpeed / window.innerHeight);

            previousMousePosition.x = event.clientX;
            previousMousePosition.y = event.clientY;
        }
        
        function onMouseWheel(event) {
            // Prevent page scrolling
            event.preventDefault();

            const zoomFactor = 0.95;
            const oldZoom = uniforms.u_zoom.value;
            let newZoom;

            if (event.deltaY < 0) { // Zoom in
                newZoom = oldZoom / zoomFactor;
            } else { // Zoom out
                newZoom = oldZoom * zoomFactor;
            }

            // Implement zoom-to-cursor
            const mouseCoord = new THREE.Vector2(
                (event.clientX / window.innerWidth) * 2 - 1,
                -(event.clientY / window.innerHeight) * 2 + 1
            );

            const aspectRatio = window.innerWidth / window.innerHeight;

            const coordBeforeZoom = new THREE.Vector2(
                mouseCoord.x * aspectRatio / oldZoom + uniforms.u_pan.value.x,
                mouseCoord.y / oldZoom + uniforms.u_pan.value.y
            );

            const coordAfterZoom = new THREE.Vector2(
                mouseCoord.x * aspectRatio / newZoom + uniforms.u_pan.value.x,
                mouseCoord.y / newZoom + uniforms.u_pan.value.y
            );
            
            // Adjust pan to keep the point under the cursor stationary
            uniforms.u_pan.value.x += coordBeforeZoom.x - coordAfterZoom.x;
            uniforms.u_pan.value.y += coordBeforeZoom.y - coordAfterZoom.y;
            
            uniforms.u_zoom.value = newZoom;
        }

        // --- ANIMATION LOOP ---
        function animate() {
            requestAnimationFrame(animate);

            if (isPlaying) {
                // Update time uniform
                const elapsedTime = clock.getElapsedTime();
                uniforms.u_time.value = elapsedTime;

                // Rotate the complex constant 'c' in a circle for the morphing effect
                const radius = 0.7885;
                const speed = 0.15; // Moderate pace
                uniforms.u_c.value.x = radius * Math.cos(speed * elapsedTime);
                uniforms.u_c.value.y = radius * Math.sin(speed * elapsedTime);
            }

            renderer.render(scene, camera);
        }

        // --- START ---
        init();
        animate();

    </script>
</body>
</html>
```

Drag to resize

xAI

Grok 4

```html
<!DOCTYPE html>
<html>
<head>
    <title>Julia Set Fractal</title>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

        const renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const uniforms = {
            resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
            center: { value: new THREE.Vector2(0, 0) },
            halfExtent: { value: 1.5 },
            time: { value: 0 }
        };

        const vs = `
            void main() {
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `;

        const fs = `
            uniform vec2 resolution;
            uniform vec2 center;
            uniform float halfExtent;
            uniform float time;

            void main() {
                vec2 p = 2.0 * (gl_FragCoord.xy / resolution.xy) - 1.0;
                p.x *= resolution.x / resolution.y;
                vec2 z = center + p * halfExtent;

                float r = 0.7885;
                vec2 c = r * vec2(cos(time), sin(time));

                const int maxIter = 1024;
                vec2 zn = z;
                int iter = 0;
                float bailout2 = 4.0;

                for (int i = 0; i < maxIter; i++) {
                    if (dot(zn, zn) > bailout2) break;
                    float xnew = zn.x * zn.x - zn.y * zn.y + c.x;
                    float ynew = 2.0 * zn.x * zn.y + c.y;
                    zn = vec2(xnew, ynew);
                    iter = i;
                }

                vec3 col;
                vec3 indigo = vec3(0.294, 0.0, 0.51);

                if (iter == maxIter) {
                    col = indigo;
                } else {
                    float norm = dot(zn, zn);
                    float mu = float(iter) + 1.0 - log(log(sqrt(norm))) / log(2.0);

                    float t = mu / 100.0;
                    if (t > 1.0) t = 1.0;

                    vec3 colors[5];
                    colors[0] = vec3(1.0, 0.843, 0.0);
                    colors[1] = vec3(1.0, 0.5, 0.0);
                    colors[2] = vec3(1.0, 0.0, 1.0);
                    colors[3] = vec3(0.5, 0.0, 1.0);
                    colors[4] = indigo;

                    float seg = t * 4.0;
                    int i = int(floor(seg));
                    float f = fract(seg);
                    if (i >= 4) col = colors[4];
                    else col = mix(colors[i], colors[i + 1], f);
                }

                gl_FragColor = vec4(col, 1.0);
            }
        `;

        const material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: vs,
            fragmentShader: fs
        });

        const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
        scene.add(mesh);

        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            uniforms.resolution.value.set(window.innerWidth, window.innerHeight);
        });

        let isPlaying = true;
        let elapsed = 0;
        let last = performance.now();
        const speed = 0.5;

        function animate(now) {
            requestAnimationFrame(animate);
            const delta = (now - last) / 1000;
            last = now;
            if (isPlaying) elapsed += delta;
            uniforms.time.value = elapsed * speed;
            renderer.render(scene, camera);
        }
        animate(performance.now());

        window.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                isPlaying = !isPlaying;
                e.preventDefault();
            }
        });

        let isDragging = false;
        let startX, startY;
        let startCenter = new THREE.Vector2();

        window.addEventListener('mousedown', (e) => {
            isDragging = true;
            startX = e.clientX;
            startY = e.clientY;
            startCenter.copy(uniforms.center.value);
        });

        window.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            const width = renderer.domElement.clientWidth;
            const height = renderer.domElement.clientHeight;
            const fullWidth = 2 * (width / height) * uniforms.halfExtent.value;
            const fullHeight = 2 * uniforms.halfExtent.value;
            const newCenterX = startCenter.x - (dx / width) * fullWidth;
            const newCenterY = startCenter.y + (dy / height) * fullHeight;
            uniforms.center.value.set(newCenterX, newCenterY);
        });

        window.addEventListener('mouseup', () => isDragging = false);
        window.addEventListener('mouseleave', () => isDragging = false);

        window.addEventListener('wheel', (e) => {
            e.preventDefault();
            const width = renderer.domElement.clientWidth;
            const height = renderer.domElement.clientHeight;
            const mx = (e.clientX / width) * 2 - 1;
            const my = 1 - 2 * (e.clientY / height);
            const aspect = width / height;
            const px = mx * aspect;
            const py = my;
            const pointX = uniforms.center.value.x + px * uniforms.halfExtent.value;
            const pointY = uniforms.center.value.y + py * uniforms.halfExtent.value;
            const factor = Math.exp(-e.deltaY * 0.001);
            const oldHalf = uniforms.halfExtent.value;
            const newHalf = oldHalf / factor;
            const ratio = newHalf / oldHalf;
            const newCenterX = uniforms.center.value.x * ratio + pointX * (1 - ratio);
            const newCenterY = uniforms.center.value.y * ratio + pointY * (1 - ratio);
            uniforms.center.value.set(newCenterX, newCenterY);
            uniforms.halfExtent.value = newHalf;
        }, { passive: false });

        let touchStartDist = 0;
        let touchStartMid = new THREE.Vector2();
        let touchStartCenter = new THREE.Vector2();
        let touchStartHalf = 0;
        let isPinching = false;

        window.addEventListener('touchstart', (e) => {
            e.preventDefault();
            if (e.touches.length === 1) {
                isDragging = true;
                startX = e.touches[0].clientX;
                startY = e.touches[0].clientY;
                startCenter.copy(uniforms.center.value);
            } else if (e.touches.length === 2) {
                isPinching = true;
                const tx1 = e.touches[0].clientX;
                const ty1 = e.touches[0].clientY;
                const tx2 = e.touches[1].clientX;
                const ty2 = e.touches[1].clientY;
                touchStartDist = Math.hypot(tx1 - tx2, ty1 - ty2);
                touchStartMid.set((tx1 + tx2) / 2, (ty1 + ty2) / 2);
                touchStartCenter.copy(uniforms.center.value);
                touchStartHalf = uniforms.halfExtent.value;
            }
        }, { passive: false });

        window.addEventListener('touchmove', (e) => {
            e.preventDefault();
            if (e.touches.length === 1 && isDragging) {
                const dx = e.touches[0].clientX - startX;
                const dy = e.touches[0].clientY - startY;
                const width = renderer.domElement.clientWidth;
                const height = renderer.domElement.clientHeight;
                const fullWidth = 2 * (width / height) * uniforms.halfExtent.value;
                const fullHeight = 2 * uniforms.halfExtent.value;
                const newCenterX = startCenter.x - (dx / width) * fullWidth;
                const newCenterY = startCenter.y + (dy / height) * fullHeight;
                uniforms.center.value.set(newCenterX, newCenterY);
            } else if (e.touches.length === 2 && isPinching) {
                const tx1 = e.touches[0].clientX;
                const ty1 = e.touches[0].clientY;
                const tx2 = e.touches[1].clientX;
                const ty2 = e.touches[1].clientY;
                const currentDist = Math.hypot(tx1 - tx2, ty1 - ty2);
                const currentMidX = (tx1 + tx2) / 2;
                const currentMidY = (ty1 + ty2) / 2;
                const factor = currentDist / touchStartDist;
                const newHalf = touchStartHalf / factor;
                const width = renderer.domElement.clientWidth;
                const height = renderer.domElement.clientHeight;
                const mx = (currentMidX / width) * 2 - 1;
                const my = 1 - 2 * (currentMidY / height);
                const aspect = width / height;
                const px = mx * aspect;
                const py = my;
                const pointX = touchStartCenter.x + px * touchStartHalf;
                const pointY = touchStartCenter.y + py * touchStartHalf;
                const ratio = newHalf / touchStartHalf;
                const newCenterX = touchStartCenter.x * ratio + pointX * (1 - ratio);
                const newCenterY = touchStartCenter.y * ratio + pointY * (1 - ratio);
                uniforms.center.value.set(newCenterX, newCenterY);
                uniforms.halfExtent.value = newHalf;
            }
        }, { passive: false });

        window.addEventListener('touchend', () => {
            isDragging = false;
            isPinching = false;
        });
    </script>
</body>
</html>
```

Drag to resize

OpenAI

GPT-4.1

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three.js Morphing Julia Set Shader</title>
  <style>
    html, body {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background: #000;
    }
    body { touch-action: none; }
    canvas { display: block; width: 100vw; height: 100vh; }
  </style>
</head>
<body>
<script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = vec4( position, 1.0 );
}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
precision highp float;
varying vec2 vUv;

uniform float u_time;
uniform vec2 u_pan;
uniform float u_zoom;
uniform vec2 u_resolution;
uniform bool u_paused;

// Color palette by smoothstep blending between As: gold, orange, magenta, purple, indigo
vec3 palette(float t) {
    // Four points: gold, orange, magenta, indigo
    vec3 c1 = vec3(1.0, 0.85, 0.07);   // Golden Yellow
    vec3 c2 = vec3(1.0, 0.35, 0.0);    // Orange
    vec3 c3 = vec3(0.95, 0.0, 0.75);   // Magenta
    vec3 c4 = vec3(0.47, 0.0, 0.78);   // Purple
    vec3 c5 = vec3(0.09, 0.07, 0.31);  // Deep Indigo

    float s = clamp(t, 0.0, 1.0);
    if (s < 0.25) {
        float l = smoothstep(0.0, 0.25, s);
        return mix(c1, c2, l);
    } else if (s < 0.5) {
        float l = smoothstep(0.25, 0.5, s);
        return mix(c2, c3, l);
    } else if (s < 0.75) {
        float l = smoothstep(0.5, 0.75, s);
        return mix(c3, c4, l);
    } else {
        float l = smoothstep(0.75, 1.0, s);
        return mix(c4, c5, l);
    }
}

// Return smooth "escape" for color mapping
float julia(vec2 z, vec2 c, int maxIt, out float smoothIter) {
    float i = 0.0;
    for (int n = 0; n < 256; n++) {
        if (n >= maxIt) break;
        z = vec2(z.x*z.x - z.y*z.y, 2.0*z.x*z.y) + c;
        if (dot(z, z) > 16.0) {
            i = float(n);
            break;
        }
    }
    // To avoid flat contours, estimate fractional iteration ("smooth" coloring)
    if (i < float(maxIt)) {
        float zn = log(dot(z,z)) / 2.0;
        float nu = log(zn / log(2.0)) / log(2.0);
        smoothIter = i + 1.0 - nu;
    } else {
        smoothIter = float(maxIt);
    }
    return i;
}

void main() {
    // Normalized screen coordinates centered at (0,0), screen fit
    vec2 uv = vUv;
    float aspect = u_resolution.x / u_resolution.y;
    vec2 p = (uv - 0.5) * vec2(aspect,1.0);

    // Pan/zoom
    p = (p + u_pan) / u_zoom;

    // Animate c: moderate, steady pace rotating
    float anim_time = u_paused ? 0.0 : u_time;
    float theta = anim_time * 0.25;
    // Keep c on a ring in (-1,1)x(-1,1)
    float r = mix(0.6, 0.85, 0.5+0.5*sin(0.7*anim_time));
    vec2 c = r * vec2(cos(theta), sin(theta));

    // Compute Julia set escape
    float smoothIter;
    int maxIter = 180;
    julia(p, c, maxIter, smoothIter);

    // Map to [0,1] for coloring
    float normed = smoothIter / float(maxIter);
    normed = pow(normed, 0.75); // Enhance gradients

    // Color gradient
    vec3 color = palette(normed);

    // Enhance inner fractal detail
    float edge = smoothstep(0.98, 1.0, normed);
    color = mix(color, vec3(0.03,0.03,0.1), edge);

    gl_FragColor = vec4(color, 1.0);
}
</script>

<script>
let renderer, scene, camera, mesh, uniforms;
let width = window.innerWidth, height = window.innerHeight;
let dragging = false, last = {x:0, y:0}, pan = {x: 0, y: 0};
let zoom = 1.0;
let needsResize = false;
let paused = false;
let time = 0, lastTime = performance.now();

function init() {
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(width, height, false);
    renderer.setPixelRatio(window.devicePixelRatio || 1);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();
    camera = new THREE.OrthographicCamera(-1,1,1,-1,0,1);

    uniforms = {
        u_time:       { value: 0.0 },
        u_pan:        { value: new THREE.Vector2(0,0)},
        u_zoom:       { value: zoom },
        u_resolution: { value: new THREE.Vector2(width,height) },
        u_paused:     { value: paused }
    };

    let mat = new THREE.ShaderMaterial({
        vertexShader: document.getElementById("vertexShader").textContent,
        fragmentShader: document.getElementById("fragmentShader").textContent,
        uniforms: uniforms
    });
    let geo = new THREE.PlaneGeometry(2,2);
    mesh = new THREE.Mesh(geo, mat);
    scene.add(mesh);

    window.addEventListener('resize', onResize);

    // Mouse controls
    renderer.domElement.addEventListener('mousedown', onDown);
    renderer.domElement.addEventListener('mousemove', onMove);
    renderer.domElement.addEventListener('mouseup', onUp);
    renderer.domElement.addEventListener('mouseleave', onUp);

    // Touch controls
    renderer.domElement.addEventListener('touchstart', onTouchStart, {passive:false});
    renderer.domElement.addEventListener('touchmove', onTouchMove, {passive:false});
    renderer.domElement.addEventListener('touchend', onTouchEnd, {passive:false});

    // Zoom
    renderer.domElement.addEventListener('wheel', function(e) {
        e.preventDefault();
        let delta = e.deltaY<0 ? 1.09 : (1/1.09);
        let mx = (e.offsetX / width) * 2 -1;
        let my = (e.offsetY / height) * 2 -1;
        mx *= width/height;
        let cursor_world = {
          x: (mx + pan.x) / zoom,
          y: (my + pan.y) / zoom
        };
        zoom *= delta;
        // Keep cursor focused
        pan.x = cursor_world.x*zoom - mx;
        pan.y = cursor_world.y*zoom - my;
        uniforms.u_zoom.value = zoom;
        uniforms.u_pan.value.set(pan.x, pan.y);
    }, {passive: false});

    // Keyboard
    window.addEventListener('keydown', function(e){
        if (e.code === "Space") {
            paused = !paused;
            uniforms.u_paused.value = paused;
        }
    });
}

function getPanSpeed() {
    // Speed sensitive to zoom for intuitive drag
    return 2.5 / zoom;
}

function onDown(e) {
    dragging = true;
    last.x = e.clientX;
    last.y = e.clientY;
}
function onMove(e) {
    if (!dragging) return;
    let dx = (e.clientX - last.x) / height * getPanSpeed();
    let dy = (e.clientY - last.y) / height * getPanSpeed();
    last.x = e.clientX;
    last.y = e.clientY;
    pan.x += dx;
    pan.y -= dy;
    uniforms.u_pan.value.set(pan.x, pan.y);
}
function onUp(e) {
    dragging = false;
}

// Touch support: pan and pinch-zoom
let isTouching = false, lastTouchDist = 0, lastTouchMid = null;
function getTouchPos(touch) {
    let rect = renderer.domElement.getBoundingClientRect();
    let x = (touch.clientX - rect.left) / rect.width * width;
    let y = (touch.clientY - rect.top) / rect.height * height;
    return {x, y};
}
function distance(a, b) {
    let dx = a.x-b.x, dy = a.y-b.y;
    return Math.sqrt(dx*dx + dy*dy);
}
function midpoint(a, b) {
    return { x: (a.x+b.x)/2, y: (a.y+b.y)/2 };
}
function onTouchStart(e) {
    if (e.touches.length === 1) {
        isTouching = true;
        let t = getTouchPos(e.touches[0]);
        last.x = t.x;
        last.y = t.y;
    } else if (e.touches.length === 2) {
        isTouching = true;
        let t1 = getTouchPos(e.touches[0]);
        let t2 = getTouchPos(e.touches[1]);
        lastTouchDist = distance(t1, t2);
        lastTouchMid = midpoint(t1, t2);
    }
    e.preventDefault();
}
function onTouchMove(e) {
    if (isTouching) {
        if (e.touches.length === 1) {
            let t = getTouchPos(e.touches[0]);
            let dx = (t.x - last.x) / height * getPanSpeed();
            let dy = (t.y - last.y) / height * getPanSpeed();
            last.x = t.x;
            last.y = t.y;
            pan.x += dx;
            pan.y -= dy;
            uniforms.u_pan.value.set(pan.x, pan.y);
        } else if (e.touches.length === 2) {
            let t1 = getTouchPos(e.touches[0]);
            let t2 = getTouchPos(e.touches[1]);
            let mid = midpoint(t1, t2);
            let d = distance(t1, t2);
            if (lastTouchDist > 0.0) {
                let delta = d / lastTouchDist;
                let mx = (mid.x / width) * 2 - 1;
                let my = (mid.y / height) * 2 - 1;
                mx *= width/height;
                let cursor_world = {
                  x: (mx + pan.x) / zoom,
                  y: (my + pan.y) / zoom
                };
                zoom *= delta;
                // Keep pinch center in place
                pan.x = cursor_world.x*zoom - mx;
                pan.y = cursor_world.y*zoom - my;
                uniforms.u_zoom.value = zoom;
                uniforms.u_pan.value.set(pan.x, pan.y);
            }
            lastTouchDist = d;
            lastTouchMid = mid;
        }
    }
    e.preventDefault();
}
function onTouchEnd(e) {
    isTouching = false;
    lastTouchDist = 0;
}

function onResize() {
    needsResize = true;
}
function doResize() {
    width = window.innerWidth;
    height = window.innerHeight;
    renderer.setSize(width, height, false);
    uniforms.u_resolution.value.set(width, height);
}

function animate() {
    requestAnimationFrame(animate);
    if (needsResize) {
        needsResize = false;
        doResize();
    }

    let now = performance.now();
    let dt = Math.min(0.05, (now - lastTime) * 0.001); // Clamp step
    lastTime = now;
    if (!paused) time += dt;

    uniforms.u_time.value = time;
    renderer.render(scene, camera);
}

init();
animate();
</script>
</body>
</html>
```

Drag to resize

OpenAI

o4-mini (high)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fullscreen Morphing Julia Set</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
  <script>
    // Scene, camera, renderer
    const scene = new THREE.Scene();
    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    document.body.appendChild(renderer.domElement);

    // Uniforms
    const uniforms = {
      time: { value: 0.0 },
      resolution: { value: new THREE.Vector2() },
      zoom: { value: 1.5 },
      offset: { value: new THREE.Vector2(0.0, 0.0) }
    };

    // Fullscreen quad
    const material = new THREE.ShaderMaterial({
      uniforms: uniforms,
      vertexShader: `
        void main() {
          gl_Position = vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        precision highp float;
        uniform vec2 resolution;
        uniform float time;
        uniform float zoom;
        uniform vec2 offset;

        // Color palette interpolation
        vec3 palette(float t){
          vec3 a = vec3(1.0, 0.8, 0.2); // gold
          vec3 b = vec3(1.0, 0.5, 0.0); // orange
          vec3 c = vec3(1.0, 0.0, 1.0); // magenta
          vec3 d = vec3(0.6, 0.0, 0.6); // purple
          vec3 e = vec3(0.3, 0.0, 0.5); // indigo
          if(t < 0.25) return mix(a, b, t/0.25);
          else if(t < 0.5) return mix(b, c, (t-0.25)/0.25);
          else if(t < 0.75) return mix(c, d, (t-0.5)/0.25);
          else return mix(d, e, (t-0.75)/0.25);
        }

        void main(){
          vec2 uv = (gl_FragCoord.xy / resolution.xy) * 2.0 - 1.0;
          uv.x *= resolution.x / resolution.y;
          // complex plane coords
          vec2 z = uv * zoom + offset;

          // rotating constant
          float radius = 0.7885;
          float ang = time * 0.2;
          vec2 c = radius * vec2(cos(ang), sin(ang));

          const int MAX_IT = 300;
          int i;
          float mu = 0.0;
          for(i = 0; i < MAX_IT; i++){
            float x = (z.x*z.x - z.y*z.y) + c.x;
            float y = (2.0*z.x*z.y) + c.y;
            z = vec2(x, y);
            if(dot(z,z) > 4.0) {
              // smooth iteration count
              float log_zn = log(dot(z,z)) / 2.0;
              float nu = log(log_zn / log(2.0)) / log(2.0);
              mu = float(i) + 1.0 - nu;
              break;
            }
          }
          float t = mu < 1.0 ? 0.0 : mu / float(MAX_IT);
          vec3 col = palette(t);
          gl_FragColor = vec4(col, 1.0);
        }
      `
    });
    const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
    scene.add(quad);

    // Resize handler
    function onResize() {
      const w = window.innerWidth, h = window.innerHeight;
      renderer.setSize(w, h);
      uniforms.resolution.value.set(w, h);
    }
    window.addEventListener('resize', onResize);
    onResize();

    // Interaction state
    let isPaused = false;
    let startTime = performance.now();
    let pausedTime = 0;

    // Pan
    let isDragging = false;
    let lastX = 0, lastY = 0;

    renderer.domElement.addEventListener('mousedown', e => {
      isDragging = true;
      lastX = e.clientX;
      lastY = e.clientY;
    });
    window.addEventListener('mousemove', e => {
      if(!isDragging) return;
      const dx = (e.clientX - lastX) / window.innerWidth * 2 * uniforms.zoom.value * (window.innerWidth/window.innerHeight);
      const dy = -(e.clientY - lastY) / window.innerHeight * 2 * uniforms.zoom.value;
      uniforms.offset.value.x -= dx;
      uniforms.offset.value.y -= dy;
      lastX = e.clientX; lastY = e.clientY;
    });
    window.addEventListener('mouseup', () => { isDragging = false; });

    // Wheel zoom
    renderer.domElement.addEventListener('wheel', e => {
      e.preventDefault();
      const factor = e.deltaY > 0 ? 1.1 : 0.9;
      // zoom around pointer
      const nx = (e.clientX / window.innerWidth) * 2 - 1;
      const ny = 1 - (e.clientY / window.innerHeight) * 2;
      const before = new THREE.Vector2(
        nx * (window.innerWidth/window.innerHeight) * uniforms.zoom.value + uniforms.offset.value.x,
        ny * uniforms.zoom.value + uniforms.offset.value.y
      );
      uniforms.zoom.value *= factor;
      const after = new THREE.Vector2(
        nx * (window.innerWidth/window.innerHeight) * uniforms.zoom.value + uniforms.offset.value.x,
        ny * uniforms.zoom.value + uniforms.offset.value.y
      );
      uniforms.offset.value.sub(after).add(before);
    }, { passive: false });

    // Touch pan & pinch
    let touchMode = null;
    let initDist = 0, initZoom = 1.5;
    let initOff = new THREE.Vector2();
    let initCenter = new THREE.Vector2();
    renderer.domElement.addEventListener('touchstart', e => {
      if(e.touches.length === 1) {
        touchMode = 'pan';
        lastX = e.touches[0].clientX;
        lastY = e.touches[0].clientY;
      } else if(e.touches.length === 2) {
        touchMode = 'pinch';
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        initDist = Math.hypot(dx, dy);
        initZoom = uniforms.zoom.value;
        initOff.copy(uniforms.offset.value);
        // center
        const cx = (e.touches[0].clientX + e.touches[1].clientX)/2;
        const cy = (e.touches[0].clientY + e.touches[1].clientY)/2;
        initCenter.set(cx, cy);
      }
    }, { passive: false });
    renderer.domElement.addEventListener('touchmove', e => {
      e.preventDefault();
      if(touchMode === 'pan' && e.touches.length===1) {
        const x = e.touches[0].clientX, y = e.touches[0].clientY;
        const dx = (x - lastX)/window.innerWidth*2*uniforms.zoom.value*(window.innerWidth/window.innerHeight);
        const dy = -(y - lastY)/window.innerHeight*2*uniforms.zoom.value;
        uniforms.offset.value.x -= dx;
        uniforms.offset.value.y -= dy;
        lastX = x; lastY = y;
      } else if(touchMode === 'pinch' && e.touches.length===2) {
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        const dist = Math.hypot(dx, dy);
        const factor = dist / initDist;
        // zoom around initial center
        const nx = (initCenter.x / window.innerWidth)*2 -1;
        const ny = 1 - (initCenter.y / window.innerHeight)*2;
        const before = new THREE.Vector2(
          nx*(window.innerWidth/window.innerHeight)*uniforms.zoom.value + uniforms.offset.value.x,
          ny*uniforms.zoom.value + uniforms.offset.value.y
        );
        uniforms.zoom.value = initZoom * factor;
        const after = new THREE.Vector2(
          nx*(window.innerWidth/window.innerHeight)*uniforms.zoom.value + uniforms.offset.value.x,
          ny*uniforms.zoom.value + uniforms.offset.value.y
        );
        uniforms.offset.value.sub(after).add(before);
      }
    }, { passive: false });
    renderer.domElement.addEventListener('touchend', e => {
      if(e.touches.length===0) touchMode = null;
      else if(e.touches.length===1) {
        touchMode = 'pan';
        lastX = e.touches[0].clientX;
        lastY = e.touches[0].clientY;
      }
    });

    // Spacebar toggle
    window.addEventListener('keydown', e => {
      if(e.code === 'Space') {
        isPaused = !isPaused;
        if(isPaused) pausedTime = performance.now();
        else startTime += performance.now() - pausedTime;
      }
    });

    // Render loop
    function animate() {
      requestAnimationFrame(animate);
      const now = performance.now();
      uniforms.time.value = (isPaused ? pausedTime : now) - startTime;
      uniforms.time.value *= 0.001; // seconds
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>
```

Drag to resize

DeepSeek

DeepSeek R1 0528 (May '25)

# Interactive Julia Set Fractal Animation with Three.js

I'll create a full-screen interactive Julia set fractal with smooth color transitions and animation controls. Here's the complete solution:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Morphing Julia Set Fractal</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        canvas {
            display: block;
        }
        #info {
            position: absolute;
            top: 20px;
            left: 20px;
            color: rgba(255, 255, 255, 0.7);
            background: rgba(0, 0, 0, 0.5);
            padding: 15px;
            border-radius: 10px;
            font-size: 14px;
            max-width: 300px;
            backdrop-filter: blur(5px);
        }
        #info h1 {
            margin: 0 0 10px 0;
            font-size: 22px;
            color: #ffcc00;
        }
        #info ul {
            padding-left: 20px;
            margin: 10px 0;
        }
        #info li {
            margin-bottom: 8px;
            line-height: 1.4;
        }
        #status {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.5);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            backdrop-filter: blur(5px);
        }
        .pulse {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #0f0;
            margin-right: 8px;
            box-shadow: 0 0 5px #0f0;
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { opacity: 0.5; }
            50% { opacity: 1; }
            100% { opacity: 0.5; }
        }
    </style>
</head>
<body>
    <div id="info">
        <h1>Julia Set Fractal Explorer</h1>
        <p>This interactive visualization shows a continuously morphing Julia set fractal with smooth color transitions.</p>
        <ul>
            <li><strong>Drag</strong> to pan around the fractal</li>
            <li><strong>Scroll</strong> to zoom in and out</li>
            <li><strong>Spacebar</strong> to pause/resume animation</li>
            <li><strong>Double-click</strong> to reset view</li>
        </ul>
        <p>Colors transition from golden yellow through orange, magenta, and purple to deep indigo based on iteration count.</p>
    </div>
    <div id="status">
        <span class="pulse"></span> <span id="status-text">Playing</span>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Main variables
        let scene, camera, renderer, mesh;
        let uniforms, isPlaying = true;
        let offset = { x: 0, y: 0 };
        let scale = 2.5;
        let mouseDown = false;
        let lastMouse = { x: 0, y: 0 };
        let time = 0;

        // Initialize Three.js
        function init() {
            // Create scene
            scene = new THREE.Scene();

            // Create camera (orthographic for 2D rendering)
            const aspect = window.innerWidth / window.innerHeight;
            camera = new THREE.OrthographicCamera(
                -aspect, aspect, 1, -1, -1, 1
            );
            scene.add(camera);

            // Create renderer
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            document.body.appendChild(renderer.domElement);

            // Create shader material
            uniforms = {
                u_resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
                u_offset: { value: new THREE.Vector2(offset.x, offset.y) },
                u_scale: { value: scale },
                u_time: { value: 0 },
                u_aspect: { value: aspect }
            };

            const material = new THREE.ShaderMaterial({
                uniforms: uniforms,
                vertexShader: `
                    void main() {
                        gl_Position = vec4(position, 1.0);
                    }
                `,
                fragmentShader: `
                    uniform vec2 u_resolution;
                    uniform vec2 u_offset;
                    uniform float u_scale;
                    uniform float u_time;
                    uniform float u_aspect;
                    
                    // Smooth coloring function
                    vec3 palette(float t) {
                        vec3 a = vec3(0.95, 0.65, 0.15); // Golden yellow
                        vec3 b = vec3(0.95, 0.35, 0.0);  // Orange
                        vec3 c = vec3(0.9, 0.1, 0.5);    // Magenta
                        vec3 d = vec3(0.5, 0.0, 0.5);    // Purple
                        vec3 e = vec3(0.2, 0.0, 0.3);    // Deep indigo
                        
                        // Blend between colors based on t
                        if (t < 0.25) {
                            return mix(a, b, t * 4.0);
                        } else if (t < 0.5) {
                            return mix(b, c, (t - 0.25) * 4.0);
                        } else if (t < 0.75) {
                            return mix(c, d, (t - 0.5) * 4.0);
                        } else {
                            return mix(d, e, (t - 0.75) * 4.0);
                        }
                    }
                    
                    void main() {
                        // Normalize coordinates with aspect ratio
                        vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
                        uv *= u_scale;
                        uv += u_offset;
                        
                        // Rotating complex constant c
                        float angle = u_time * 0.1;
                        vec2 c = vec2(0.7885 * cos(angle), 0.7885 * sin(angle));
                        
                        vec2 z = uv;
                        float iterations = 0.0;
                        const float max_iter = 200.0;
                        
                        // Julia set iteration
                        for (float i = 0.0; i < max_iter; i++) {
                            if (dot(z, z) > 4.0) break;
                            
                            // Complex multiplication: z = z^2 + c
                            z = vec2(
                                z.x * z.x - z.y * z.y,
                                2.0 * z.x * z.y
                            ) + c;
                            
                            iterations++;
                        }
                        
                        // Smooth coloring
                        float t = iterations / max_iter;
                        vec3 color = palette(t);
                        
                        // Add some glow for depth
                        color += 0.1 * vec3(t * t * t);
                        
                        gl_FragColor = vec4(color, 1.0);
                    }
                `
            });

            // Create fullscreen quad
            const geometry = new THREE.PlaneGeometry(2, 2);
            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            // Event listeners
            window.addEventListener('resize', onWindowResize);
            document.addEventListener('mousedown', onMouseDown);
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
            document.addEventListener('wheel', onMouseWheel);
            document.addEventListener('keydown', onKeyDown);
            document.addEventListener('dblclick', onDoubleClick);
        }

        // Handle window resize
        function onWindowResize() {
            const aspect = window.innerWidth / window.innerHeight;
            camera.left = -aspect;
            camera.right = aspect;
            camera.top = 1;
            camera.bottom = -1;
            camera.updateProjectionMatrix();
            
            renderer.setSize(window.innerWidth, window.innerHeight);
            uniforms.u_resolution.value.set(window.innerWidth, window.innerHeight);
            uniforms.u_aspect.value = aspect;
        }

        // Mouse event handlers
        function onMouseDown(event) {
            mouseDown = true;
            lastMouse.x = event.clientX;
            lastMouse.y = event.clientY;
        }

        function onMouseMove(event) {
            if (!mouseDown) return;
            
            const dx = (event.clientX - lastMouse.x) / window.innerWidth;
            const dy = (event.clientY - lastMouse.y) / window.innerHeight;
            
            offset.x -= dx * scale;
            offset.y += dy * scale;
            
            uniforms.u_offset.value.set(offset.x, offset.y);
            
            lastMouse.x = event.clientX;
            lastMouse.y = event.clientY;
        }

        function onMouseUp() {
            mouseDown = false;
        }

        function onMouseWheel(event) {
            event.preventDefault();
            const zoomSpeed = 0.1;
            const zoomFactor = 1.0 + (event.deltaY > 0 ? zoomSpeed : -zoomSpeed);
            
            // Adjust scale and offset for zooming toward mouse position
            const rect = renderer.domElement.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;
            
            const normX = (mouseX / window.innerWidth - 0.5) * 2.0 * (window.innerWidth / window.innerHeight);
            const normY = (1.0 - mouseY / window.innerHeight - 0.5) * 2.0;
            
            const prevScale = scale;
            scale *= zoomFactor;
            scale = Math.max(0.1, Math.min(scale, 100.0));
            
            offset.x += (normX * (prevScale - scale));
            offset.y += (normY * (prevScale - scale));
            
            uniforms.u_scale.value = scale;
            uniforms.u_offset.value.set(offset.x, offset.y);
        }

        function onKeyDown(event) {
            if (event.code === 'Space') {
                isPlaying = !isPlaying;
                document.getElementById('status-text').textContent = isPlaying ? 'Playing' : 'Paused';
            }
        }

        function onDoubleClick() {
            // Reset view
            offset.x = 0;
            offset.y = 0;
            scale = 2.5;
            uniforms.u_offset.value.set(offset.x, offset.y);
            uniforms.u_scale.value = scale;
        }

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            
            if (isPlaying) {
                time += 0.01;
                uniforms.u_time.value = time;
            }
            
            renderer.render(scene, camera);
        }

        // Initialize and start animation
        init();
        animate();
    </script>
</body>
</html>
```

## Features Implemented

1. **Morphing Julia Set Fractal**:
   - Computes the Julia set with 200 iterations in the fragment shader
   - Complex constant rotates at a steady pace creating the morphing effect

2. **Smooth Color Transitions**:
   - Colors transition from golden yellow → orange → magenta → purple → deep indigo
   - Smooth coloring based on iteration count for visual appeal

3. **Interactive Controls**:
   - Click and drag to pan around the fractal
   - Mouse wheel to zoom in/out (zooms toward cursor position)
   - Space bar to toggle animation play/pause
   - Double-click to reset view

4. **Visual Design**:
   - Full-screen rendering with responsive design
   - Informative overlay with controls explanation
   - Status indicator showing animation state
   - Smooth animations and transitions

The fractal constantly evolves as the complex constant rotates, creating mesmerizing patterns. The color transitions highlight the intricate details of the Julia set at different iteration depths.

Drag to resize

OpenAI

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Three.js – Morphing Julia Set</title>
<style>
    html,body{margin:0;height:100%;overflow:hidden;background:#000;}
    canvas{display:block;}
</style>
<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.min.js"></script>
</head>
<body>
<script>
/* ---------- Basic Three.js setup ---------- */
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

const camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 ); // just a screen-space quad
const scene  = new THREE.Scene();

/* ---------- Shader material ---------- */
const MAX_ITER = 220;                 // iterations in the fragment shader
const ROT_SPEED = 0.35;               // radians per second for the Julia constant

const uniforms = {
    u_resolution : { value: new THREE.Vector2() },
    u_time       : { value: 0.0 },
    u_c          : { value: new THREE.Vector2() },
    u_zoom       : { value: 1.0 },
    u_offset     : { value: new THREE.Vector2() },
};

const fragmentShader = `
    uniform vec2  u_resolution;
    uniform float u_time;
    uniform vec2  u_c;
    uniform float u_zoom;
    uniform vec2  u_offset;

    const int MAX_ITER = ${MAX_ITER};

    vec3 palette(float t){
        // key colors
        vec3 c0 = vec3(1.0,0.8,0.0); // golden yellow
        vec3 c1 = vec3(1.0,0.5,0.0); // orange
        vec3 c2 = vec3(1.0,0.0,0.5); // magenta
        vec3 c3 = vec3(0.6,0.0,1.0); // purple
        vec3 c4 = vec3(0.2,0.0,0.5); // indigo

        t = clamp(t,0.0,1.0);
        float x = t * 4.0;
        float f = fract(x);

        if(x < 1.0)       return mix(c0, c1, f);
        else if(x < 2.0)  return mix(c1, c2, f);
        else if(x < 3.0)  return mix(c2, c3, f);
        else              return mix(c3, c4, f);
    }

    void main(){
        vec2 uv = gl_FragCoord.xy - 0.5 * u_resolution;
        float scale = min(u_resolution.x, u_resolution.y);
        vec2 z = (uv / scale) * u_zoom + u_offset;

        int i;
        vec2 c = u_c;

        for(i = 0; i < MAX_ITER; i++){
            // z = z^2 + c in complex plane
            z = vec2(
                z.x*z.x - z.y*z.y,
                2.0*z.x*z.y
            ) + c;
            if(dot(z,z) > 16.0) break;
        }

        float it = float(i);
        if(i < MAX_ITER){
            // smooth iteration count
            float zn = dot(z,z);
            it = it + 1.0 - log2(log2(zn)) + 1.0;
        }

        float t = it / float(MAX_ITER);
        vec3 col = palette(t);
        if(i == MAX_ITER) col = vec3(0.0); // interior = black
        gl_FragColor = vec4(col,1.0);
    }
`;

const material = new THREE.ShaderMaterial({
    uniforms,
    fragmentShader,
    vertexShader: `
        void main(){
            gl_Position = vec4( position, 1.0 );
        }
    `
});

const quad = new THREE.Mesh( new THREE.PlaneGeometry(2,2), material );
scene.add( quad );

/* ---------- Handle resizing ---------- */
function resize(){
    renderer.setSize( window.innerWidth, window.innerHeight );
    uniforms.u_resolution.value.set( window.innerWidth, window.innerHeight );
}
window.addEventListener('resize', resize);
resize();

/* ---------- Interaction: panning & zooming ---------- */
let isDragging = false;
let dragStart  = new THREE.Vector2();
let offsetStart= new THREE.Vector2();

renderer.domElement.addEventListener('pointerdown', e=>{
    isDragging = true;
    dragStart.set( e.clientX, e.clientY );
    offsetStart.copy( uniforms.u_offset.value );
});

window.addEventListener('pointerup', ()=> isDragging = false );

window.addEventListener('pointermove', e=>{
    if(!isDragging) return;
    const dx = e.clientX - dragStart.x;
    const dy = e.clientY - dragStart.y;
    const scale = Math.min( window.innerWidth, window.innerHeight );
    const zoom  = uniforms.u_zoom.value;

    uniforms.u_offset.value.set(
        offsetStart.x - (dx / scale) * zoom,
        offsetStart.y + (dy / scale) * zoom
    );
});

function zoomAt(pointX, pointY, zoomFactor){
    const res   = uniforms.u_resolution.value;
    const zoom  = uniforms.u_zoom.value;
    const scale = Math.min( res.x, res.y );

    // convert screen point to fractal coord
    const before = new THREE.Vector2(
        (pointX - 0.5*res.x) / scale * zoom + uniforms.u_offset.value.x,
        (pointY - 0.5*res.y) / scale * zoom + uniforms.u_offset.value.y
    );

    uniforms.u_zoom.value *= zoomFactor;

    const zoomNew = uniforms.u_zoom.value;

    const after = new THREE.Vector2(
        (pointX - 0.5*res.x) / scale * zoomNew + uniforms.u_offset.value.x,
        (pointY - 0.5*res.y) / scale * zoomNew + uniforms.u_offset.value.y
    );

    // adjust offset so the point under cursor stays fixed
    uniforms.u_offset.value.add( before.clone().sub(after) );
}

window.addEventListener('wheel', e=>{
    e.preventDefault();
    const factor = e.deltaY < 0 ? 0.85 : 1.15;
    zoomAt( e.clientX, e.clientY, factor );
},{passive:false});

/* ---------- Animation loop + pause ---------- */
let paused = false;
let lastTime = performance.now();

function animate(now){
    requestAnimationFrame( animate );

    if(!paused){
        const dt = (now - lastTime) * 0.001; // seconds
        uniforms.u_time.value += dt;
        // rotate the Julia constant
        const theta = uniforms.u_time.value * ROT_SPEED;
        const r     = 0.7885; // radius of constant
        uniforms.u_c.value.set( Math.cos(theta)*r, Math.sin(theta)*r );
    }
    lastTime = now;

    renderer.render( scene, camera );
}
requestAnimationFrame( animate );

/* ---------- Space bar pause / resume ---------- */
window.addEventListener('keydown', e=>{
    if(e.code === 'Space'){
        paused = !paused;
    }
});
</script>
</body>
</html>
```

Drag to resize

MiniMax

MiniMax M1 40k

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Julia Set Fractal Shader</title>
  <style>
    body { margin: 0; overflow: hidden; background-color: black; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    // Set up the scene, camera, and renderer
    const scene = new THREE.Scene();
    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
    camera.position.z = 1;

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Vertex shader
    const vertexShader = `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `;

    // Fragment shader
    const fragmentShader = `
      varying vec2 vUv;
      uniform vec2 resolution;
      uniform float time;
      uniform vec2 c;
      uniform bool isPaused;
      uniform float zoom;
      uniform vec2 offset;
      
      void main() {
        // Convert UV coordinates to complex plane coordinates with pan and zoom
        vec2 uv = vUv * 2.0 - 1.0;
        uv.x *= resolution.x / resolution.y; // Adjust for aspect ratio
        
        // Apply zoom and offset
        uv = uv / zoom + offset;
        
        // Initial z value
        vec2 z = uv;
        
        // Julia set parameters
        vec2 constant = c;
        if (!isPaused) {
          // Rotate the constant over time
          float angle = time * 0.3; // Moderate pace
          constant = vec2(cos(angle) * 0.37, sin(angle) * 0.1) + c * 0.1;
        }
        
        // Julia set iteration
        float iterations = 0.0;
        float maxIterations = 200.0;
        
        for (float i = 0.0; i < maxIterations; i++) {
          iterations = i;
          
          // z = z^2 + c
          vec2 zSquared = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y);
          z = zSquared + constant;
          
          // Break if we're escaping to infinity
          if (dot(z, z) > 4.0) break;
        }
        
        // Smooth coloring
        float smoothColor = iterations - log(log(length(z))) / log(2.0);
        smoothColor = clamp(smoothColor / maxIterations, 0.0, 1.0);
        
        // Color mapping
        vec3 color1 = vec3(1.0, 0.84, 0.0); // Golden yellow
        vec3 color2 = vec3(1.0, 0.5, 0.0);  // Orange
        vec3 color3 = vec3(1.0, 0.0, 0.5);  // Magenta
        vec3 color4 = vec3(0.5, 0.0, 0.5);  // Purple
        vec3 color5 = vec3(0.29, 0.0, 0.51); // Deep indigo
        
        vec3 color;
        if (smoothColor < 0.25) {
          color = mix(color1, color2, smoothColor * 4.0);
        } else if (smoothColor < 0.5) {
          color = mix(color2, color3, (smoothColor - 0.25) * 4.0);
        } else if (smoothColor < 0.75) {
          color = mix(color3, color4, (smoothColor - 0.5) * 4.0);
        } else {
          color = mix(color4, color5, (smoothColor - 0.75) * 4.0);
        }
        
        // If we're at max iterations, color is black
        if (iterations >= maxIterations - 1.0) {
          color = vec3(0.0, 0.0, 0.0);
        }
        
        gl_FragColor = vec4(color, 1.0);
      }
    `;

    // Create a shader material
    const uniforms = {
      resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
      time: { value: 0.0 },
      c: { value: new THREE.Vector2(-0.7, 0.27015) }, // Initial Julia set constant
      isPaused: { value: false },
      zoom: { value: 1.0 },
      offset: { value: new THREE.Vector2(0, 0) }
    };

    const material = new THREE.ShaderMaterial({
      vertexShader,
      fragmentShader,
      uniforms
    });

    // Create a plane that fills the screen
    const geometry = new THREE.PlaneGeometry(2, 2);
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Pan and zoom variables
    let isDragging = false;
    let previousMousePosition = { x: 0, y: 0 };

    // Mouse down event
    renderer.domElement.addEventListener('mousedown', (event) => {
      isDragging = true;
      previousMousePosition = {
        x: event.clientX,
        y: event.clientY
      };
    });

    // Mouse move event
    renderer.domElement.addEventListener('mousemove', (event) => {
      if (isDragging) {
        const deltaMove = {
          x: event.clientX - previousMousePosition.x,
          y: event.clientY - previousMousePosition.y
        };
        
        // Update offset
        uniforms.offset.value.x += deltaMove.x * 0.01 / uniforms.zoom.value;
        uniforms.offset.value.y -= deltaMove.y * 0.01 / uniforms.zoom.value;
        
        previousMousePosition = {
          x: event.clientX,
          y: event.clientY
        };
      }
    });

    // Mouse up event
    renderer.domElement.addEventListener('mouseup', () => {
      isDragging = false;
    });

    // Mouse leave event
    renderer.domElement.addEventListener('mouseleave', () => {
      isDragging = false;
    });

    // Mouse wheel event for zooming
    renderer.domElement.addEventListener('wheel', (event) => {
      event.preventDefault();
      
      // Adjust zoom based on wheel delta
      uniforms.zoom.value += event.deltaY * -0.001 * uniforms.zoom.value;
      
      // Clamp zoom to reasonable values
      uniforms.zoom.value = Math.min(Math.max(0.1, uniforms.zoom.value), 10);
    });

    // Space bar to toggle play/pause
    window.addEventListener('keydown', (event) => {
      if (event.code === 'Space') {
        uniforms.isPaused.value = !uniforms.isPaused.value;
      }
    });

    // Animation loop
    function animate() {
      requestAnimationFrame(animate);
      
      // Update time uniform
      if (!uniforms.isPaused.value) {
        uniforms.time.value += 0.01;
      }
      
      renderer.render(scene, camera);
    }

    // Handle window resize
    window.addEventListener('resize', () => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      
      renderer.setSize(width, height);
      uniforms.resolution.value.set(width, height);
    });

    animate();
  </script>
</body>
</html>
```

Drag to resize

Alibaba

Qwen3 235B A22B (Non-reasoning)

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Morphing Julia Set</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script>
    <script>
        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
        camera.position.z = 1;
        
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // Shader material
        const material = new THREE.ShaderMaterial({
            fragmentShader: `
                precision highp float;
                uniform float u_time;
                uniform vec2 u_resolution;
                uniform vec2 u_offset;
                uniform float u_scale;
                uniform bool u_isPlaying;
                varying vec2 vUv;
                
                vec3 getColor(float t) {
                    vec3 color = vec3(0.0);
                    color = mix(vec3(1.0, 0.843, 0.0), vec3(1.0, 0.647, 0.0), smoothstep(0.0, 0.25, t));
                    color = mix(color, vec3(1.0, 0.0, 1.0), smoothstep(0.25, 0.5, t));
                    color = mix(color, vec3(0.5, 0.0, 0.5), smoothstep(0.5, 0.75, t));
                    color = mix(color, vec3(0.298, 0.0, 0.509), smoothstep(0.75, 1.0, t));
                    return color;
                }
                
                void main() {
                    vec2 uv = (vUv - 0.5) * u_scale + u_offset;
                    vec2 c = vec2(0.0);
                    
                    if (u_isPlaying) {
                        float angle = u_time * 0.2;
                        c = vec2(cos(angle), sin(angle)) * 0.7885;
                    } else {
                        c = vec2(0.285, 0.01);
                    }
                    
                    vec2 z = uv;
                    float iter = 0.0;
                    const int maxIter = 100;
                    
                    for (int i = 0; i < maxIter; i++) {
                        if (dot(z, z) > 4.0) break;
                        z = vec2(z.x*z.x - z.y*z.y, 2.0*z.x*z.y) + c;
                        iter += 1.0;
                    }
                    
                    float t = iter / float(maxIter);
                    vec3 color = getColor(t);
                    gl_FragColor = vec4(color, 1.0);
                }
            `,
            uniforms: {
                u_time: { value: 0.0 },
                u_resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
                u_offset: { value: new THREE.Vector2(0, 0) },
                u_scale: { value: 1.0 },
                u_isPlaying: { value: true }
            }
        });
        
        // Fullscreen quad
        const geometry = new THREE.PlaneGeometry(2, 2);
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        
        // Resize handler
        window.addEventListener('resize', () => {
            const width = window.innerWidth;
            const height = window.innerHeight;
            const aspect = width / height;
            camera.left = -aspect;
            camera.right = aspect;
            camera.top = 1;
            camera.bottom = -1;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);
            material.uniforms.u_resolution.value.set(width, height);
        });
        
        // Controls
        let isDragging = false;
        let lastX = 0, lastY = 0;
        
        document.addEventListener('mousedown', (e) => {
            isDragging = true;
            lastX = e.clientX;
            lastY = e.clientY;
        });
        
        document.addEventListener('mouseup', () => {
            isDragging = false;
        });
        
        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                const dx = e.clientX - lastX;
                const dy = e.clientY - lastY;
                lastX = e.clientX;
                lastY = e.clientY;
                
                const scale = material.uniforms.u_scale.value;
                material.uniforms.u_offset.value.x -= dx / window.innerWidth * scale;
                material.uniforms.u_offset.value.y += dy / window.innerHeight * scale;
            }
        });
        
        document.addEventListener('wheel', (e) => {
            const factor = 1.1;
            if (e.deltaY < 0) {
                material.uniforms.u_scale.value /= factor;
            } else {
                material.uniforms.u_scale.value *= factor;
            }
        });
        
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                material.uniforms.u_isPlaying.value = !material.uniforms.u_isPlaying.value;
            }
        });
        
        // Animation loop
        let lastTime = performance.now();
        
        function animate() {
            requestAnimationFrame(animate);
            
            if (material.uniforms.u_isPlaying.value) {
                const now = performance.now();
                const delta = (now - lastTime) / 1000;
                material.uniforms.u_time.value += delta;
                lastTime = now;
            }
            
            renderer.render(scene, camera);
        }
        
        animate();
    </script>
</body>
</html>
```

Drag to resize

DeepSeek

DeepSeek V3 0324

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Julia Set Fractal</title>
    <style>
        body { 
            margin: 0; 
            overflow: hidden; 
            background-color: #000;
        }
        canvas { 
            display: block; 
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script>
        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Uniforms for shader
        const uniforms = {
            time: { type: "f", value: 0.0 },
            resolution: { type: "v2", value: new THREE.Vector2() },
            zoom: { type: "f", value: 1.0 },
            center: { type: "v2", value: new THREE.Vector2(0.0, 0.0) }
        };

        // Create shader material
        const material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            fragmentShader: `
                uniform float time;
                uniform vec2 resolution;
                uniform float zoom;
                uniform vec2 center;
                
                const int maxIterations = 100;
                
                vec3 palette(float t) {
                    vec3 a = vec3(0.966, 0.753, 0.204); // gold
                    vec3 b = vec3(0.929, 0.286, 0.243); // orange-red
                    vec3 c = vec3(0.694, 0.149, 0.686); // magenta-purple
                    vec3 d = vec3(0.267, 0.039, 0.592); // indigo
                    
                    return a + b*cos(6.28318*(c*t + d));
                }
                
                void main() {
                    vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
                    uv /= zoom;
                    uv += center;
                    
                    // Animate Julia set constant
                    float angle = time * 0.2;
                    vec2 c = vec2(0.3 * cos(angle), 0.3 * sin(angle));
                    
                    vec2 z = uv;
                    int iterations = 0;
                    
                    for (int i = 0; i < maxIterations; i++) {
                        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
                        if (dot(z, z) > 4.0) break;
                        iterations++;
                    }
                    
                    float t = float(iterations) / float(maxIterations);
                    vec3 color = iterations == maxIterations ? vec3(0.0) : palette(t * 0.5 + 0.3);
                    
                    gl_FragColor = vec4(color, 1.0);
                }
            `
        });

        // Create full-screen quad
        const geometry = new THREE.PlaneGeometry(2, 2);
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        // Interaction variables
        let isDragging = false;
        let lastMouseX = 0;
        let lastMouseY = 0;
        let animationPlaying = true;

        // Event listeners
        window.addEventListener('resize', onWindowResize);
        document.addEventListener('mousedown', onMouseDown);
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
        document.addEventListener('wheel', onMouseWheel);
        document.addEventListener('keydown', onKeyDown);

        // Handle touch events for mobile
        document.addEventListener('touchstart', onTouchStart);
        document.addEventListener('touchmove', onTouchMove);
        document.addEventListener('touchend', onTouchEnd);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            uniforms.resolution.value.set(window.innerWidth, window.innerHeight);
        }

        function onMouseDown(event) {
            isDragging = true;
            lastMouseX = event.clientX;
            lastMouseY = event.clientY;
        }

        function onMouseMove(event) {
            if (!isDragging) return;
            
            const deltaX = event.clientX - lastMouseX;
            const deltaY = event.clientY - lastMouseY;
            
            uniforms.center.value.x -= deltaX / (window.innerWidth * uniforms.zoom.value * 0.5);
            uniforms.center.value.y += deltaY / (window.innerHeight * uniforms.zoom.value * 0.5);
            
            lastMouseX = event.clientX;
            lastMouseY = event.clientY;
        }

        function onMouseUp() {
            isDragging = false;
        }

        function onMouseWheel(event) {
            event.preventDefault();
            const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1;
            uniforms.zoom.value *= zoomFactor;
        }

        function onKeyDown(event) {
            if (event.code === 'Space') {
                animationPlaying = !animationPlaying;
                event.preventDefault();
            }
        }

        function onTouchStart(event) {
            isDragging = true;
            lastMouseX = event.touches[0].clientX;
            lastMouseY = event.touches[0].clientY;
            event.preventDefault();
        }

        function onTouchMove(event) {
            if (!isDragging) return;
            
            const deltaX = event.touches[0].clientX - lastMouseX;
            const deltaY = event.touches[0].clientY - lastMouseY;
            
            uniforms.center.value.x -= deltaX / (window.innerWidth * uniforms.zoom.value * 0.5);
            uniforms.center.value.y += deltaY / (window.innerHeight * uniforms.zoom.value * 0.5);
            
            lastMouseX = event.touches[0].clientX;
            lastMouseY = event.touches[0].clientY;
            event.preventDefault();
        }

        function onTouchEnd() {
            isDragging = false;
        }

        // Initialize
        uniforms.resolution.value.set(window.innerWidth, window.innerHeight);
        let lastTime = 0;

        // Animation loop
        function animate(currentTime) {
            requestAnimationFrame(animate);
            
            if (animationPlaying) {
                const deltaTime = (currentTime - lastTime) / 1000;
                uniforms.time.value += deltaTime;
            }
            
            lastTime = currentTime;
            renderer.render(scene, camera);
        }

        animate(0);
    </script>
</body>
</html>
```

Drag to resize