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

6 years ago · c7543ff299
3 changed files with 82 additions and 4 deletions
--- a/tutorial/wasm-game-of-life/src/lib.rs
+++ b/tutorial/wasm-game-of-life/src/lib.rs
@ -43,6 +43,18 @@ impl Universe {
        }
    }
    pub fn width(&self) -> u32 {
        self.width
    }
    pub fn height(&self) -> u32 {
        self.height
    }
    pub fn cells(&self) -> *const Cell {
        self.cells.as_ptr()
    }
    pub fn render(&self) -> String {
        self.to_string()
    }
--- a/tutorial/wasm-game-of-life/www/index.html
+++ b/tutorial/wasm-game-of-life/www/index.html
@ -18,7 +18,7 @@
    </style>
  </head>
  <body>
    <pre id="game-of-life-canvas"></pre>
    <canvas id="game-of-life-canvas"></canvas>
    <script src="./bootstrap.js"></script>
  </body>
 </html>
--- a/tutorial/wasm-game-of-life/www/index.js
+++ b/tutorial/wasm-game-of-life/www/index.js
@ -1,13 +1,79 @@
 import { Universe } from "wasm-game-of-life";
 import { Universe, Cell } from "wasm-game-of-life";
 import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";
 const CELL_SIZE   = 5; // px
 const GRID_COLOR  = "#CCCCCC";
 const DEAD_COLOR  = "#FFFFFF";
 const ALIVE_COLOR = "#000000";
 const      pre = document.getElementById("game-of-life-canvas");
 const universe = Universe.new();
 const    width = universe.height();
 const   height = universe.height();
 const canvas  = document.getElementById("game-of-life-canvas");
 canvas.height = (CELL_SIZE + 1) * height + 1;
 canvas.width  = (CELL_SIZE + 1) * width + 1;
 const ctx = canvas.getContext('2d');
 const renderLoop = () => {
    pre.textContent = universe.render();
    universe.tick();
    drawGrid();
    drawCells();
    requestAnimationFrame(renderLoop);
 };
 const drawGrid = () => {
    ctx.beginPath();
    ctx.strokeStyle = GRID_COLOR;
    // vertical lines.
    for (let i = 0; i <= width; i++) {
        ctx.moveTo(i * (CELL_SIZE + 1) + 1,                            0);
        ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
    }
    // horizontal lines.
    for (let j = 0; j <= height; j++) {
        ctx.moveTo(                          0, j * (CELL_SIZE + 1) + 1);
        ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);
    }
    ctx.stroke();
 };
 const getIndex = (row, col) => {
    return row * width + col;
 };
 const drawCells = () => {
    const cellsPtr = universe.cells()
    const cells    = new Uint8Array(memory.buffer, cellsPtr, width * height);
    ctx.beginPath();
    for (let row = 0; row < height; row++) {
        for (let col = 0; col < height; col++) {
            const idx = getIndex(row, col);
            ctx.fillStyle = cells[idx] === Cell.Dead
                ? DEAD_COLOR
                : ALIVE_COLOR;
            ctx.fillRect(
                col * (CELL_SIZE + 1) + 1,
                row * (CELL_SIZE + 1) + 1,
                CELL_SIZE,
                CELL_SIZE
            );
        }
    }
    ctx.stroke();
 };
 drawGrid();
 drawCells();
 requestAnimationFrame(renderLoop);