rust / easel3d-wasm · Commits

Commit c7543ff2996d5752872d000b8c96ed526ef38721

Authored by Georg Hopp
1 parent cac13d02

use canvas ... still not what I want. I want rust to write to the canvas memory.

Inline Side-by-side
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 }
... ...
... ... @@ -18,7 +18,7 @@
18 18 </style>
19 19 </head>
20 20 <body>
21   - <pre id="game-of-life-canvas"></pre>
  21 + <canvas id="game-of-life-canvas"></canvas>
22 22 <script src="./bootstrap.js"></script>
23 23 </body>
24 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 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