Commit c7543ff2996d5752872d000b8c96ed526ef38721
1 parent
cac13d02
use canvas ... still not what I want. I want rust to write to the canvas memory.
Showing
3 changed files
with
82 additions
and
4 deletions
... | ... | @@ -43,6 +43,18 @@ impl Universe { |
43 | 43 | } |
44 | 44 | } |
45 | 45 | |
46 | + pub fn width(&self) -> u32 { | |
47 | + self.width | |
48 | + } | |
49 | + | |
50 | + pub fn height(&self) -> u32 { | |
51 | + self.height | |
52 | + } | |
53 | + | |
54 | + pub fn cells(&self) -> *const Cell { | |
55 | + self.cells.as_ptr() | |
56 | + } | |
57 | + | |
46 | 58 | pub fn render(&self) -> String { |
47 | 59 | self.to_string() |
48 | 60 | } | ... | ... |
1 | -import { Universe } from "wasm-game-of-life"; | |
1 | +import { Universe, Cell } from "wasm-game-of-life"; | |
2 | +import { memory } from "wasm-game-of-life/wasm_game_of_life_bg"; | |
3 | + | |
4 | +const CELL_SIZE = 5; // px | |
5 | +const GRID_COLOR = "#CCCCCC"; | |
6 | +const DEAD_COLOR = "#FFFFFF"; | |
7 | +const ALIVE_COLOR = "#000000"; | |
2 | 8 | |
3 | -const pre = document.getElementById("game-of-life-canvas"); | |
4 | 9 | const universe = Universe.new(); |
10 | +const width = universe.height(); | |
11 | +const height = universe.height(); | |
12 | + | |
13 | +const canvas = document.getElementById("game-of-life-canvas"); | |
14 | +canvas.height = (CELL_SIZE + 1) * height + 1; | |
15 | +canvas.width = (CELL_SIZE + 1) * width + 1; | |
16 | + | |
17 | +const ctx = canvas.getContext('2d'); | |
5 | 18 | |
6 | 19 | const renderLoop = () => { |
7 | - pre.textContent = universe.render(); | |
8 | 20 | universe.tick(); |
9 | 21 | |
22 | + drawGrid(); | |
23 | + drawCells(); | |
24 | + | |
10 | 25 | requestAnimationFrame(renderLoop); |
11 | 26 | }; |
12 | 27 | |
28 | +const drawGrid = () => { | |
29 | + ctx.beginPath(); | |
30 | + ctx.strokeStyle = GRID_COLOR; | |
31 | + | |
32 | + // vertical lines. | |
33 | + for (let i = 0; i <= width; i++) { | |
34 | + ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0); | |
35 | + ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1); | |
36 | + } | |
37 | + | |
38 | + // horizontal lines. | |
39 | + for (let j = 0; j <= height; j++) { | |
40 | + ctx.moveTo( 0, j * (CELL_SIZE + 1) + 1); | |
41 | + ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1); | |
42 | + } | |
43 | + | |
44 | + ctx.stroke(); | |
45 | +}; | |
46 | + | |
47 | +const getIndex = (row, col) => { | |
48 | + return row * width + col; | |
49 | +}; | |
50 | + | |
51 | +const drawCells = () => { | |
52 | + const cellsPtr = universe.cells() | |
53 | + const cells = new Uint8Array(memory.buffer, cellsPtr, width * height); | |
54 | + | |
55 | + ctx.beginPath(); | |
56 | + | |
57 | + for (let row = 0; row < height; row++) { | |
58 | + for (let col = 0; col < height; col++) { | |
59 | + const idx = getIndex(row, col); | |
60 | + | |
61 | + ctx.fillStyle = cells[idx] === Cell.Dead | |
62 | + ? DEAD_COLOR | |
63 | + : ALIVE_COLOR; | |
64 | + | |
65 | + ctx.fillRect( | |
66 | + col * (CELL_SIZE + 1) + 1, | |
67 | + row * (CELL_SIZE + 1) + 1, | |
68 | + CELL_SIZE, | |
69 | + CELL_SIZE | |
70 | + ); | |
71 | + } | |
72 | + } | |
73 | + | |
74 | + ctx.stroke(); | |
75 | +}; | |
76 | + | |
77 | +drawGrid(); | |
78 | +drawCells(); | |
13 | 79 | requestAnimationFrame(renderLoop); | ... | ... |
Please
register
or
login
to post a comment