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,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 | pub fn render(&self) -> String { | 58 | pub fn render(&self) -> String { |
| 47 | self.to_string() | 59 | self.to_string() |
| 48 | } | 60 | } |
| @@ -18,7 +18,7 @@ | @@ -18,7 +18,7 @@ | ||
| 18 | </style> | 18 | </style> |
| 19 | </head> | 19 | </head> |
| 20 | <body> | 20 | <body> |
| 21 | - <pre id="game-of-life-canvas"></pre> | 21 | + <canvas id="game-of-life-canvas"></canvas> |
| 22 | <script src="./bootstrap.js"></script> | 22 | <script src="./bootstrap.js"></script> |
| 23 | </body> | 23 | </body> |
| 24 | </html> | 24 | </html> |
| 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 | const universe = Universe.new(); | 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 | const renderLoop = () => { | 19 | const renderLoop = () => { |
| 7 | - pre.textContent = universe.render(); | ||
| 8 | universe.tick(); | 20 | universe.tick(); |
| 9 | 21 | ||
| 22 | + drawGrid(); | ||
| 23 | + drawCells(); | ||
| 24 | + | ||
| 10 | requestAnimationFrame(renderLoop); | 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 | requestAnimationFrame(renderLoop); | 79 | requestAnimationFrame(renderLoop); |
Please
register
or
login
to post a comment