Dashboard

Edit "life-game-more"

Slug

URL-friendly identifier (a-z, 0-9, -, _).

Description

HTML or React Content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Game of Life Evolution</title>
    <style>
        body { margin: 0; overflow: hidden; background: #222222; }
        #status {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 16px;
            background: rgba(0, 0, 0, 0.7);
            padding: 5px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div id="status">Loading Game of Life...</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
    <script>
        // Check WebGL support
        const canvas = document.createElement('canvas');
        const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
        if (!gl) {
            document.getElementById('status').innerText = 'Error: WebGL not supported in this browser!';
            throw new Error('WebGL not supported');
        }

// Scene setup
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x222222); // Dark background
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

// Grid setup
        const WIDTH = 20;
        const HEIGHT = 20;
        const MAX_GENERATIONS = 20;
        const LAYER_SPACING = 1.0;

let generations = [];
        let cells = []; // Array of layers, each with 2D array of cubes

// Initial grid
        let initialGrid = Array.from({length: HEIGHT}, () => Array(WIDTH).fill(0));
        const startX = (WIDTH - 6) / 2;
        const startZ = (HEIGHT - 6) / 2;
        for (let z = startZ; z < startZ + 6; z++) {
            for (let x = startX; x < startX + 6; x++) {
                initialGrid[z][x] = Math.random() > 0.7 ? 1 : 0;
            }
        }
        generations.push(initialGrid);

// Geometries and materials
        const cubeGeometry = new THREE.BoxGeometry(0.9, 0.9, 0.9);
        const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, transparent: true, opacity: 0.4 });
        const edgeMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });
        const edgesGeometry = new THREE.EdgesGeometry(cubeGeometry);

// Add lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(10, 30, 10);
        scene.add(directionalLight);

// Function to add a layer (cubes only)
        function addLayer(layer) {
            const layerCells = new Array(HEIGHT).fill(0).map(() => new Array(WIDTH).fill(null));
            const grid = generations[layer];
            for (let z = 0; z < HEIGHT; z++) {
                for (let x = 0; x < WIDTH; x++) {
                    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                    cube.position.set(x + 0.5, layer * LAYER_SPACING + 0.5, z + 0.5);
                    cube.visible = grid[z][x] === 1;

// Add edges
                    const edges = new THREE.LineSegments(edgesGeometry, edgeMaterial);
                    cube.add(edges);

scene.add(cube);
                    layerCells[z][x] = cube;
                }
            }
            cells.push(layerCells);
        }

// Count live neighbors (toroidal grid)
        function countNeighbors(z, x, grid) {
            let count = 0;
            for (let dz = -1; dz <= 1; dz++) {
                for (let dx = -1; dx <= 1; dx++) {
                    if (dz === 0 && dx === 0) continue;
                    const nz = (z + dz + HEIGHT) % HEIGHT;
                    const nx = (x + dx + WIDTH) % WIDTH;
                    count += grid[nz][nx];
                }
            }
            return count;
        }

// Add next layer
        function addNextLayer() {
            if (generations.length >= MAX_GENERATIONS) return;
            const prev = generations[generations.length - 1];
            const nextGrid = new Array(HEIGHT).fill(0).map(() => new Array(WIDTH).fill(0));
            for (let z = 0; z < HEIGHT; z++) {
                for (let x = 0; x < WIDTH; x++) {
                    const neighbors = countNeighbors(z, x, prev);
                    if (prev[z][x] === 1) {
                        nextGrid[z][x] = (neighbors === 2 || neighbors === 3) ? 1 : 0;
                    } else {
                        nextGrid[z][x] = (neighbors === 3) ? 1 : 0;
                    }
                }
            }
            generations.push(nextGrid);
            addLayer(generations.length - 1);
        }

// Update cell scales with pulse animation
        function updateCells(time) {
            for (let layer = 0; layer < cells.length; layer++) {
                for (let z = 0; z < HEIGHT; z++) {
                    for (let x = 0; x < WIDTH; x++) {
                        const cube = cells[layer][z][x];
                        if (cube.visible) {
                            const scale = 0.9 + 0.1 * Math.sin(time * 0.005 + layer);
                            cube.scale.set(scale, scale, scale);
                        }
                    }
                }
            }
            document.getElementById('status').innerText = `Generation: ${generations.length - 1}`;
        }

// Initial layer
        addLayer(0);

// Animation loop
        let lastUpdate = 0;
        const UPDATE_INTERVAL = 200; // milliseconds
        function animate(time) {
            requestAnimationFrame(animate);

// Add next layer if interval passed
            if (time - lastUpdate > UPDATE_INTERVAL && generations.length < MAX_GENERATIONS) {
                addNextLayer();
                lastUpdate = time;
            }

// Update cells (pulsing)
            updateCells(time);

// Smooth camera rotation
            const theta = time * 0.0002; // Rotation speed
            const radius = 30;
            camera.position.x = 10 + Math.sin(theta) * radius;
            camera.position.z = 10 + Math.cos(theta) * radius;
            camera.position.y = 20;
            camera.lookAt(10, 9.5, 10); // Center of the stack

renderer.render(scene, camera);
        }

// Start animation and update status
        try {
            animate(0);
            document.getElementById('status').innerText = 'Generation: 0';
        } catch (error) {
            document.getElementById('status').innerText = `Error: ${error.message}`;
        }

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

Paste raw HTML or kick off with a React component (first line referencing React) and we'll scaffold the render call automatically.

Cancel