55 lines
1.5 KiB
HTML
55 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>vLEDMatrix</title>
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="canvas" width="768" height="384" />
|
|
|
|
<script>
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
function draw(pixelData) {
|
|
ctx.clearRect(0, 0, 768, 384);
|
|
for (let y = 0; y < 32; y++) {
|
|
for (let x = 0; x < 64; x++) {
|
|
const idx = y * 64 * 3 + x * 3;
|
|
ctx.beginPath();
|
|
ctx.arc(x * 12 + 4, y * 12 + 4, 4, 0, 2 * Math.PI);
|
|
ctx.fillStyle = `rgb(${pixelData[idx]} ${pixelData[idx + 1]} ${pixelData[idx + 2]})`;
|
|
ctx.fill();
|
|
}
|
|
}
|
|
}
|
|
|
|
const memory = new WebAssembly.Memory({
|
|
initial: 2,
|
|
maximum: 2,
|
|
});
|
|
|
|
const importObject = {
|
|
env: {
|
|
memory: memory,
|
|
printi64: (arg) => console.log(arg),
|
|
printf32: (arg) => console.log(arg),
|
|
timestamp: () => {
|
|
return BigInt(Math.floor(Date.now() / 1000));
|
|
},
|
|
},
|
|
};
|
|
|
|
WebAssembly.instantiateStreaming(fetch("zig-out/bin/ledbox.wasm"), importObject).then((result) => {
|
|
const wasmMemoryArray = new Uint8Array(memory.buffer);
|
|
|
|
setInterval(() => {
|
|
result.instance.exports.draw();
|
|
const pointer = result.instance.exports.getPixelDataPointer();
|
|
const pixelData = wasmMemoryArray.slice(pointer, pointer + 64 * 32 * 3);
|
|
draw(pixelData);
|
|
}, 100);
|
|
});
|
|
</script>
|
|
<body>
|
|
</html>
|