Every answer below carries the name of the model that wrote it. Blind refers to the scoring: the review was done without knowing which model produced which answer — the published result names them.
2 of the 11 local models delivered nothing through our test harness in this round — for reasons that lie with our setup, not with the models. Those cards are marked DNF like any other, but they are not evidence about those models — the reason is noted on the card itself.
Create ONE self-contained HTML file (STRICT LIMIT: max 7000 characters in total — this is a budget on characters, not on lines, so removing line breaks does not help) that runs Conway's Game of Life on a 120x80 grid drawn on a <canvas>. Seed it with a few known patterns — at least one glider and one oscillator — plus random noise, and let it evolve. Colour cells by how long they have been alive so trails and stable structures become visible. Show the generation number and the live-cell count, and reseed when the population stops changing. Smooth requestAnimationFrame animation, NO user input, starts immediately and keeps running (restart with a fresh random instance when finished). No external libraries, no comments needed. Output ONLY the HTML file content, nothing else.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conway's Game of Life</title>
<style>body{background:#111;color:white;font-family:monospace;display:flex;flex-direction:column;align-items:center;margin:0;padding-top:20px;}canvas{border:1px solid #333;background:#000;}</style>
</head>
<body><canvas id="lifeCanvas" width="600" height="480"></canvas><div id="info">Gen: 0 | Live: 0</div><script>
const c=document.getElementById('lifeCanvas');
const ctx=c.getContext('2d');
let W=120, H=80;
c.width=W*5; c.height=H*5; // Draw at 5px per cell
// State arrays: (Cell state, Age trail)
let grid=[[0],[0]];
let ageGrid=[[0],[0]];
const A=Math.floor(Math.random);
function init() {
grid = Array.from({length:H}, (_,y) => new Array(W).fill(0));
ageGrid = Array.from({length:H}, (_,y) => new Array(W).fill(0));
// Seed 1: Glider (example offset adjusted for 120x80)
for(let y=5; y<=9; ++y) {
if (y < H && y >= 0) {
grid[y][2] = grid[y][3] = grid[y][4] = 1; // Row 5, cols 2-4
ageGrid[y][2] = ageGrid[y][3] = ageGrid[y][4] = 1;
}
}
// Seed 2: Blinker (period 2 oscillator)
for(let y=15; ++y) {
if (y < H && y >= 0) {
grid[y][8] = grid[y][9] = grid[y][10] = 1; // Row 15, cols 8-10
ageGrid[y][8] = ageGrid[y][9] = ageGrid[y][10] = 1;
}
}
// Seed 3: Random Noise (approx 5% density)
for(let y=0; y<H; ++y) {
for(let x=0; x<W; ++x) {
if (A(100) < 5) {
grid[y][x] = 1;
ageGrid[y][x] = 1;
}
}
}
document.getElementById('info').innerHTML = 'Gen: 0 | Live: 0';
draw();
requestAnimationFrame(step);
}
function getNeighbors(y, x) {
let count=0;
for (let dy=-1; dy<=1; ++dy) {
for (let dx=-1; dx<=1; ++dx) {
if (Math.abs(dy)+Math.abs(dx)>0) {
const ny = y+dy;
const nx = x+dx;
if (ny >= 0 && ny < H && nx >= 0 && nx < W) {
count += grid[ny][nx];
}
}
}
}
return count;
}
function nextState() {
let newGrid = Array.from({length:H}, (_,y) => new Array(W).fill(0));
let newAgeGrid = JSON.parse(JSON.stringify(ageGrid)); // Deep copy for age tracking
let liveCount=0;
for (let y=0; y<H; ++y) {
for (let x=0; x<W; ++x) {
const neighbors=getNeighbors(y, x);
const isAlive=grid[y][x];
if (isAlive) {
// Survival or Death by Under/Overpopulation
if (neighbors==2) {
newGrid[y][x] = 1;
newAgeGrid[y][x] = newAgeGrid[y][x] + 1; // Increment age
liveCount++;
} else {
newGrid[y][x] = 0;
newAgeGrid[y][x] = 0;
}
} else {
// Reproduction (Birth)
if (neighbors==3) {
newGrid[y][x] = 1;
newAgeGrid[y][x] = 1; // New cell, age 1
liveCount++;
} else {
newAgeGrid[y][x] = 0;
}
}
}
}
grid = newGrid;
ageGrid = newAgeGrid;
return liveCount;
}
function draw() {
ctx.clearRect(0, 0, c.width, c.height);
for (let y=0; y<H; ++y) {
for (let x=0; x<W; ++x) {
if (grid[y][x]) {
const age = ageGrid[y][x];
// Background color is based on age (max 15 generations for smooth visible gradient)
ctx.fillStyle=`hsl(${age * 20 % 360},70%,${Math.min(90, age*8)}%)`;
ctx.fillRect(x*5, y*5, 5, 5);
}
}
}
}
let generation=0;
let lastLiveCount=0;
function step() {
const currentLiveCount = nextState();
generation++;
draw();
document.getElementById('info').innerHTML=`Gen: ${generation} | Live: ${currentLiveCount}`;
// Check for stabilization (population count hasn't changed)
if(currentLiveCount === lastLiveCount && generation > 10) {
console.log("Stabilized. Restarting...");
setTimeout(() => {
init(); // Reset and restart the simulation
}, 500);
}
lastLiveCount = currentLiveCount;
requestAnimationFrame(step);
}
init();
</script></body></html>
``````html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game of Life</title>
<style>body { background: #111; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; flex-direction: column; } canvas { border: 2px solid #555; image-rendering: pixelated; } #stats { color: white; font-family: monospace; margin-top: 10px; }</style>
</head>
<body>
<canvas id="gameCanvas" width="600" height="480"></canvas>
<div id="stats">Generation: 0 | Population: 0</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const W = 120;
const H = 80;
const CELL_SIZE = Math.min(canvas.width, canvas.height) / Math.max(W, H);
let grid = [];
let generation = 0;
let previousGrid = null;
let running = true;
// Setup initial random/seeded grid
function initializeGrid() {
grid = Array(H).fill(0).map(() => Array(W).fill(null));
previousGrid = JSON.parse(JSON.stringify(grid)); // Deep copy for restart check
for (let y = 0; y < H; y++) {
for (let x = 0; x < W; x++) {
// Initialize all cells as dead, age 0
grid[y][x] = { a: false, e: 0 };
}
}
// Seed Patterns (Glider and Blinker)
const seed = (startX, startY, state) => {
if (startX >= 0 && startX < W && startY >= 0 && startY < H) {
grid[startY][startX] = { a: state, e: Math.max(1, grid[startY][startX]?.e || 0) };
}
};
// Glider (x, y offsets relative to top-left corner)
seed(5 * CELL_SIZE + 2, 5 * CELL_SIZE + 3, true);
seed(5 * CELL_SIZE + 3, 5 * CELL_SIZE + 4, true);
seed(5 * CELL_SIZE + 4, 5 * CELL_SIZE + 3, true);
seed(5 * CELL_SIZE + 5, 5 * CELL_SIZE + 4, true);
seed(5 * CELL_SIZE + 6, 5 * CELL_SIZE + 5, true);
// Blinker (Oscillator)
seed(W / 2 - 10, H / 2, true);
seed(W / 2, H / 2, true);
seed(W / 2 + 10, H / 2, true);
// Random Noise (approx 5% density)
for (let y = 0; y < H; y++) {
for (let x = 0; x < W; x++) {
if (Math.random() < 0.03) {
grid[y][x] = { a: true, e: Math.max(1, grid[y][x]?.e || 0) };
}
}
}
// If the initial state was all zero due to overwrite, ensure some cells exist.
if (grid[H/2][W/2] === null) {
grid[Math.floor(H/2)][Math.floor(W/2)] = { a: true, e: 1 };
}
}
// Calculates state for the next generation based on Moore neighborhood rules
function computeNextGeneration() {
let newGrid = Array(H).fill(0).map(() => Array(W).fill(null));
let liveCount = 0;
for (let y = 0; y < H; y++) {
for (let x = 0; x < W; x++) {
let neighbors = 0;
// Check 8 neighbors (compact loop)
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
if (dx === 0 && dy === 0) continue;
const ny = y + dy;
const nx = x + dx;
// Boundary check
if (ny >= 0 && ny < H && nx >= 0 && nx < W) {
if (grid[ny][nx].a) {
neighbors++;
}
}
}
}
let newState = { a: false, e: 0 }; // Default to dead state
if (grid[y][x].a) {
// Rule 1 & 2: Survival
if (neighbors === 2 || neighbors === 3) {
newState.a = true;
newState.e = grid[y][x].e + 1; // Age increases
} else {
// Death by under/overpopulation, age resets to 0 implicitly
}
} else {
// Rule 4: Birth
if (neighbors === 3) {
newState.a = true;
newState.e = 1; // New cell always starts at age 1
}
}
newGrid[y][x] = newState;
if (newState.a) {
liveCount++;
}
}
}
grid = newGrid;
return liveCount;
}
// Drawing function using age-based coloring
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let y = 0; y < H; y++) {
for (let x = 0; x < W; x++) {
const cell = grid[y][x];
if (cell && cell.a) {
// Age coloring logic: Older cells get different colors/brightness
// Use a simple color mapping based on age modulo some value for visible cycling
let hue = (cell.e * 10 % 360); // Cycle through hues
ctx.fillStyle = `hsl(${hue}, 80%, ${Math.min(85, 40 + cell.e*2)}%)`;
ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1);
} else {
// Draw background/dead cells (optional: solid dark pixel)
ctx.fillStyle = '#090909';
ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1);
}
}
}
}
function updateStats(liveCount) {
const statsDiv = document.getElementById('stats');
statsDiv.innerHTML = `Generation: ${generation} | Population: ${liveCount}`;
}
// Main loop
function gameLoop() {
if (!running) return;
let currentLiveCount = 0;
const newPopulationStructure = computeNextGeneration();
currentLiveCount = newPopulationStructure;
draw();
updateStats(currentLiveCount);
generation++;
// Check for stable state (no change in population structure OR zero cells)
let hasChanged = false;
for (let y = 0; y < H; y++) {
for (let x = 0; x < W; x++) {
const current = grid[y][x];
const previous = previousGrid[y][x];
if (current.a !== previous.a) {
hasChanged = true;
break;
}
}
}
// If no structure change AND the population is stable/zero, restart
if (!hasChanged && (currentLiveCount === 0 || currentLiveCount > 0)) {
console.log("Stable state reached or death detected. Restarting...");
running = false; // Stop the recursion temporarily
setTimeout(() => {
initializeGrid();
gameLoop(); // Start over recursively
}, 500);
return;
}
// Update previous grid state for next comparison
for (let y = 0; y < H; y++) {
previousGrid[y] = [...grid[y]];
}
requestAnimationFrame(gameLoop);
}
// Start the simulation
initializeGrid();
gameLoop();
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; }
#canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="canvas" width="1200" height="800"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function random(x) {
return Math.floor(Math.random() * x);
}
function rand() {
return random(256);
}
let grid = [];
for (let i=0; i<80; i++) {
let row = [];
for (let j=0; j<120; j++) {
if (i == 15 && j < [10,30,50][random(3)]) { // glider
row.push(1);
} else if (j == 60) { // oscillator: blinker
row.push(i%4==0 ? 0 : (i==14 || i==16 ? 1 : 0));
} else {
row.push(rand() < 100 ? 1 : 0);
}
}
grid.push(row);
}
let generations = 0;
let liveCount = 0;
function countLiveCells(grid) {
return grid.reduce((count, row) => count + row.filter(cell => cell).length, 0);
}
function drawGrid() {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i=0; i<80; i++) {
for (let j=0; j<120; j++) {
if (grid[i][j]) {
let age = generations - grid[i].indexOf(grid[i][j]);
ctx.fillStyle = `hsl(${age*10 % 256}, 100%, 50%)`;
ctx.fillRect(j * 12, i * 10, 11.5, 9.5);
}
}
}
ctx.font = '16px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(`Generation: ${generations}`, 20, 10);
ctx.fillText(`Live Cells: ${liveCount}`, 20, 30);
}
function countNeighbors(grid, i, j) {
let neighbors = 0;
for (let x=-1; x<=1; x++) {
for (let y=-1; y<=1; y++) {
if ((x || y) && grid[(i + y + 80) % 80][(j + x + 120) % 120]) neighbors++;
}
}
return neighbors;
}
function nextGeneration(grid) {
let newGrid = [];
for (let i=0; i<80; i++) {
let row = [];
for (let j=0; j<120; j++) {
let liveNeighbors = countNeighbors(grid, i, j);
if (grid[i][j] && (liveNeighbors == 2 || liveNeighbors == 3)) row.push(1);
else if (!grid[i][j] && liveNeighbors == 3) row.push(1);
else row.push(0);
}
newGrid.push(row);
}
let newLiveCount = countLiveCells(newGrid);
if (newLiveCount != liveCount) {
grid = newGrid;
liveCount = newLiveCount;
} else {
// reseed when population stops changing
for (let i=0; i<80; i++) {
for (let j=0; j<120; j++) {
if (!grid[i][j]) grid[i][j] = rand() < 100 ? 1 : 0;
}
}
}
return { grid, liveCount };
}
function animate() {
let result = nextGeneration(grid);
grid = result.grid;
liveCount = result.liveCount;
drawGrid();
generations++;
}
(function loop() {
requestAnimationFrame(loop);
animate();
})();
drawGrid();
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html><head><title>Game of Life</title></head><style>body{background:#111;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;color:#fff;font-family:monospace;}canvas{border:2px solid #333;}</style></head><body><canvas id="gameCanvas" width="600" height="480"></canvas><script>
const C = document.getElementById('gameCanvas');
const CTX = C.getContext('2d');
let W = 120, H = 80; // Grid dimensions
let CELL_SIZE = Math.min(600 / W, 480 / H);
// State grids: [age, alive]
let gridA = Array(W).fill(0).map(() => Array(H).fill([1, false]));
let gridB = Array(W).fill(0).map(() => Array(H).fill([1, false]));
let currentGrid, nextGrid;
let generation = 0;
const MAX_AGE = 50; // Max age for color cycling
function initGrids() {
currentGrid = gridA;
nextGrid = gridB;
}
// Helper to get cell state safely (handles boundaries)
function getState(grid, x, y) {
if (x < 0 || x >= W || y < 0 || y >= H) return [1, false];
return grid[x][y];
}
// Initializes the grid with specific patterns and random noise
function seedGrid() {
generation = 0;
for(let i=0; i<W; i++) for(let j=0; j<H; j++) {
currentGrid[i][j] = [1, false];
}
// --- Seed Patterns (Glider and Oscillator) ---
const setCell = (x, y, state) => {
if (x >= 0 && x < W && y >= 0 && y < H) currentGrid[x][y] = [1, state];
};
// Glider: (5, 10), (6, 11), (7, 10), (8, 11), (9, 12)
setCell(5, 10, true); setCell(6, 11, true); setCell(7, 10, true); setCell(8, 11, true); setCell(9, 12, true);
// Oscillator (Blinker): Vertical
setCell(W/3, H/4 - 1, true);
setCell(W/3, H/4, true);
setCell(W/3, H/4 + 1, true);
// Add random noise (approx 5% density)
for(let i=0; i<W; i++) {
for(let j=0; j<H; j++) {
if (Math.random() < 0.05 && !currentGrid[i][j][1]) {
currentGrid[i][j] = [1, true];
}
}
}
}
// Conway's Game of Life rules implementation
function updateGrid() {
let changes = 0;
for(let i=0; i<W; i++) {
for(let j=0; j<H; j++) {
const neighbors = [
getState(currentGrid, i-1, j-1), getState(currentGrid, i, j-1), getState(currentGrid, i+1, j-1),
getState(currentGrid, i-1, j), getState(currentGrid, i+1, j), // Skip (i, j) itself
getState(currentGrid, i-1, j+1), getState(currentGrid, i, j+1), getState(currentGrid, i+1, j+1)
].filter((s, k) => s[1]).length;
const [age, alive] = currentGrid[i][j];
let newAge = 0;
let nextAlive = false;
if (alive && (neighbors < 2 || neighbors > 3)) {
// Rule 1 & 3: Death by under/overpopulation
nextAlive = false;
newAge = 0; // Reset age upon death
} else if (!alive && neighbors === 3) {
// Rule 4: Reproduction
nextAlive = true;
newAge = 1; // Newly born cell starts at age 1
} else if (alive) {
// Rule 2: Survival & Aging
nextAlive = true;
newAge = Math.min(age + 1, MAX_AGE);
}
const [oldAge, oldAlive] = currentGrid[i][j];
if (newAge !== oldAge || nextAlive !== oldAlive) {
changes++;
}
nextGrid[i][j] = [newAge, nextAlive];
}
}
// Swap grids for the next iteration
[currentGrid, nextGrid] = [nextGrid, currentGrid];
return changes;
}
function drawGrid() {
CTX.clearRect(0, 0, C.width, C.height);
for(let i=0; i<W; i++) {
for(let j=0; j<H; j++) {
const [age, alive] = currentGrid[i][j];
if (alive) {
// Color fading based on age/generation count (Hue cycling approximation)
// Use a consistent color palette shifted by age
let hue = (Math.floor((age / MAX_AGE) * 0.6 + Math.sin(generation * 0.1)) * 360 / MAX_AGE) % 360;
let saturation = 80;
let lightness = Math.min(70, 40 + (age / MAX_AGE) * 20);
CTX.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%`;
CTX.fillRect(i * CELL_SIZE, j * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1);
}
}
}
}
function calculateStats() {
let liveCount = 0;
for(let i=0; i<W; i++) {
for(let j=0; j<H; j++) {
if (currentGrid[i][j][1]) liveCount++;
}
}
return liveCount;
}
function loop() {
const changes = updateGrid();
drawGrid();
// Display Stats
let stats = document.getElementById('stats');
if (!stats) {
stats = document.createElement('div');
stats.id = 'stats';
stats.style.marginTop='20px';
document.body.appendChild(stats);
}
const liveCount = calculateStats();
stats.innerHTML = `Gen: ${generation++}<br>Pop: ${liveCount}`;
if (changes > 0) {
requestAnimationFrame(loop);
} else {
// Population stabilized, reseed and restart cycle
setTimeout(() => {
seedGrid();
initGrids(); // Reset pointers for new state
requestAnimationFrame(loop);
}, 1000);
}
}
// Start the simulation
window.onload = () => {
seedGrid();
initGrids();
loop();
};
</script></body></html>
``````html
<!DOCTYPE html>
<html><body style="background:#000;margin:0;display:flex;flex-direction:column;align-items:center;">
<canvas id=c style="border:1px solid #333;"></canvas>
<div id=g>Gen: 0</div>
<div id=l>Live: 0</div>
<script>
const canvas=document.getElementById('c'), ctx=canvas.getContext('2d');
const w=120,h=80; canvas.width=w*6; canvas.height=h*6;
let grid=[],next=[],age=[],stats={gen:0, live:0};
const colors=[];
class Cell{alive,r,g,b,a,age,colorUpdate(){this.r=(Math.sin(this.age/3.14)+1)*255;this.g=Math.pow(1 - Math.abs(this.age%720-360)/360,.5)*255;
this.b=255/(this.age%180/2+1);return `rgba(${Math.floor(this.r)},${Math.floor(this.g)},${Math.floor(this.b)},${this.a})`};}
function init(){grid=new Array(w).fill().map(()=>new Array(h).fill());next=new Array(w).fill().map(()=>new Array(h).fill());
age=new Array(w).fill().map(()=>new Array(h).fill(0));colors=new Array(w).fill().map(()=>new Array(h).fill());}
function seed(){stats={gen:0,live:0};clearInterval(interval);location.reload();}
let interval;
function drawGrid(){
for(let x=0;x<w;x++)for(let y=0;y<h;y++){
if(grid[x][y].alive){
age[x][y]++;
const c=new Cell; c.alive=true;c.age=age[x][y];c.colorUpdate();
colors[x][y]=c;
ctx.fillStyle=c.color;ctx.fillRect(x*6,y*6,5,5);
}else{
ctx.clearRect(x*6,y*6,5,5);colors[x][y]=undefined;age[x][y]=0
}
}
}
function updateGrid(){
for(let x=0;x<w;x++)for(let y=0;y<h;y++){
let neighbors=0;
for(let dx=-1;dx<=1;dx)for(let dy=-1;dy<=1;dy){
if(x+dx>=0&&x+dx<w&&y+dy>=0&&y+dy<h&&(dx!=0||dy!=0))neighbors+=grid[x+dx][y+dy].alive?1:0;
}
next[x][y]=grid[x][y].alive?(neighbors==2||neighbors==3):(!grid[x][y].alive&&neighbors==3);
}
}
function initGrid(){
for(let y=0;y<h;y++)for(let x=0;x<w;x++)grid[x][y]=new Cell;next=JSON.parse(JSON.stringify(grid));
}
let generation=0,liveCount=0;
function animate(){
updateGrid();liveCount=sum();
if(!equal())generation++,stats.gen=generation,stats.live=liveCount;
drawGrid();
requestAnimationFrame(animate);
}
function sum(){let s=0;for(let x=0;x<w;x++)for(let y=0;y<h;y++)s+=grid[x][y].alive?1:0;return s;}
function equal(){return JSON.stringify(grid)==JSON.stringify(next);}
function drawGlider(x,y){
grid[x][y]=true;grid[x+2][y]=true;grid[x-1][y+1]=true;
grid[x+1][y+1]=true;grid[x+2][y+1]=true;
}
function drawOscillator(x,y){
grid[x][y]=true;grid[x][y+1]=true;grid[x][y+2]=true;
}
function random(min,max){return Math.floor(Math.random()*(max-min)+min);}
function initSim(){
for(let y=0;y<15;y++)for(let x=0;x<15;x++)if(random(0,2))grid[x][y].alive=true;
drawGlider(3,4);drawOscillator(6,4);
for(let y=0;y<h;y++)for(let x=0;x<w;x++)if(!grid[x][y].alive && random(0,10)<5)grid[x][y].alive=true;
}
function setup(){
init();
initGrid();initSim();
let lastGen=-1;
function loop(){
updateGrid();drawGrid();
if(generation%2==0){
liveCount=sum();document.getElementById('g').textContent=`Gen: ${generation}`;
document.getElementById('l').textContent=`Live: ${liveCount}`;
}
if(liveCount==lastGen && generation>50)seed();
lastGen=liveCount;
requestAnimationFrame(loop);
}
loop();
}
window.onload=function(){setup();}
</script>
</body></html>
``````html
<!DOCTYPE html>
<html>
<head><title>Conway's Game of Life</title></head>
<body onload="start()">
<canvas id="game" width="1200" height="800"></canvas>
<script>
let canvas = document.getElementById('game');
let ctx = canvas.getContext('2d');
let width = 120, height = 80;
let grid = Array.from({length: height}, () => Array(width).fill(0));
let nextGrid = Array.from({length: height}, () => Array(width).fill(0));
let generation = 0;
let aliveCount = 0;
const colors = ['#FFFFFF', '#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#8B4513'];
function start() {
seed();
drawGrid();
requestAnimationFrame(update);
}
function seed() {
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
grid[y][x] = Math.random() < 0.25 ? 1 : 0;
}
}
grid[1][2] = grid[2][3] = grid[3][1] = grid[3][2] = grid[3][3] = 1; // Glider
grid[5][5] = grid[5][6] = grid[6][5] = grid[6][6] = 1; // Blinker oscillator
}
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let colorIndex = grid[y][x];
if (colorIndex > colors.length - 1) colorIndex = colors.length - 1;
ctx.fillStyle = colors[colorIndex];
ctx.fillRect(x * 10, y * 10, 9.5, 9.5);
}
}
}
function update() {
let hasChanged = false;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let neighbors = countNeighbors(x, y);
if (grid[y][x] === 1 && (neighbors < 2 || neighbors > 3)) nextGrid[y][x] = 0;
else if (grid[y][x] === 0 && neighbors === 3) nextGrid[y][x] = 1;
else nextGrid[y][x] = grid[y][x];
}
}
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (nextGrid[y][x] !== grid[y][x]) hasChanged = true;
if(nextGrid[y][x] === 1) nextGrid[y][x]++;
}
}
if (!hasChanged) {
seed();
} else {
[grid, nextGrid] = [nextGrid, grid];
generation++;
aliveCount = countAliveCells(grid);
}
drawGrid();
requestAnimationFrame(update);
}
function countNeighbors(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;
let col = (x + i + width) % width;
let row = (y + j + height) % height;
sum += grid[row][col];
}
}
return sum;
}
function countAliveCells(grid) {
return grid.flat().reduce((acc, val) => acc + (val > 0 ? 1 : 0), 0);
}
document.body.appendChild(document.createElement('div')).innerHTML = `Generation: ${generation} Alive Cells: ${aliveCount}`;
</script>
</body>
</html>
``````html
<!DOCTYPE html><html><body style="background:#000;margin:0;display:flex;justify-content:center;align-items:center;height:100vh"><canvas id=c width=600 height=400></canvas><script>
const c=document.getElementById('c'),ctx=c.getContext('2d');let w=120,h=80,sz=5,gen=0,live=0;let grid=[],next=[];class Color{constructor(age){this.hue=(age%60)/60*360;this.alpha=Math.min(1,age/50);}}function init(){grid=new Array(w).fill().map(()=>new Array(h).fill(0));for(let y=0;y<h;y++)for(let x=0;x<w;x++){if(Math.random()<0.02||near(x,y,[[50,30],[51,30],[52,30],[51,29],[51,31]]))grid[x][y]=gen;}}function near(x,y,pattern){return pattern.some(([a,b])=>x==a&&y==b);function count(x,y){let sum=0;if(x>0&&y>0)sum+=grid[x-1][y-1];if(y>0)sum+=grid[x][y-1];if(x<w-1&&y>0)sum+=grid[x+1][y-1];if(x>0)sum+=grid[x-1][y];if(x<w-1)sum+=grid[x+1][y];if(x>0&&y<h-1)sum+=grid[x-1][y+1];if(y<h-1)sum+=grid[x][y+1];if(x<w-1&&y<h-1)sum+=grid[x+1][y+1];return sum;}function update(){next=new Array(w).fill().map(()=>new Array(h).fill(0));live=0;for(let y=0;y<h;y++)for(let x=0;x<w;x++){let neighbors=count(x,y);if(grid[x][y]){if(neighbors==2||neighbors==3)next[x][y]=gen+1}else if(neighbors==3)next[x][y]=gen+1;if(next[x][y])live++;}grid=next;gen++;ctx.fillStyle='#0F';ctx.fillRect(0,0,c.width,c.height);for(let y=0;y<h;y++)for(let x=0;x<w;x++){if(grid[x][y]){let c=new Color(grid[x][y]);ctx.fillStyle=`hsla(${c.hue},100%,50%,${c.alpha})`;ctx.fillRect(x*sz,y*sz,sz-1,sz-1);}}ctx.strokeStyle='#FFF';ctx.lineWidth=1;for(let y=0;y<=h;y++)ctx.strokeRect(0,y*sz,c.width,1);for(let x=0;x<=w;x++)ctx.strokeRect(x*sz,0,1,c.height);ctx.fillStyle='#FFF';ctx.font='20px monospace';ctx.fillText(`Gen: ${gen}`,10,30);ctx.fillText(`Live: ${live}`,10,60);}let lastLive=-1;function animate(){if(live==lastLive&&gen>1){init();return}lastLive=live;requestAnimationFrame(animate);update()}init();animate();
</script></body></html>
```<think>
Okay, the user wants me to create a self-contained HTML file for Conway's Game of Life. Let me break down the requirements. First, it has to be strict within 7000 characters. I need to make sure I don't go over that.
The grid is 120x80. That's a bit large, but manageable. The canvas needs to draw this grid. The color should indicate how long cells have been alive, so I need to track the age of each cell. Maybe store an array of ages where each cell has an age value that increments each generation if it's alive.
Seeding with at least a glider and an oscillator plus random noise. Let's think about known patterns. A glider is 3x3 cells, so I can place that somewhere. For an oscillator, maybe a blinker (3 live cells in a line) or a beacon. Let's include a glider and a beacon for stability. The random noise can be added by initializing some cells randomly.
The live-cell count and generation number should be displayed. I'll need to update a text element on the canvas each frame. Also, when the population stops changing (stabilized), reseed with a new random instance. So I need to track the previous state and detect if nothing has changed for a few generations, then reset.
Using requestAnimationFrame for smooth animation. No user input, so it starts automatically. The restart should happen when the system stabilizes.
Starting with the HTML structure: a canvas element with id='g', and a script that initializes everything. The canvas size needs to fit 120x80 cells. Let's see, maybe set the width and height attributes to 120 and 80 pixels, but then scale it up using CSS or the context to make it visible. Wait, but scaling via context might be better.
Wait, in the script, I can get the canvas context and set the scale so each cell is a pixel? No, because 120x80 at 1x1 pixels would be small. Alternatively, maybe set the canvas to 120x80 and then in CSS, set it to a larger size with image-rendering: pixelated to prevent blurring. Hmm, but maybe better to set the canvas size to a multiple of the grid. For example, each cell is 5x5 pixels. So the canvas width would be 120*5 = 600px and height 80*5 = 400px. That way, the cells are visible. Let me note that.
Wait, but the user didn't specify the size, just a grid of 120x80. The canvas can be set to 120x80, then in the script, when drawing, each cell is represented as a pixel. That way, it's 120x80 pixels. To make it visible, maybe use CSS to set the width and height to a larger size and use image smoothing off. For example:
canvas {
image-rendering: pixelated;
width: 600px;
height: 400px;
}
But I'll have to check how that works.
Alternatively, in the canvas context, set the transform scale. Let's see:
const scale = 5;
ctx.scale(scale, scale);
But that would require adjusting the canvas dimensions. Hmm, perhaps better to set the canvas element's width and height to the grid size, and then use CSS to scale it up. But then the canvas's coordinate system is 120x80, so each pixel is a cell.
But for drawing, maybe using fillRect(0,0,1,1) for each cell. Wait, but how to track the age? Each cell's age is stored in an array. So the grid is 120 columns by 80 rows.
Now, the data structures: I need two grids, current and next, or a single grid with a buffer. To make it efficient, perhaps two arrays, current and next. But since each cell has an age, maybe an array of arrays. Let's say an array of rows: grid = new Array(120).fill().map(() => Array(80).fill(0)), but initialized with 0. Wait, but for age, 0 would mean dead, and a positive number for alive. Or maybe separate arrays for alive and age? Hmm, perhaps a 2D array where each cell is an object with alive and age properties, but that might be memory-heavy. Alternatively, have a grid of ages, and 0 is dead, and positive numbers are alive. So alive is whether the age is greater than 0. Then when a cell is born, its age is set to 1, and each generation if it's alive, its age increments. But when it dies, age resets to 0.
Wait, but in Conway's rules, a cell is born if exactly 3 neighbors are alive, and survives if 2 or 3. So to track age, each alive cell's age increases by 1 each generation, unless it dies, then it resets. So the age array can be a 2D array, same size as the grid. So grid is 120 columns and 80 rows, perhaps? Wait, in JavaScript, usually it's rows and columns. Let me think of it as rows first.
Wait, the grid is 120x80. Let me define it as grid = new Array(120).fill(0).map(() => new Array(80).fill(0)), but that would be columns x rows? Or rows x columns? Let's see, for each cell at (x,y), maybe grid[x][y]. Hmm, that might be okay.
Now, the initial seeding. We need a glider. The glider's pattern is:
3 cells in a 3x3 grid like:
0 1 0
0 0 1
1 1 1
Wait, actually, the standard glider is:
live cells at (0,1), (1,2), (2,0), (2,1), (2,2). So arranged in a 3x3 square. Let's place that somewhere. Let's say at position (10,10) in the grid.
Then, an oscillator, like a beacon. Beacon is two 2x2 blocks separated by a space. Let's place that at (50, 20).
Plus random noise: iterate through the grid and set each cell to a random 0 or 1 with a low probability (like 20%).
But for the age, when seeding, we have to set the age to 1 for alive cells. Wait, but when initializing, alive cells get age 1, and then each generation, if they stay alive, their age increases.
Now, in the animation loop, each frame:
1. Calculate the next generation based on current grid.
2. Update the age array: for each cell, if it's alive in the next generation, age increases by 1. If it's dead, age is 0.
Wait, no, the age should only increment when the cell is alive. So:
The next age for each cell is:
if (next cell is alive) then age = current age + 1 (if it was alive in previous generation?), or is it next age = previous age +1? Wait, no. Because when a cell is born (i.e., it was dead before), its age should be set to 1. Hmm, right. So<!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 {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222; /* Dark background */
font-family: monospace;
color: white;
}
canvas {
border: 4px solid black;
image-rendering: crisp-edges; /* For pixelated look */
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="120" height="80"></canvas>
<div class="stats">
Generation: <span id="generation">0</span><br>
Live Cells: <span id="liveCells">0</span>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let gridSize = 6;
let cellSize = Math.floor(Math.min(canvas.width, canvas.height) / gridSize); // Auto-adjust size for a better fit
if (cellSize < 5) {
alert("Resize the window or use a larger screen to play.");
return;
}
const gridWidth = canvas.width / cellSize;
const gridHeight = canvas.height / cellSize;
let generation = 0; // Current generation number
const maxGenerations = Infinity; // No limit by default, set this to a finite value if desired
let liveCells = 0;
// Color palette for cells based on age (generation)
const colorPalette = ["#9f46ff", "#7328db", "#4c1a9b"];
function getCellColor(cellAge) {
return cellAge > colorPalette.length ? '#d6e5fa' : colorPalette[Math.min(colorPalette.length - 1, cellAge)];
}
// The 2D grid of cells that holds the current state and next state during evolution
let currentState = createGrid();
let nextState = createGrid();
function createGrid() {
const grid = [];
for (let y = 0; y < gridHeight; y++) {
grid[y] = [];
for (let x = 0; x < gridWidth; x++) {
grid[y][x] = false;
}
}
return grid;
}
// Initialize the game with random noise and known patterns
function initGame() {
currentState = createGrid();
nextState = createGrid();
let gliderX = Math.floor(Math.random() * (gridWidth - 2)) + 1;
let gliderY = Math.floor(Math.random() * (gridHeight - 3)) + 1;
placeGlider(gliderX, gliderY);
let oscillatorX = Math.floor(Math.random() * (gridWidth - 4)) + 1;
let oscillatorY = Math.floor(Math.random() * (gridHeight - 2)) + 1;
placeOscillator(oscillatorX, oscillatorY);
// Add random noise
for (let y = 0; y < gridHeight; y++) {
for (let x = 0; x < gridWidth; x++) {
if (Math.random() < 0.3) {
placeCell(x, y);
}
}
}
}
// Place a cell at the given coordinates in the current state grid
function placeCell(x, y) {
currentState[y][x] = true;
liveCells++;
}
// Remove all cells from the 2D array (grid)
function clearGrid() {
for (let y = 0; y < gridHeight; y++) {
for (let x = 0; x < gridWidth; x++) {
currentState[y][x] = false;
}
}
liveCells = 0;
}
// Place a glider at the given coordinates
function placeGlider(x, y) {
placeCell(x + 1, y - 2);
placeCell(x, y - 1);
placeCell(x + 1, y - 1);
placeCell(x + 2, y);
placeCell(x + 1, y + 1);
}
// Place an oscillator at the given coordinates
function placeOscillator(x, y) {
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 2; j++) {
currentState[y + j][x + i] = true;
}
liveCells++; // Count the live cells in the oscillator pattern
}
}
function getNeighbors(x, y) {
let neighbors = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
if (!(i === 0 && j === 0)) { // Skip the current cell
const nx = x + i;
const ny = y + j;
if (nx >= 0 && nx < gridWidth && ny >= 0 && ny < gridHeight) {
neighbors += currentState[ny][nx] ? 1 : 0;
}
}
}
}
return neighbors;
}
function evolve() {
for (let y = 0; y < gridHeight; y++) {
for (let x = 0; x < gridWidth; x++) {
let cellAge = currentState[y][x] ? generation : 0;
const neighbors = getNeighbors(x, y);
if ((currentState[y][x] && (neighbors === 2 || neighbors === 3)) || (!currentState[y][x] && neighbors === 3)) {
nextState[y][x] = true;
cellAge++;
} else {
nextState[y][x] = false;
}
// Update live cells count
if (nextState[y][x]) liveCells++; // New live cell, increment the count
}
}
let stateChanged = false;
for (let y = 0; y < gridHeight && !stateChanged; y++) {
for (let x = 0; x < gridWidth; x++) {
if (nextState[y][x] !== currentState[y][x]) {
// States differ, we will evolve to the next generation
stateChanged = true;
break;
}
}
}
if (!stateChanged) {
console.log("Game stabilized after", generation, "generations.");
clearGrid();
initGame();
} else {
[currentState, nextState] = [nextState, currentState];
generation++; // Move to the next generation
document.getElementById('generation').textContent = generation; // Update generation counter
document.getElementById('liveCells').textContent = liveCells; // Update live<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Conway's Game of Life</title>
<style>
html,body{height:100%}
body{margin:0;background:#05070d;color:#8ea6c8;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:100vh}
canvas{display:block;width:min(95vw,960px);height:auto;border:1px solid #17263f;border-radius:6px;box-shadow:0 0 60px #071427}
#hud{display:flex;flex-wrap:wrap;gap:20px;letter-spacing:.14em;text-transform:uppercase}
b{color:#7fe6ff;font-weight:600}
</style></head><body>
<canvas id="c" width="960" height="640"></canvas>
<div id="hud"><span>Life · 120×80 torus</span><span>gen <b id="G">0</b></span><span>alive <b id="P">0</b></span><span>run <b id="R">1</b></span></div>
<script>
const W=120,H=80,S=8,N=W*H,x=document.getElementById('c').getContext('2d');
let g=new Uint8Array(N),n=new Uint8Array(N),age=new Int16Array(N),tr=new Int8Array(N),p1=new Uint8Array(N),p2=new Uint8Array(N);
let gen=0,pop=0,stall=0,run=1;
const CA=[],CT=[];
for(let i=0;i<48;i++){const t=i/47;CA.push('hsl('+(188-t*158)+','+(94-t*26)+'%,'+(70-t*22)+'%)')}
for(let i=0;i<7;i++)CT.push('rgba(74,138,255,'+(0.3*(7-i)/7).toFixed(3)+')');
const I=(c,r)=>((r%H)+H)%H*W+(((c%W)+W)%W);
const PT={
gl:[[1,0],[2,1],[0,2],[1,2],[2,2]],
lw:[[0,0],[3,0],[4,1],[0,2],[4,2],[1,3],[2,3],[3,3],[4,3]],
bl:[[0,0],[1,0],[2,0]],
td:[[1,0],[2,0],[3,0],[0,1],[1,1],[2,1]],
bc:[[0,0],[1,0],[0,1],[1,1],[2,2],[3,2],[2,3],[3,3]],
pd:[[0,1],[1,1],[2,0],[2,2],[3,1],[4,1],[5,1],[6,1],[7,0],[7,2],[8,1],[9,1]],
rp:[[1,0],[2,0],[0,1],[1,1],[1,2]]};
function place(p,c,r){let mw=0,mh=0;for(const q of p){if(q[0]>mw)mw=q[0];if(q[1]>mh)mh=q[1]}
for(let j=-2;j<=mh+2;j++)for(let i=-2;i<=mw+2;i++)g[I(c+i,r+j)]=0;
for(const q of p)g[I(c+q[0],r+q[1])]=1}
function seed(){
g.fill(0);n.fill(0);age.fill(0);tr.fill(0);p1.fill(0);p2.fill(0);gen=0;stall=0;
const d=0.12+Math.random()*0.1;
for(let i=0;i<N;i++)if(Math.random()<d)g[i]=1;
place(PT.gl,4,4);place(PT.gl,W-16,6);place(PT.gl,10,H-14);
place(PT.lw,6,H-8);
place(PT.bl,30,20);place(PT.bl,W-30,H-22);
place(PT.td,58,12);place(PT.bc,90,54);
place(PT.pd,44,H>>1);
place(PT.rp,20+((Math.random()*70)|0),24+((Math.random()*30)|0));
count()}
function count(){pop=0;for(let i=0;i<N;i++)if(g[i])pop++}
function step(){
for(let r=0;r<H;r++){const u=(r?r-1:H-1)*W,m=r*W,dn=(r+1<H?r+1:0)*W;
for(let c=0;c<W;c++){const l=c?c-1:W-1,e=c+1<W?c+1:0;
const k=g[u+l]+g[u+c]+g[u+e]+g[m+l]+g[m+e]+g[dn+l]+g[dn+c]+g[dn+e];
n[m+c]=(k===3||(k===2&&g[m+c]))?1:0}}
p2.set(p1);p1.set(g);const t=g;g=n;n=t;
pop=0;
for(let i=0;i<N;i++){if(g[i]){pop++;if(age[i]<9999)age[i]++;tr[i]=0}
else if(age[i]){age[i]=0;tr[i]=7}
else if(tr[i]>0)tr[i]--}
stall=(eq(g,p1)||eq(g,p2))?stall+1:0;gen++}
function eq(a,b){for(let i=0;i<N;i++)if(a[i]!==b[i])return 0;return 1}
function draw(){
x.fillStyle='#05070d';x.fillRect(0,0,960,640);
for(let r=0,i=0;r<H;r++)for(let c=0;c<W;c++,i++){
if(g[i]){x.fillStyle=CA[age[i]<1?0:age[i]<48?age[i]-1:47];x.fillRect(c*S,r*S,S-1,S-1)}
else if(tr[i]>0){x.fillStyle=CT[7-tr[i]];x.fillRect(c*S+2,r*S+2,S-4,S-4)}}}
const G=document.getElementById('G'),P=document.getElementById('P'),R=document.getElementById('R');
let last=0,acc=0;
function frame(t){requestAnimationFrame(frame);
if(!last)last=t;acc+=t-last;last=t;if(acc<52)return;acc=0;
step();draw();
G.textContent=gen;P.textContent=pop;R.textContent=run;
if(!pop||stall>24||gen>2600){run++;seed();draw()}}
seed();draw();requestAnimationFrame(frame);
</script></body></html><!doctype html><html><head><meta charset=utf-8><title>Life</title><style>html,body{margin:0;height:100%;background:#071014;color:#d9f7ef;font:16px system-ui;overflow:hidden}body{display:grid;place-items:center}main{width:min(96vw,1200px)}canvas{width:100%;image-rendering:pixelated;background:#020405;border:1px solid #2b4a48}p{margin:.7rem 0 0;display:flex;gap:2rem}</style></head><body><main><canvas id=c width=120 height=80></canvas><p><span>Generation <b id=g>0</b></span><span>Live cells <b id=l>0</b></span></p></main><script>
const W=120,H=80,N=W*H,c=document.getElementById("c"),x=c.getContext("2d"),g=document.getElementById("g"),l=document.getElementById("l"),img=x.createImageData(W,H);let a=new Uint8Array(N),b=new Uint8Array(N),age=new Uint16Array(N),gen=0,last=-1,same=0,t=0;
function on(q,r){if(q>=0&&q<W&&r>=0&&r<H)a[r*W+q]=1}
function pat(q,r,p){p.forEach((row,y)=>[...row].forEach((v,z)=>v>"."&&on(q+z,r+y)))}
function seed(){a.fill(0);b.fill(0);age.fill(0);gen=same=0;last=-1;pat(5,5,[".O.","..O","OOO"]);pat(34,18,["OOO"]);pat(70,48,[".OO","OO.",".O."]);pat(94,16,[".OOO","OOO."]);for(let i=0;i<N;i++)if(Math.random()<.12)a[i]=1}
function step(){let live=0;for(let y=0;y<H;y++)for(let z=0;z<W;z++){let n=0;for(let dy=-1;dy<2;dy++)for(let dx=-1;dx<2;dx++)if(dx||dy){let xx=(z+dx+W)%W,yy=(y+dy+H)%H;n+=a[yy*W+xx]}let i=y*W+z,v=n==3||a[i]&&n==2;b[i]=v;if(v){live++;age[i]=age[i]+1}else age[i]=0}let q=a;a=b;b=q;gen++;same=live==last?same+1:0;last=live;if(!live||same>90)seed();return live}
function draw(live){for(let i=0,j=0;i<N;i++,j+=4){let h=Math.min(age[i],60),v=age[i]?80+h*3:3;img.data[j]=age[i]?Math.min(255,h*4):2;img.data[j+1]=v;img.data[j+2]=age[i]?120+h*2:5;img.data[j+3]=255}x.putImageData(img,0,0);g.textContent=gen;l.textContent=live}
function loop(e){if(e-t>70){draw(step());t=e}requestAnimationFrame(loop)}
seed();requestAnimationFrame(loop);
</script></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>Life</title>
<style>html,body{margin:0;background:#04060a;overflow:hidden;height:100%}canvas{display:block}
#h{position:fixed;top:8px;left:10px;color:#9fe;font:14px monospace;text-shadow:0 0 4px #000}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
const GW=120,GH=80;
let W,H,cell;
function rz(){W=cv.width=innerWidth;H=cv.height=innerHeight;cell=Math.min(W/GW,H/GH);}
rz();addEventListener('resize',rz);
let grid,age,gen,stable,lastCount;
function idx(x,y){return y*GW+x;}
function place(px,py,pattern){
for(const [dx,dy] of pattern){
const gx=(px+dx+GW)%GW,gy=(py+dy+GH)%GH;
grid[idx(gx,gy)]=1;
}
}
const GLIDER=[[0,1],[1,2],[2,0],[2,1],[2,2]];
const OSC=[[0,0],[1,0],[2,0]];
function init(){
grid=new Uint8Array(GW*GH);
age=new Uint16Array(GW*GH);
place(10,10,GLIDER);
place(60,40,GLIDER);
place(30,60,OSC);
place(90,15,OSC);
place(50,10,[[0,0],[0,1],[0,2],[1,-1],[2,0]]);
for(let i=0;i<GW*GH;i++){
if(Math.random()<0.1)grid[i]=1;
}
gen=0;stable=0;lastCount=-1;
}
init();
function step(){
const next=new Uint8Array(GW*GH);
for(let y=0;y<GH;y++){
for(let xx=0;xx<GW;xx++){
let n=0;
for(let dy=-1;dy<=1;dy++)for(let dx=-1;dx<=1;dx++){
if(dx===0&&dy===0)continue;
const nx=(xx+dx+GW)%GW,ny=(y+dy+GH)%GH;
n+=grid[idx(nx,ny)];
}
const cur=grid[idx(xx,y)];
const alive=cur?(n===2||n===3):(n===3);
next[idx(xx,y)]=alive?1:0;
}
}
let count=0;
for(let i=0;i<GW*GH;i++){
if(next[i]){count++;age[i]=grid[i]?Math.min(age[i]+1,255):1;}
else age[i]=0;
}
grid=next;gen++;
if(count===lastCount)stable++;else stable=0;
lastCount=count;
return count;
}
function colorFor(a){
if(a<=1)return '#eafcff';
if(a<6){const t=(a-1)/5;return `rgb(${120-t*60},${220-t*40},255)`;}
if(a<20){const t=(a-6)/14;return `rgb(${60+t*140},${180-t*100},${195-t*140})`;}
return `rgb(${200+Math.min(a-20,40)},${90},60)`;
}
function draw(count){
x.fillStyle='#04060a';x.fillRect(0,0,W,H);
const ox=(W-GW*cell)/2,oy=(H-GH*cell)/2;
for(let y=0;y<GH;y++)for(let xx=0;xx<GW;xx++){
const a=age[idx(xx,y)];
if(a>0){
x.fillStyle=colorFor(a);
x.fillRect(ox+xx*cell,oy+y*cell,cell-0.4,cell-0.4);
}
}
document.getElementById('h').textContent=
`generation: ${gen} live cells: ${count}`;
}
function loop(){
const count=step();
draw(count);
if(stable>25)init();
requestAnimationFrame(loop);
}
loop();
</script></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><style>body{margin:0;background:#000;overflow:hidden}#c{display:block}#i{position:absolute;top:5px;left:5px;color:#0f0;font-family:monospace;font-size:12px}</style></head><body><canvas id="c"></canvas><div id="i"></div><script>const W=120,H=80,S=6;const c=document.getElementById('c'),ctx=c.getContext('2d'),i=document.getElementById('i');c.width=W*S;c.height=H*S;let s=new Uint8Array(W*H),a=new Uint8Array(W*H),g=0;function sd(){s.fill(0);a.fill(0);g=0;const p=[[1,0],[2,1],[0,2],[1,2],[2,2]];p.forEach(([x,y])=>{let idx=(y+5)*W+(x+5);if(idx>=0&&idx<W*H)s[idx]=1});[[30,30],[31,30],[32,30]].forEach(([x,y])=>{let idx=y*W+x;if(idx>=0&&idx<W*H)s[idx]=1});for(let i=0;i<W*H/8;i++){let idx=Math.floor(Math.random()*W*H);s[idx]=1}}function st(){let n=new Uint8Array(W*H);let ch=false;for(let y=0;y<H;y++){for(let x=0;x<W;x++){let idx=y*W+x;let nc=0;for(let dy=-1;dy<=1;dy++){for(let dx=-1;dx<=1;dx++){if(dx===0&&dy===0)continue;let ny=(y+dy+H)%H;let nx=(x+dx+W)%W;if(s[ny*W+nx])nc++}}if(s[idx]){if(nc===2||nc===3){n[idx]=1;a[idx]++;}}else{if(nc===3){n[idx]=1;a[idx]=1}}if(n[idx]!==s[idx])ch=true}}if(!ch)sd();else s=n;g++}function dr(){ctx.fillStyle='#000';ctx.fillRect(0,0,c.width,c.height);let l=0;for(let j=0;j<W*H;j++){if(s[j]){l++;let y=Math.floor(j/W),x=j%W;let v=Math.min(255,a[j]*20);ctx.fillStyle=`rgb(0,${v},0)`;ctx.fillRect(x*S,y*S,S-1,S-1)}}i.textContent=`Gen: ${g} Live: ${l}`}sd();function f(){st();dr();requestAnimationFrame(f)}f();</script></body></html>| Model | Blind score | Latency | Status |
|---|---|---|---|
| gemma4:26b | — | — | harness |
| qwen3-coder:30b | — | 23.8 s | OK |
| qwen3:14b | — | 44.5 s | OK |
| qwen3:8b | — | — | harness |
| llama3.1:8b | — | 46.8 s | OK |
| qwen3.5:9b | — | 59.9 s | OK |
| deepseek-r1:14b | — | 54.5 s | OK |
| mistral-small:24b | — | 114.8 s | OK |
| deepseek-r1:32b | — | 142.2 s | OK |
| qwq:32b | — | 141.2 s | OK |
| command-r:35b | — | 153.9 s | OK |