mirror of
https://github.com/fluencelabs/assemblyscript
synced 2025-04-25 15:12:12 +00:00
87 lines
2.9 KiB
HTML
87 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Conway's Game of Life - AssemblyScript</title>
|
|
<style>
|
|
html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
|
|
body { border-top: 2px solid #bc18d4; }
|
|
h1 { padding: 18px 20px 20px; font-size: 12pt; margin: 0; }
|
|
a { color: #111; text-decoration: none; }
|
|
a:hover { color: #bc18d4; text-decoration: underline; }
|
|
canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #100707; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>
|
|
<a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life">Conway's Game of Life</a> in
|
|
<a href="http://assemblyscript.org">AssemblyScript</a>
|
|
( <a href="https://github.com/AssemblyScript/assemblyscript/blob/master/examples/game-of-life/assembly/index.ts">source</a> )
|
|
</h1>
|
|
<canvas></canvas>
|
|
<script>"use strict";
|
|
|
|
// Set up the canvas with a 2D rendering context
|
|
var cnv = document.getElementsByTagName("canvas")[0];
|
|
var ctx = cnv.getContext("2d");
|
|
var bcr = cnv.getBoundingClientRect();
|
|
|
|
// Compute the size of the universe (here: 2px per cell)
|
|
var width = bcr.width >>> 1;
|
|
var height = bcr.height >>> 1;
|
|
var size = width * height;
|
|
var byteSize = (size + size) << 2; // input & output (here: 4b per cell)
|
|
|
|
cnv.width = width;
|
|
cnv.height = height;
|
|
cnv.style = `
|
|
image-rendering: optimizeSpeed;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: -o-crisp-edges;
|
|
image-rendering: pixelated;
|
|
-ms-interpolation-mode: nearest-neighbor;
|
|
`;
|
|
ctx.imageSmoothingEnabled = false;
|
|
|
|
// Compute the size of and instantiate the module's memory
|
|
var memory = new WebAssembly.Memory({ initial: ((byteSize + 0xffff) & ~0xffff) >>> 16 });
|
|
|
|
// Fetch and instantiate the module
|
|
fetch("build/optimized.wasm")
|
|
.then(response => response.arrayBuffer())
|
|
.then(buffer => WebAssembly.instantiate(buffer, {
|
|
env: { memory: memory, abort: function() {} },
|
|
JSMath: Math
|
|
}))
|
|
.then(module => {
|
|
var exports = module.instance.exports;
|
|
|
|
// Initialize the module with the universe's width and height
|
|
exports.init(width, height);
|
|
|
|
var mem = new Uint32Array(memory.buffer);
|
|
|
|
// Update about 30 times a second
|
|
(function update() {
|
|
setTimeout(update, 1000 / 30);
|
|
mem.copyWithin(0, size, size + size); // copy output to input
|
|
exports.step(); // perform the next step
|
|
})();
|
|
|
|
// Keep rendering the output at [size, 2*size]
|
|
var imageData = ctx.createImageData(width, height);
|
|
var argb = new Uint32Array(imageData.data.buffer);
|
|
(function render() {
|
|
requestAnimationFrame(render);
|
|
argb.set(mem.subarray(size, size + size)); // copy output to image buffer
|
|
ctx.putImageData(imageData, 0, 0); // apply image buffer
|
|
})();
|
|
|
|
}).catch(err => {
|
|
alert("Failed to load WASM: " + err.message + " (ad blocker, maybe?)");
|
|
console.log(err.stack);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|