diff --git a/index.html b/index.html
index 49e88ce..5595d1c 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
- 2-3Living cells stay alive when they have two or three neighbors nearby.
@@ -36,13 +36,13 @@
-
Tip: pause the universe, draw a few cells, then press play. The board wraps around at the edges like a donut-shaped planet.
+
Tip: pause the universe, drag across the grid to draw a shape, then press play. The board wraps around at the edges like a donut-shaped planet.
@@ -55,7 +55,7 @@
-
+
diff --git a/script.js b/script.js
index a46711a..ab72ae8 100644
--- a/script.js
+++ b/script.js
@@ -10,6 +10,9 @@ let births = 0;
let deaths = 0;
let timer = null;
let speed = 8;
+let drawing = false;
+let drawValue = 1;
+let lastPaintedCell = null;
const themeTokens = {
sprout: ['oklch(58% 0.16 145)', 'oklch(72% 0.14 170)'],
@@ -31,20 +34,43 @@ function randomize(chance = 0.28) {
draw();
}
-function sparkles() {
+function fireworks() {
grid = makeGrid();
const centerX = Math.floor(cols / 2);
const centerY = Math.floor(rows / 2);
- const points = [[0,0], [1,0], [-1,0], [0,1], [0,-1], [2,1], [-2,-1], [4,0], [4,1], [4,-1], [-4,0], [-4,1], [-4,-1], [7,2], [8,2], [7,3], [8,3]];
- points.forEach(([x, y]) => { grid[centerY + y][centerX + x] = 1; });
+ const gliderGun = [
+ [0,4], [1,4], [0,5], [1,5],
+ [10,4], [10,5], [10,6], [11,3], [11,7], [12,2], [12,8], [13,2], [13,8], [14,5], [15,3], [15,7], [16,4], [16,5], [16,6], [17,5],
+ [20,2], [20,3], [20,4], [21,2], [21,3], [21,4], [22,1], [22,5], [24,0], [24,1], [24,5], [24,6],
+ [34,2], [35,2], [34,3], [35,3]
+ ];
+ const pulsar = [
+ [2,0], [3,0], [4,0], [8,0], [9,0], [10,0], [0,2], [5,2], [7,2], [12,2], [0,3], [5,3], [7,3], [12,3], [0,4], [5,4], [7,4], [12,4], [2,5], [3,5], [4,5], [8,5], [9,5], [10,5],
+ [2,7], [3,7], [4,7], [8,7], [9,7], [10,7], [0,8], [5,8], [7,8], [12,8], [0,9], [5,9], [7,9], [12,9], [0,10], [5,10], [7,10], [12,10], [2,12], [3,12], [4,12], [8,12], [9,12], [10,12]
+ ];
+ const blinkers = [[0,0], [1,0], [2,0]];
+ addPattern(gliderGun, centerX - 18, centerY - 22);
+ addPattern(pulsar, centerX - 6, centerY + 8);
+ addPattern(blinkers, centerX - 28, centerY + 16);
+ addPattern(blinkers, centerX + 24, centerY + 16);
generation = 0;
births = 0;
deaths = 0;
- updateLesson('Sparkles loaded. Step slowly and look for parts that blink while other parts float away.');
+ updateLesson('Fireworks loaded. Press Play and watch the launcher keep sending tiny spaceships across the board.');
updateStats();
draw();
}
+function addPattern(points, originX, originY) {
+ points.forEach(([x, y]) => {
+ const gridX = originX + x;
+ const gridY = originY + y;
+ if (gridX >= 0 && gridX < cols && gridY >= 0 && gridY < rows) {
+ grid[gridY][gridX] = 1;
+ }
+ });
+}
+
function neighbors(x, y) {
let total = 0;
for (let dy = -1; dy <= 1; dy++) {
@@ -167,28 +193,68 @@ function setTheme(name) {
draw();
}
-canvas.addEventListener('pointerdown', event => {
- pause();
+function cellFromPointer(event) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const x = Math.floor((event.clientX - rect.left) * scaleX / cellSize);
const y = Math.floor((event.clientY - rect.top) * scaleY / cellSize);
- if (x >= 0 && x < cols && y >= 0 && y < rows) {
- grid[y][x] = grid[y][x] ? 0 : 1;
- births = 0;
- deaths = 0;
- updateLesson('You drew on the board. Press Step once to test your prediction before running it fast.');
- updateStats();
- draw();
- }
+ if (x < 0 || x >= cols || y < 0 || y >= rows) return null;
+ return { x, y };
+}
+
+function paintCell(event) {
+ const cell = cellFromPointer(event);
+ if (!cell) return;
+ const key = `${cell.x},${cell.y}`;
+ if (key === lastPaintedCell || grid[cell.y][cell.x] === drawValue) return;
+ lastPaintedCell = key;
+ grid[cell.y][cell.x] = drawValue;
+ births = 0;
+ deaths = 0;
+ updateLesson(drawValue ? 'You are painting a shape. Release, then press Step once to test your prediction.' : 'You are erasing cells. Release, then redraw any shape you want to test.');
+ updateStats();
+ draw();
+}
+
+function stopDrawing() {
+ drawing = false;
+ lastPaintedCell = null;
+}
+
+canvas.addEventListener('pointerdown', event => {
+ event.preventDefault();
+ pause();
+ const cell = cellFromPointer(event);
+ if (!cell) return;
+ drawing = true;
+ drawValue = grid[cell.y][cell.x] ? 0 : 1;
+ lastPaintedCell = null;
+ canvas.setPointerCapture(event.pointerId);
+ paintCell(event);
});
+canvas.addEventListener('pointermove', event => {
+ if (!drawing) return;
+ event.preventDefault();
+ paintCell(event);
+});
+
+canvas.addEventListener('pointerup', event => {
+ if (canvas.hasPointerCapture(event.pointerId)) {
+ canvas.releasePointerCapture(event.pointerId);
+ }
+ stopDrawing();
+});
+
+canvas.addEventListener('pointercancel', stopDrawing);
+canvas.addEventListener('pointerleave', stopDrawing);
+
document.getElementById('playBtn').addEventListener('click', () => running ? pause() : play());
document.getElementById('stepBtn').addEventListener('click', () => { pause(); step(); updateLesson('One generation advanced. Did the population go up, down, or stay balanced?'); });
document.getElementById('clearBtn').addEventListener('click', () => { pause(); grid = makeGrid(); generation = 0; births = 0; deaths = 0; updateLesson('The board is clear. Draw a creature, then test if it survives.'); updateStats(); draw(); });
document.getElementById('randomBtn').addEventListener('click', () => randomize(0.28));
-document.getElementById('sparkBtn').addEventListener('click', sparkles);
+document.getElementById('sparkBtn').addEventListener('click', fireworks);
document.getElementById('speed').addEventListener('input', event => {
speed = Number(event.target.value);
document.getElementById('speedLabel').textContent = speed;
diff --git a/styles.css b/styles.css
index 74ceba1..da90be6 100644
--- a/styles.css
+++ b/styles.css
@@ -279,7 +279,7 @@ canvas {
border-radius: 14px;
background: color-mix(in oklch, var(--surface), var(--bg) 26%);
cursor: crosshair;
- touch-action: manipulation;
+ touch-action: none;
}
.caption {