Conway's 3D Game of Life

{"name":"Conways 3 D Game Of Life","description":"Experience Conway's Game of Life in a whole new dimension with this 3D adaptation! Watch mesmerizing patterns and shapes evolve in this immersive version of the classic cellular automaton.","photo":"https://jippity.s3.amazonaws.com/CleanShot 2024-04-02 at 13.58.21@2x.png","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-08-04T16:45:27.141915Z","updated_at":"2024-08-04T16:45:27.141928Z","user_id":68,"status":"PRIVATE","parent_id":928,"id":2555,"user":{"photo":null,"email":null,"recess_id":"00c84971-32ba-42fb-916f-bc850511082b","created_at":"2024-03-18T20:10:05.035372Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"red_jellyfish_343","id":68,"password_hash":null,"updated_at":"2024-03-18T20:10:05.035375Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"function drawCube(x, y, z, size, alpha, r, g, b) {\n push(); // Start a new drawing state\n translate(x, y, z); // Move to the specified location\n fill(r, g, b, alpha); // Set the fill color with the provided RGB and alpha\n box(size); // Draw a cube with the specified size\n pop(); // Restore original state\n}\n// Global variables for capture\n\ndocument.getElementById(\"saveMP4Button\").addEventListener(\"click\", function () {\n const numberOfFrames = 200; // 6 seconds at 30fps\n const fps = 60;\n gameRunning = false; // Pause the game\n\n const canvas = document.querySelector('canvas'); // Get the canvas element\n const stream = canvas.captureStream(fps); // Capture the stream from the canvas at 30fps\n const recordedChunks = []; // Store the recorded chunks here\n const mediaRecorder = new MediaRecorder(stream, {\n mimeType: 'video/webm; codecs=vp9' // Specify the video format\n });\n\n mediaRecorder.ondataavailable = function (event) {\n if (event.data.size > 0) {\n recordedChunks.push(event.data);\n }\n };\n\n mediaRecorder.onstop = function () {\n const blob = new Blob(recordedChunks, {\n type: 'video/webm'\n });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'ConwaysGameOfLife3D.webm';\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n };\n\n mediaRecorder.start();\n\n let framesCaptured = 0;\n const interval = setInterval(() => {\n updateGrid(); // Update the game state\n draw(); // Draw the current state to the canvas\n framesCaptured++;\n if (framesCaptured >= numberOfFrames) {\n clearInterval(interval);\n mediaRecorder.stop();\n gameRunning = true; // Optionally, resume the game\n }\n }, 1000 / fps);\n});\n\n\nconst structures = {\n glider: [\n [0, 1, 0],\n [0, 0, 1],\n [1, 1, 1]\n ],\n oscillator: [\n [1, 1, 1]\n ],\n block: [\n [1, 1],\n [1, 1]\n ],\n beehive: [\n [0, 1, 1, 0],\n [1, 0, 0, 1],\n [0, 1, 1, 0]\n ],\n loaf: [\n [0, 1, 1, 0],\n [1, 0, 0, 1],\n [0, 1, 0, 1],\n [0, 0, 1, 0]\n ],\n boat: [\n [1, 1, 0],\n [1, 0, 1],\n [0, 1, 0]\n ],\n tub: [\n [0, 1, 0],\n [1, 0, 1],\n [0, 1, 0]\n ],\n blinker: [\n [1, 1, 1]\n ],\n toad: [\n [0, 1, 1, 1],\n [1, 1, 1, 0]\n ],\n beacon: [\n [1, 1, 0, 0],\n [1, 0, 0, 0],\n [0, 0, 0, 1],\n [0, 0, 1, 1]\n ],\n pulsar: [\n [0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1],\n [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1],\n [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1],\n [0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0],\n [0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0],\n [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1],\n [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1],\n [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0]\n ],\n spaceship: [\n [0, 0, 1, 1, 0],\n [1, 1, 0, 1, 1],\n [1, 1, 1, 1, 0],\n [0, 1, 1, 0, 0]\n ]\n};\nfunction placeStructure(grid, structure, x, y) {\n for (let i = 0; i < structure.length; i++) {\n for (let j = 0; j < structure[i].length; j++) {\n if (x + i < cols && y + j < rows) { // Ensure the structure fits within the grid bounds\n grid[x + i][y + j] = structure[i][j];\n }\n }\n }\n}\ndocument.getElementById(\"randomButton\").addEventListener(\"click\", function () {\n // Clear the grid first\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n grid[i][j] = 0;\n }\n }\n\n // Create an array of structure keys with pulsar more likely to happen\n const baseStructureKeys = Object.keys(structures);\n let adjustedStructureKeys = baseStructureKeys.slice(); // Copy the original keys array\n // Duplicate the entry for 'pulsar' to make it more likely\n adjustedStructureKeys.push('pulsar', 'pulsar', 'pulsar');\n\n // Place random structures, now with pulsar more likely\n for (let n = 0; n < cols * rows * 0.002; n++) {\n const structureName = adjustedStructureKeys[Math.floor(Math.random() * adjustedStructureKeys.length)];\n const structure = structures[structureName];\n const x = Math.floor(Math.random() * (cols - structure[0].length));\n const y = Math.floor(Math.random() * (rows - structure.length));\n placeStructure(grid, structure, x, y);\n }\n\n // Add some randomness\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n if (grid[i][j] === 0 && Math.random() < 0.05) { // Keep low randomness to not overwrite structures\n grid[i][j] = 1;\n }\n }\n }\n\n generations[0] = grid; // Update the initial generation with the new random grid\n});\nlet isMouseOverSlider = false;\ndocument.getElementById('imageInput').addEventListener('change', function (e) {\n if (e.target.files && e.target.files[0]) {\n let img = new Image();\n img.onload = function () {\n // Create an offscreen canvas to draw the image\n let offscreenCanvas = document.createElement('canvas');\n offscreenCanvas.width = cols;\n offscreenCanvas.height = rows;\n let ctx = offscreenCanvas.getContext('2d');\n\n // Draw the image onto the canvas, resizing it to fit the grid\n ctx.drawImage(img, 0, 0, cols, rows);\n\n // Process the image data\n let imageData = ctx.getImageData(0, 0, cols, rows);\n for (let i = 0; i < imageData.data.length; i += 4) {\n let alpha = imageData.data[i + 3]; // Get the alpha value (transparency)\n let isWhite = imageData.data[i] > 200 && imageData.data[i + 1] > 200 && imageData.data[i + 2] > 200;\n let x = Math.floor((i / 4) % cols);\n let y = Math.floor((i / 4) / cols);\n\n // Update the grid based on whether the pixel is close to white or transparent\n // In this case, white or transparent pixels are considered dead cells (0)\n grid[x][y] = (isWhite || alpha < 128) ? 0 : 1; // Assuming alpha threshold of 128 for transparency\n }\n generations[0] = grid; // Update the initial generation with the image-based grid\n };\n\n // Set the src of the Image object to the uploaded file\n img.src = URL.createObjectURL(e.target.files[0]);\n }\n});\ndocument.getElementById('speedSlider').addEventListener('mouseenter', function () {\n isMouseOverSlider = true;\n});\n\ndocument.getElementById('speedSlider').addEventListener('mouseleave', function () {\n isMouseOverSlider = false;\n});\ndocument.getElementById('speedSlider').addEventListener('input', function () {\n let speed = this.value;\n frameRate(parseInt(speed));\n});\nlet trailEnabled = true; // Initially, the trail is enabled\n\ndocument.getElementById(\"toggleTrailButton\").addEventListener(\"click\", function () {\n trailEnabled = !trailEnabled; // Toggle the trail state\n maxGenerations = trailEnabled ? 30 : 1; // If trail is enabled, set maxGenerations to 30, else 1\n this.textContent = trailEnabled ? \"Disable Trail\" : \"Enable Trail\"; // Update button text accordingly\n clearGenerations(); // Clear existing generations to apply the change immediately\n});\n\nfunction clearGenerations() {\n generations.length = 0; // Clear the generations array\n generations.push(createGrid(cols, rows, false)); // Push the current grid state as the initial state\n}\nlet gameRunning = false;\ndocument.getElementById(\"startButton\").addEventListener(\"click\", function () {\n gameRunning = !gameRunning; // Toggle the game state\n this.textContent = gameRunning ? \"Pause\" : \"Start\"; // Update button text accordingly\n});\nlet grid;\nlet cols;\nlet rows;\nlet cubeSize = 30;\nlet spacing = 10;\n\nlet generations = []; // Store generations of grids\nlet maxGenerations = 30; // Maximum number of generations to display\nfunction setup() {\n frameRate(240);\n createCanvas(windowWidth, windowHeight, WEBGL);\n cols = floor(windowWidth / (cubeSize + spacing));\n rows = floor(windowHeight / (cubeSize + spacing));\n grid = createGrid(cols, rows, false); // Initialize with all cells dead\n generations.length = 0; // Clear any previous generations\n generations.push(grid); // Push the initial state\n}\n\nfunction createGrid(cols, rows, isRandom = true) {\n let arr = new Array(cols);\n for (let i = 0; i < arr.length; i++) {\n arr[i] = new Array(rows);\n for (let j = 0; j < arr[i].length; j++) {\n arr[i][j] = isRandom ? floor(random(2)) : 0; // Cells initialized based on `isRandom`\n }\n }\n return arr;\n}\nfunction mousePressed() {\n if (!isMouseOverSlider) {\n handleMouseInteraction(mouseX, mouseY);\n }\n}\nfunction mouseDragged() {\n if (!isMouseOverSlider) {\n handleMouseInteraction(mouseX, mouseY);\n }\n}\nfunction handleMouseInteraction(mouseX, mouseY) {\n // Convert mouse coordinates to a normalized 2D grid coordinate system\n let x = mouseX - windowWidth / 2;\n let y = mouseY - windowHeight / 2;\n // Calculate the 2D grid indices\n let i = floor((x + (cols * (cubeSize + spacing)) / 2) / (cubeSize + spacing));\n let j = floor((y + (rows * (cubeSize + spacing)) / 2) / (cubeSize + spacing));\n // Toggle the cell state if the click is within bounds\n if (i >= 0 && i < cols && j >= 0 && j < rows) {\n grid[i][j] = grid[i][j] == 1 ? 0 : 1;\n generations[0] = grid;\n }\n}\nfunction drawGrid() {\n for (let g = 0; g < generations.length; g++) {\n let currentGeneration = generations[g];\n let zOffset = -g * (cubeSize + spacing); // Move back by z for each past generation\n let alpha = map(g, 0, maxGenerations, 255, 50); // Fades from fully opaque to more transparent\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n if (currentGeneration[i][j] == 1) {\n let neighbors = countNeighbors(currentGeneration, i, j);\n // Map the number of neighbors to a color\n let color = getColorForNeighbors(neighbors);\n let x = (i - cols / 2) * (cubeSize + spacing);\n let y = (j - rows / 2) * (cubeSize + spacing);\n drawCube(x, y, zOffset, cubeSize, alpha, color.r, color.g, color.b);\n }\n }\n }\n }\n}\nfunction getColorForNeighbors(neighbors) {\n // Gradient from white (few neighbors) to black (many neighbors)\n switch (neighbors) {\n case 0:\n case 1:\n return { r: 240, g: 240, b: 240 }; // Almost white\n case 2:\n return { r: 200, g: 200, b: 200 }; // Lighter gray\n case 3:\n return { r: 160, g: 160, b: 160 }; // Medium gray\n case 4:\n return { r: 120, g: 120, b: 120 }; // Darker gray\n case 5:\n return { r: 80, g: 80, b: 80 }; // Even darker gray\n default:\n return { r: 40, g: 40, b: 40 }; // Almost black\n }\n}\nfunction updateGrid() {\n let next = createGrid(cols, rows, false); // Initialize the next generation grid with dead cells\n\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n let state = grid[i][j]; // Current state of the cell\n let neighbors = countNeighbors(grid, i, j); // Count live neighbors\n\n // Apply Conway's Game of Life Rules\n if (state === 1 && (neighbors < 2 || neighbors > 3)) {\n next[i][j] = 0; // Live cell dies due to underpopulation or overpopulation\n } else if (state === 0 && neighbors === 3) {\n next[i][j] = 1; // Dead cell becomes a live cell due to reproduction\n } else {\n next[i][j] = state; // Cell's state remains unchanged\n }\n }\n }\n\n grid = next; // Set the current grid to the next generation\n generations.unshift(grid); // Add the latest grid at the beginning of the generations array\n if (generations.length > maxGenerations) {\n generations.pop(); // Remove the oldest generation if we exceed the maximum\n }\n}\n\nfunction countNeighbors(grid, x, y) {\n let sum = 0;\n for (let i = -1; i <= 1; i++) {\n for (let j = -1; j <= 1; j++) {\n let col = (x + i + cols) % cols;\n let row = (y + j + rows) % rows;\n sum += grid[col][row];\n }\n }\n sum -= grid[x][y]; // Subtract the cell's own state since it was added in the loop\n return sum;\n}\nfunction draw() {\n background(255);\n // Lighting\n ambientLight(60, 60, 60); // Soft white light\n let dx = mouseX - width / 2;\n let dy = mouseY - height / 2;\n let v = createVector(dx, dy, 100); // Position of the light source\n v.normalize(); // Normalize the vector to use it for directional light direction\n directionalLight(255, 255, 255, v); // Bright white directional light\n\n drawGrid();\n drawGhostCube();\n\n if (gameRunning) {\n updateGrid();\n }\n\n}\n\n\nfunction drawGhostCube() {\n if (!isMouseOverSlider) {\n // Convert mouse coordinates to a normalized 2D grid coordinate system\n let x = mouseX - windowWidth / 2;\n let y = mouseY - windowHeight / 2;\n // Calculate the 2D grid indices\n let i = floor((x + (cols * (cubeSize + spacing)) / 2) / (cubeSize + spacing));\n let j = floor((y + (rows * (cubeSize + spacing)) / 2) / (cubeSize + spacing));\n // Convert back to world coordinates for rendering\n let worldX = (i - cols / 2) * (cubeSize + spacing);\n let worldY = (j - rows / 2) * (cubeSize + spacing);\n if (i >= 0 && i < cols && j >= 0 && j < rows) {\n push(); // Start a new drawing state\n translate(worldX, worldY, 0); // Move to the specified location\n fill(255, 255, 255, 100); // Set the fill color to white with some transparency\n box(cubeSize); // Draw a cube with the specified size\n pop(); // Restore original state\n }\n }\n}\n","style.css":"","index.html":"\n\n\n\n \n \n Conway's 3D Game of Life\n \n\n\n\n\n \n\n \n\n \n \n \n \n\n \n\n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"title":"3D Grid Visualization","instruction":"Render the game grid in a 3D environment with WebGL for an immersive experience.","created_at":"2024-03-25T22:14:06.059879","project_id":2555,"complete":false,"step_number":0,"updated_at":"2024-08-04T16:45:27.146345","id":10486},{"title":"Interactive Controls","instruction":"Allow users to interact with the 3D environment to observe the evolution of patterns.","created_at":"2024-03-25T22:14:06.059969","project_id":2555,"complete":false,"step_number":1,"updated_at":"2024-08-04T16:45:27.146430","id":10487},{"title":"Customizable Rules","instruction":"Enable users to modify the rules of the game to create unique simulations.","created_at":"2024-03-25T22:14:06.060029","project_id":2555,"complete":false,"step_number":2,"updated_at":"2024-08-04T16:45:27.146482","id":10488},{"title":"Pattern Library","instruction":"Provide a library of pre-defined patterns for users to explore and interact with.","created_at":"2024-03-25T22:14:06.060086","project_id":2555,"complete":false,"step_number":3,"updated_at":"2024-08-04T16:45:27.146537","id":10489},{"title":"Real-time Simulation","instruction":"Update the 3D environment in real time to showcase the dynamic evolution of patterns.","created_at":"2024-03-25T22:14:06.060142","project_id":2555,"complete":false,"step_number":4,"updated_at":"2024-08-04T16:45:27.146585","id":10490},{"title":"Color and Texture Effects","instruction":"Enhance the visual experience with customizable color and texture effects for the 3D elements.","created_at":"2024-03-25T22:14:06.060197","project_id":2555,"complete":false,"step_number":5,"updated_at":"2024-08-04T16:45:27.146711","id":10491},{"title":"User-Friendly Interface","instruction":"Design an intuitive user interface for easy navigation and interaction within the 3D environment.","created_at":"2024-03-25T22:14:06.060251","project_id":2555,"complete":false,"step_number":6,"updated_at":"2024-08-04T16:45:27.146785","id":10492},{"title":"Simulation Speed Control","instruction":"Allow users to adjust the speed of the simulation to observe patterns at different rates.","created_at":"2024-03-25T22:14:06.060307","project_id":2555,"complete":false,"step_number":7,"updated_at":"2024-08-04T16:45:27.146832","id":10493}]}