79 lines
2.6 KiB
JavaScript
79 lines
2.6 KiB
JavaScript
import wasmInit from "./pkg/gamarjoba.js"
|
|
|
|
const runWasm = async () => {
|
|
const rustWasm = await wasmInit("./pkg/gamarjoba_bg.wasm");
|
|
|
|
const result = rustWasm.de_iavascriptis(0, 1);
|
|
console.log("Should be undefined: ", rustWasm.add_integer_with_constant);
|
|
const div = document.querySelector("#textBuf");
|
|
div.textContent = `Gamarjoba! result: ${result}`;
|
|
|
|
const NUMBER = 257;
|
|
|
|
console.log("Write in WASM, read in JS");
|
|
rustWasm.store_value_in_wasm_mem_idx_0(NUMBER);
|
|
let wasmMemory = new Uint8Array(rustWasm.memory.buffer);
|
|
let ptr = rustWasm.get_wasm_mem_buffer_pointer();
|
|
console.log("Pointer from rust: ", ptr);
|
|
|
|
console.log(wasmMemory[ptr+0]); // should be NUMBER, wrapped around 256
|
|
|
|
console.log("Write in JS, read in wasm");
|
|
wasmMemory[ptr+1] = 15;
|
|
console.log(rustWasm.read_wasm_mem_buffer_idx_1()); // should be 15
|
|
|
|
|
|
const canvasElement = document.querySelector("canvas");
|
|
|
|
// Set up Context and ImageData on the canvas
|
|
const canvasContext = canvasElement.getContext("2d");
|
|
const canvasImageData = canvasContext.createImageData(
|
|
canvasElement.width,
|
|
canvasElement.height
|
|
);
|
|
|
|
canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
|
|
|
const getDarkValue = () => Math.floor(Math.random() * 100);
|
|
const getLightValue = () => Math.floor(Math.random() * 127) + 127;
|
|
|
|
const drawCheckerBoard = () => {
|
|
const checkerBoardSize = 20;
|
|
|
|
// Generate a new checkboard in wasm
|
|
rustWasm.generate_checkerboard(
|
|
getDarkValue(),
|
|
getDarkValue(),
|
|
getDarkValue(),
|
|
getLightValue(),
|
|
getLightValue(),
|
|
getLightValue()
|
|
);
|
|
|
|
// Pull out the RGBA values from Wasm memory
|
|
// Starting at the memory index of out output buffer (given by our pointer)
|
|
// 20 * 20 * 4 = checkboard max X * checkerboard max Y * number of pixel properties (R,G.B,A)
|
|
const outputPointer = rustWasm.get_output_buf_ptr();
|
|
const imageDataArray = wasmMemory.slice(
|
|
outputPointer,
|
|
outputPointer + checkerBoardSize * checkerBoardSize * 4
|
|
);
|
|
|
|
// Set the values to the canvas image data
|
|
canvasImageData.data.set(imageDataArray);
|
|
|
|
// Clear the canvas
|
|
canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
|
|
|
// Place the new generated checkerboard onto the canvas
|
|
canvasContext.putImageData(canvasImageData, 0, 0);
|
|
};
|
|
|
|
drawCheckerBoard();
|
|
setInterval(() => {
|
|
drawCheckerBoard();
|
|
}, 300);
|
|
};
|
|
|
|
runWasm();
|