diff --git a/common.ts b/common.ts index 78b7c4a..d78c4fd 100644 --- a/common.ts +++ b/common.ts @@ -3,6 +3,17 @@ export interface Point { y: number; } +export const DIRECTIONS: Point[] = [ + { x: 0, y: -1}, // N + { x: -1, y: -1}, // NW + { x: 1, y: -1}, // NE + { x: -1, y: 0}, // W + { x: 1, y: 0}, // E + { x: 0, y: 1}, // S + { x: -1, y: 1}, // SW + { x: 1, y: 1}, // SE +]; + export function lerp(a: Point, b: Point, p: number) { return { x: a.x + (b.x - a.x) * p, diff --git a/life.ts b/life.ts index aafefd3..726b4be 100644 --- a/life.ts +++ b/life.ts @@ -1,18 +1,7 @@ import { Point, resizeCanvas } from "./common.js" -const WIDTH = 800; -const HEIGHT = 600; -const SCALING = 4; -const DIRECTIONS: Point[] = [ - { x: 0, y: -1}, // N - { x: -1, y: -1}, // NW - { x: 1, y: -1}, // NE - { x: -1, y: 0}, // W - { x: 1, y: 0}, // E - { x: 0, y: 1}, // S - { x: -1, y: 1}, // SW - { x: 1, y: 1}, // SE -] +let WIDTH = 800; +let HEIGHT = 600; function add2(p1: Point, p2: Point) { return { x: p1.x + p2.x, y: p1.y + p2.y }; @@ -28,15 +17,17 @@ function init() { ctx.canvas.width = WIDTH ctx.canvas.height = HEIGHT - const cells = new Array(WIDTH * HEIGHT / SCALING) + + const cells = new Array(WIDTH * HEIGHT) cells.fill(0) - const state = new Array(WIDTH * HEIGHT / SCALING) + const state = new Array(WIDTH * HEIGHT) state.fill(0) - for (let i=0; i < WIDTH * HEIGHT / SCALING; i++) state[i] = +(Math.random() * 4 < 1) + for (let i=0; i < WIDTH * HEIGHT; i++) state[i] = +(Math.random() * 4 < 1) - console.log(state.length) + canvas.addEventListener("click", (evt) => { + }); //window.addEventListener('resize', () => resizeCanvas(ctx)); window.requestAnimationFrame(t => update(ctx, cells, state)); @@ -45,31 +36,34 @@ function init() { // update loop, called every frame function update(ctx: CanvasRenderingContext2D, cells: number[], state: number[]) { ctx.clearRect(0, 0, WIDTH, HEIGHT); - for (let i=0; i < WIDTH * HEIGHT / SCALING; i++) cells[i] = state[i]; + for (let i=0; i < WIDTH * HEIGHT; i++) cells[i] = state[i]; - const cell = (p: Point) => cells[p.y*WIDTH/SCALING + p.x] + //const cell = (p: Point) => cells[p.x*WIDTH+ p.y]; ctx.beginPath(); // batch draw calls, only once per frame ctx.fillStyle = "white"; for (let y=1; y < HEIGHT - 1; y++) { for (let x=1; x < WIDTH - 1; x++) { - const p = { x, y }; + const pos = WIDTH * y + x; // count neighbors - let neighbors = 0; - for (const d of DIRECTIONS) { - const pos = add2(p, d); - neighbors += cell(pos); - } - - if (cell(p) == 1) { - state[p.y*WIDTH/SCALING+p.x] = +(neighbors == 2 || neighbors == 3) + const n = cells[pos - 1 - WIDTH] + + cells[pos - WIDTH] + + cells[pos + 1 - WIDTH] + + cells[pos - 1] + + cells[pos + 1] + + cells[pos - 1 + WIDTH] + + cells[pos + WIDTH] + + cells[pos + 1 + WIDTH]; + const cell = cells[pos]; + if (cell == 1) { + state[pos] = +(n == 2 || n == 3) } else { - state[p.y*WIDTH/SCALING+p.x] = +(neighbors == 3) + state[pos] = +(n == 3) } - if (cell(p) == 1) { - ctx.moveTo(p.x, p.y); - ctx.rect(p.x, p.y, SCALING, SCALING); + if (cell == 1) { + ctx.moveTo(x, y); + ctx.rect(x, y, 1, 1); } } }