thib8956/js-canvas-playground
1
0
Fork 0
Code Issues Pull Requests Activity

life: implement scaling

Browse Source
This commit is contained in:
Thibaud Gasser
2025-08-05 11:02:00 +02:00
parent ab38071ffe
commit 353bae1adb
2 changed files with 27 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
life.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello typescript</title> <title>Game of Life</title>
</head> </head>
<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000"> <body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
<canvas id="canvas" tabindex="0"></canvas> <canvas id="canvas" tabindex="0"></canvas>

57
life.ts
View File

@@ -1,11 +1,4 @@
import { Point, resizeCanvas } from "./common.js" const SCALE = 4;
let WIDTH = 800;
let HEIGHT = 600;
function add2(p1: Point, p2: Point) {
return { x: p1.x + p2.x, y: p1.y + p2.y };
}
function init() { function init() {
const canvas = document.getElementById("canvas") as HTMLCanvasElement | null; const canvas = document.getElementById("canvas") as HTMLCanvasElement | null;
@@ -14,46 +7,47 @@ function init() {
const ctx = canvas.getContext("2d", { alpha: false }) as CanvasRenderingContext2D | null; const ctx = canvas.getContext("2d", { alpha: false }) as CanvasRenderingContext2D | null;
if (!ctx) throw new Error("unable to get canvas 2D context"); if (!ctx) throw new Error("unable to get canvas 2D context");
ctx.canvas.width = WIDTH ctx.canvas.width = window.innerWidth
ctx.canvas.height = HEIGHT ctx.canvas.height = window.innerHeight
const gridWidth = Math.floor(ctx.canvas.width / SCALE)
const gridHeight = Math.floor(ctx.canvas.height / SCALE)
const cells = new Array(WIDTH * HEIGHT) const cells = new Array(gridWidth * gridHeight)
cells.fill(0) cells.fill(0)
const state = new Array(WIDTH * HEIGHT) const state = new Array(gridWidth * gridHeight)
state.fill(0) state.fill(0)
for (let i=0; i < WIDTH * HEIGHT; i++) state[i] = +(Math.random() * 4 < 1) for (let i=0; i < gridWidth * gridHeight; i++) state[i] = +(Math.random() * 4 < 1)
canvas.addEventListener("click", (evt) => {
});
//window.addEventListener('resize', () => resizeCanvas(ctx));
window.requestAnimationFrame(t => update(ctx, cells, state)); window.requestAnimationFrame(t => update(ctx, cells, state));
} }
// update loop, called every frame // update loop, called every frame
function update(ctx: CanvasRenderingContext2D, cells: number[], state: number[]) { function update(ctx: CanvasRenderingContext2D, cells: number[], state: number[]) {
ctx.clearRect(0, 0, WIDTH, HEIGHT); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (let i=0; i < WIDTH * HEIGHT; i++) cells[i] = state[i];
//const cell = (p: Point) => cells[p.x*WIDTH+ p.y]; const gridWidth = Math.floor(ctx.canvas.width / SCALE)
const gridHeight = Math.floor(ctx.canvas.height / SCALE)
for (let i=0; i < gridWidth * gridHeight; i++) cells[i] = state[i];
ctx.beginPath(); // batch draw calls, only once per frame ctx.beginPath(); // batch draw calls, only once per frame
ctx.fillStyle = "white"; ctx.fillStyle = "white";
for (let y=1; y < HEIGHT - 1; y++) { for (let y=1; y < gridHeight - 1; y++) {
for (let x=1; x < WIDTH - 1; x++) { for (let x=1; x < gridWidth - 1; x++) {
const pos = WIDTH * y + x; const pos = gridWidth * y + x;
// count neighbors // count neighbors
const n = cells[pos - 1 - WIDTH] const n = cells[pos - 1 - gridWidth]
+ cells[pos - WIDTH] + cells[pos - gridWidth]
+ cells[pos + 1 - WIDTH] + cells[pos + 1 - gridWidth]
+ cells[pos - 1] + cells[pos - 1]
+ cells[pos + 1] + cells[pos + 1]
+ cells[pos - 1 + WIDTH] + cells[pos - 1 + gridWidth]
+ cells[pos + WIDTH] + cells[pos + gridWidth]
+ cells[pos + 1 + WIDTH]; + cells[pos + 1 + gridWidth];
const cell = cells[pos]; const cell = cells[pos];
if (cell == 1) { if (cell == 1) {
state[pos] = +(n == 2 || n == 3) state[pos] = +(n == 2 || n == 3)
@@ -62,8 +56,8 @@ function update(ctx: CanvasRenderingContext2D, cells: number[], state: number[])
} }
if (cell == 1) { if (cell == 1) {
ctx.moveTo(x, y); ctx.moveTo(x * SCALE, y * SCALE);
ctx.rect(x, y, 1, 1); ctx.rect(x * SCALE, y * SCALE, SCALE, SCALE);
} }
} }
} }
@@ -73,3 +67,4 @@ function update(ctx: CanvasRenderingContext2D, cells: number[], state: number[])
} }
init(); init();