👤 You
Create a 3D Game of Life using WEBGL mode. Render a 10x10x10 grid of cubes. Each cube is either alive (visible) or dead (invisible). Apply Conway's rules in 3D (neighbors = 26 surrounding cubes). Live cells with 4-6 neighbors survive, dead cells with 5-6 neighbors are born. Use box() for each cell. Auto-rotate the entire grid slowly with rotateX and rotateY. Click to randomize the grid. Use contrasting colors for live cells (neon green on black background). Show generation counter. Keep code under 60 lines.
🤖 AI
Here’s a compact 3D Game of Life in WEBGL with a 10×10×10 cube grid, auto-rotation, click-to-randomize, and a generation counter. `sketch.js` is under 60 lines.
---
### `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Game of Life - p5.js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
```
---
### `style.css`
```css
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
canvas {
display: block;
}
/* Generation counter overlay */
#counter {
position: fixed;
top: 10px;
left: 10px;
color: #00ff64; /* neon green */
background: rgba(0, 0, 0, 0.6);
padding: 4px 8px;
font-family: monospace;
font-size: 14px;
pointer-events: none; /* don't block mouse clicks */
}
```
---
### `sketch.js` (≤ 60 lines)
```js
let N = 10, grid, next, gens = 0, angle = 0, counterP;
const S = 30;
function idx(x, y, z) { return x + N * (y + N * z); }
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
grid = new Array(N * N * N); next = new Array(N * N * N);
randomize();
counterP = createP(''); counterP.id('counter');
}
function randomize() {
for (let i = 0; i < grid.length; i++) grid[i] = random() < 0.3;
}
function draw() {
background(0); noStroke(); fill(0, 255, 100);
angle += 0.01; rotateX(angle * 0.7); rotateY(angle);
translate(-S * (N - 1) / 2, -S * (N - 1) / 2, -S * (N - 1) / 2);
for (let z = 0; z < N; z++) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
if (grid[idx(x, y, z)]) { push(); translate(x * S, y * S, z * S); box(S * 0.8); pop(); }
}
if (frameCount % 15 == 0) step();
counterP.html('Generation: ' + gens);
}
function step() {
for (let z = 0; z < N; z++) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
let n = 0, i = idx(x, y, z);
for (let dz = -1; dz <= 1; dz++) for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
if (dx || dy || dz) {
let nx = x + dx, ny = y + dy, nz = z + dz;
if (nx >= 0 && nx < N && ny >= 0 && ny < N && nz >= 0 && nz < N && grid[idx(nx, ny, nz)]) n++;
}
}
next[i] = grid[i] ? (n >= 4 && n <= 6) : (n >= 5 && n <= 6);
}
[grid, next] = [next, grid]; gens++;
}
function mousePressed() { randomize(); gens = 0; }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
```
---
Notes:
- Uses `WEBGL` mode in [`createCanvas`](https://p5js.org/reference/#/p5/createCanvas) and renders cubes with [`box()`](https://p5js.org/reference/#/p5/box).
- Neighborhood is all 26 surrounding cells; rules:
- Live survives if it has 4–6 live neighbors.
- Dead cell is born if it has 5–6 live neighbors.
- Click/tap anywhere to randomize the grid and reset the generation counter.
💬 Comments
Loading comments...