-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
59 lines (49 loc) · 1.76 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
(async function() {
const FRAMES_PER_COLOR = 100
// Fetch the WebAssembly binary data.
const wasm = await fetch('color-me-rusty.gc.wasm')
const bytes = await wasm.arrayBuffer()
// Instantiate the WebAssembly module from the binary data,
// and import setColor into WebAssembly.
const module = await WebAssembly.instantiate(bytes, { env: { setColor }})
const mod = module.instance
// Sets the background color and text to the rgb color values
// in WebAssembly linear memory.
function setColor(valsPtr) {
let vals = new Uint8ClampedArray(mod.exports.memory.buffer, valsPtr, 3)
setBackgroundColor(vals)
setText(vals)
}
// Sets the document body background color.
function setBackgroundColor(vals) {
document.body.style.backgroundColor = rgbString(vals)
}
// Sets the color heading text with padded values for consistent size.
function setText(vals) {
let paddedVals = Array.from(vals).map(padValue)
document.getElementById('color').innerText = rgbString(paddedVals)
}
// Interpolates rgb color values into a CSS-compatible string.
function rgbString(vals) {
return `rgb(${vals[0]}, ${vals[1]}, ${vals[2]})`
}
// Pads a number with leading zeroes (maximum 3 digits).
function padValue(value) {
if (typeof(value) !== 'number') {
throw TypeError('Value must be a number!')
}
var chars = value.toString().split('')
for (var i = chars.length; i < 3; i++) {
chars.unshift('0')
}
return chars.join('')
}
// Sets a new color on every frame
function render(frame) {
if (!frame) frame = 0
mod.exports.set_frame_color(frame, FRAMES_PER_COLOR)
window.requestAnimationFrame(() => render(frame + 1))
}
// Begins the rendering loop.
window.requestAnimationFrame(render)
})()