AI LLM aid microsite

Prompt generated game of life simulation by Wolfram Notebook Assistant:
Create a self-contained microsite in a single .html file using HTML, CSS, and JavaScript. The page should feature a <canvas> tag element of 600x600 pixels that displays Conway's Game of Life cellular automaton, where each cell is represented by a 4x4 pixel square. Initialize the grid with a random configuration of live and dead cells. Include the following features: A "Restart" button to reset the simulation with a new random initial configuration.
​
A "Toggle Colors" button to switch between two color schemes: black (dead) and white (live) cells, or orange (dead) and yellow (live) cells.
​
Ensure the simulation runs smoothly with a reasonable update rate (e.g., 10 updates per second).
​
Style the page with clean, modern CSS for a polished appearance, including centered canvas and buttons with clear labels and hover effects.
​

​
Embed the complete HTML, CSS, and JavaScript code within a single string in Wolfram Language. Use the CloudExport function to publish the page to Wolfram Cloud with public access, as shown in the example:
​
CloudExport[htmlContent, "HTML", Permissions -> "Public"] Ensure the code is functional, well-commented, and handles edge cases (e.g., canvas rendering and button interactions). Test the page locally before publishing to verify the Game of Life logic and color toggling work as expected.
​
​
​
​
Creating a self-contained microsite for Conway's Game of Life with the specified features involves integrating HTML, CSS, and JavaScript in a single document. Below is the complete HTML content that you can use with the
CloudExport
function to deploy the page to the Wolfram Cloud. ​
htmlContent="<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Conway's Game of Life</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } canvas { border: 1px solid #ccc; } button { margin: 10px; padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; transition: background-color 0.3s; } button:hover { background-color: #ddd; } </style></head><body> <canvas id='gameCanvas' width='600' height='600'></canvas> <div> <button id='restartButton'>Restart</button> <button id='toggleColorsButton'>Toggle Colors</button> </div> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const cellSize = 4; const cols = canvas.width / cellSize; const rows = canvas.height / cellSize; let grid = createGrid(); let colors = { dead: '#000', live: '#fff' }; let interval;​ function createGrid() { const grid = []; for (let y = 0; y < rows; y++) { const row = []; for (let x = 0; x < cols; x++) { row.push(Math.random() > 0.5 ? 1 : 0); } grid.push(row); } return grid; }​ function drawGrid() { for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { ctx.fillStyle = grid[y][x] ? colors.live : colors.dead; ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); } } }​ function updateGrid() { const newGrid = grid.map(arr => [...arr]); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const neighbors = countNeighbors(grid, x, y); if (grid[y][x] === 1) { newGrid[y][x] = neighbors === 2 || neighbors === 3 ? 1 : 0; } else { newGrid[y][x] = neighbors === 3 ? 1 : 0; } } } grid = newGrid; }​ function countNeighbors(grid, x, y) { let sum = 0; for (let i = -1; i <= 1; i++) { for (let j = -1; j <= 1; j++) { if (i === 0 && j === 0) continue; const col = (x + i + cols) % cols; const row = (y + j + rows) % rows; sum += grid[row][col]; } } return sum; }​ function toggleColors() { colors = colors.dead === '#000' ? { dead: '#ffa500', live: '#ffff00' } : { dead: '#000', live: '#fff' }; }​ function startSimulation() { clearInterval(interval); interval = setInterval(() => { updateGrid(); drawGrid(); }, 100); }​ document.getElementById('restartButton').addEventListener('click', () => { grid = createGrid(); startSimulation(); });​ document.getElementById('toggleColorsButton').addEventListener('click', toggleColors);​ startSimulation(); </script></body></html>";​​​​CloudExport[htmlContent,"HTML",Permissions->"Public"]
Insert and evaluate
Insert
Copy
​This code creates a microsite featuring Conway's Game of Life with the specified functionalities. The HTML, CSS, and JavaScript are all embedded within a single string, which can be deployed to the Wolfram Cloud using the
CloudExport
function. Here's a brief explanation of the key components: ​
• HTML & Canvas: The
<canvas>
element is used to visually represent the grid of cells.
​​
• CSS: Basic styling is applied to center the canvas and buttons, and add a hover effect to the buttons.
​​
• JavaScript: This handles the logic for the Game of Life, including initializing a random grid, updating cell states, and handling button interactions for restarting and toggling colors.
​You can copy this code into your Wolfram Language environment, execute it, and publish it to the Wolfram Cloud. This will create a public URL where your interactive Game of Life simulation can be accessed.
In[]:=
htmlContent="<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Conway's Game of Life</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } canvas { border: 1px solid #ccc; } button { margin: 10px; padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; transition: background-color 0.3s; } button:hover { background-color: #ddd; } </style></head><body> <canvas id='gameCanvas' width='600' height='600'></canvas> <div> <button id='restartButton'>Restart</button> <button id='toggleColorsButton'>Toggle Colors</button> </div> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const cellSize = 4; const cols = canvas.width / cellSize; const rows = canvas.height / cellSize; let grid = createGrid(); let colors = { dead: '#000', live: '#fff' }; let interval;​ function createGrid() { const grid = []; for (let y = 0; y < rows; y++) { const row = []; for (let x = 0; x < cols; x++) { row.push(Math.random() > 0.5 ? 1 : 0); } grid.push(row); } return grid; }​ function drawGrid() { for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { ctx.fillStyle = grid[y][x] ? colors.live : colors.dead; ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); } } }​ function updateGrid() { const newGrid = grid.map(arr => [...arr]); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const neighbors = countNeighbors(grid, x, y); if (grid[y][x] === 1) { newGrid[y][x] = neighbors === 2 || neighbors === 3 ? 1 : 0; } else { newGrid[y][x] = neighbors === 3 ? 1 : 0; } } } grid = newGrid; }​ function countNeighbors(grid, x, y) { let sum = 0; for (let i = -1; i <= 1; i++) { for (let j = -1; j <= 1; j++) { if (i === 0 && j === 0) continue; const col = (x + i + cols) % cols; const row = (y + j + rows) % rows; sum += grid[row][col]; } } return sum; }​ function toggleColors() { colors = colors.dead === '#000' ? { dead: '#ffa500', live: '#ffff00' } : { dead: '#000', live: '#fff' }; }​ function startSimulation() { clearInterval(interval); interval = setInterval(() => { updateGrid(); drawGrid(); }, 100); }​ document.getElementById('restartButton').addEventListener('click', () => { grid = createGrid(); startSimulation(); });​ document.getElementById('toggleColorsButton').addEventListener('click', toggleColors);​ startSimulation(); </script></body></html>";​​​​CloudExport[htmlContent,"HTML",Permissions->"Public"]