31:T7fa,WaltSourceCompiled = { const bufferU8 = new Uint8Array(compiledWaltBuffer); // draw buffer values as 24x24 pixels const columns = (width-4)/24 | 0; const rows = Math.ceil(bufferU8.length / columns); const cHeight = rows * 26 + 2; const context = DOM.context2d(width, cHeight, 1); const imageData = context.createImageData(width, cHeight); const pixels32 = new Uint32Array(imageData.data.buffer); pixels32.fill(isLittleEndian ? 0xFF000000 : 0xFF); const colorTable = cividis.RGBA32; const barCode = new Uint32Array(8); for(let i = 0; i < bufferU8.length; i++){ const x = 1 + ((i % columns) * 24); const y = 2 + ((i / columns) | 0) * 26; const idx = x + y*width; const val = bufferU8[i]; let color = colorTable[val]; for (let cx = 1; cx < 23; cx++){ for (let cy = 1; cy < 23; cy++){ pixels32[idx + cx + cy * width] = color; } } for(let j = 0; j < 8; j++){ barCode[j] = colorTable[((val >> (7 - j)) & 1) * 0xD0 + 0x18]; } for (let cx = 4; cx < 20; cx++){ color = barCode[(cx - 4)>>1]; pixels32[idx + cx + 18 * width] = color; pixels32[idx + cx + 19 * width] = color; pixels32[idx + cx + 20 * width] = color; } } context.putImageData(imageData, 0, 0); return md` Since \`ArrayBuffer{}\` is kind of boring and non-descriptive (it doesn't even show us it's contents), I plotted the bytes against the Cividis color map. It's not very useful, but at least you can see there are values stored in that buffer! ${context.canvas} *Raw content of compiled Walt buffer (${bufferU8.length} bytes)* The bytes are plotted left-to-right, top-to-bottom. Each block is a byte value represented in color form: the background color is a direct translation of the byte value - dark blue is zero, bright green is 255. Because really close values might result in hues that are indistinguishable, the bottom of each block contains a little "barcode" as well, representing the bit values of the byte: dark blue is \`0\` and green is \`1\`. ` }32:T1434,function instantiate(compiledBuffer) { const ctx = waltCanvas.getContext("2d"); const canvas = waltCanvas; const imgData = ctx.createImageData(canvas.width, canvas.height); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const getCanvasWidth = () => canvasWidth; const getCanvasHeight = () => canvasHeight; const env = { getCanvasWidth, getCanvasHeight, log: (val) => { console.log(val); } }; // Arrange for resize window.addEventListener('resize', onresize, false); return WebAssembly.instantiate(compiledBuffer, { env }).then(result => { const exports = result.instance.exports; const memory = exports.memory; const { width, height } = canvas; const wh = width * height; // Grow memory to required size const pages = 1 + ((20 * wh + 256) >> 16); memory.grow(pages); const heap = memory.buffer; const HEAP_START = 65536; const imageArray = new Uint8ClampedArray(heap, HEAP_START, 4 * wh); const image32Array = new Uint32Array(heap, HEAP_START, wh); const forceArray = new Int32Array(heap, HEAP_START + 4 * wh, wh); const statusArray = new Int32Array(heap, HEAP_START + 8 * wh, wh); const uArray = new Int32Array(heap, HEAP_START + 12 * wh, wh); const velArray = new Int32Array(heap, HEAP_START + 16 * wh, wh); const colorRampArray = new Uint32Array(heap, HEAP_START + 20 * wh, 256); colorRampArray.set(colorRamp.RGBA32); // we clamp to the range [0, width-1], so -1 is a // way to indicate there was no previous mouse value let lastMouseX = -1; let lastMouseY = -1; const applyBrush = exports.applyBrush; canvas.onmousedown = (e) => { e.preventDefault(); let bbox = canvas.getBoundingClientRect(); let mouseX = Math.round(e.clientX - bbox.left * (width / bbox.width)); let mouseY = Math.round(e.clientY - bbox.top * (height / bbox.height)); mouseX = Math.max(1, Math.min(canvasWidth-1, mouseX)); mouseY = Math.max(1, Math.min(canvasHeight-1, mouseY)); lastMouseX = mouseX; lastMouseY = mouseY; applyBrush(mouseX, mouseY, brushRadius); }; canvas.onmousemove = (e) => { e.preventDefault(); let bbox = canvas.getBoundingClientRect(); let mouseX = Math.round(e.clientX - bbox.left * (width / bbox.width)); let mouseY = Math.round(e.clientY - bbox.top * (height / bbox.height)); mouseX = Math.max(1, Math.min(canvasWidth-1, mouseX)); mouseY = Math.max(1, Math.min(canvasHeight-1, mouseY)); if (lastMouseX !== -1 && lastMouseY !== -1) { const dx = mouseX - lastMouseX; const dy = mouseY - lastMouseY; const r = Math.sqrt(dx*dx + dy*dy); for (let t = 0; t <= r; t += brushRadius+1 >> 1) { const currX = lastMouseX + ((mouseX - lastMouseX) * (t / r)) | 0; const currY = lastMouseY + ((mouseY - lastMouseY) * (t / r)) | 0; applyBrush(currX, currY, brushRadius); forceArray[currY * width + currX] = 0x3FFFFFFF; } applyBrush(mouseX, mouseY, brushRadius); lastMouseX = mouseX; lastMouseY = mouseY; } }; canvas.onmouseout = canvas.onmouseup = (e) => { e.preventDefault(); lastMouseX = -1; lastMouseY = -1; }; // fake mouse events when triggering touch events canvas.addEventListener("touchstart", function (e) { e.preventDefault(); var touch = e.touches[0]; var mouseEvent = new MouseEvent("mousedown", { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); }, false); canvas.addEventListener("touchend", function (e) { e.preventDefault(); var touch = e.touches[0]; var mouseEvent = new MouseEvent("mouseup", { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); }, false); canvas.addEventListener("touchmove", function (e) { e.preventDefault(); var touch = e.touches[0]; var mouseEvent = new MouseEvent("mousemove", { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); }, false); let raf; let raindrop = 0x3FFFFFFF; function run() { if (rainNoise) { const raindrop2 = raindrop^0xFFFFFFFF; const j = width + (wh-(width*2)) * Math.random() | 0; forceArray[j-width-1] = raindrop2; forceArray[j-width] = raindrop2; forceArray[j-width+1] = raindrop2; forceArray[j-1] = raindrop2; forceArray[j] = raindrop2; forceArray[j+1] = raindrop; forceArray[j+width-1] = raindrop2; forceArray[j+width] = raindrop2; forceArray[j+width+1] = raindrop2; raindrop = raindrop2; } exports.step(); imgData.data.set(imageArray); ctx.putImageData(imgData, 0, 0); raf = requestAnimationFrame(run, 0); } function cancel() { cancelAnimationFrame(raf); } exports.init(useColormap ? 1 : 0); return { run, cancel, canvas }; }); }33:T14ae,waltSource = `// WAVE EQUATION - Click and drag on the canvas. // Compare this to the version generated by Emscripten: https://webassembly.studio/?f=kv3dhnahf1 import { getCanvasWidth: GetSizeType, getCanvasHeight: GetSizeType, log: LogType } from 'env'; type LogType = (i32) => void; type GetSizeType = () => i32; export const memory: Memory<{initial: 1}>; const HEAP_START: i32 = 65536; let width: i32; let height: i32; let wh: i32; let image: i32[]; let force: i32[]; let status: i32[]; let u: i32[]; let vel: i32[]; let colorRamp: i32[]; let iStart: i32; let iEnd: i32; let useColorRamp: i32; export function init(_useColorRamp : i32) : void { useColorRamp = _useColorRamp; width = getCanvasWidth(); height = getCanvasHeight(); wh = width * height; image = HEAP_START; force = HEAP_START + 4 * wh; status = HEAP_START + 8 * wh; u = HEAP_START + 12 * wh; vel = HEAP_START + 16 * wh; colorRamp = HEAP_START + 20 * wh; let i: i32; // Draw walls // top row for (i = 0; i < width; i += 1) { status[i] = 1; } // columns for(i = width; i < wh; i += width){ // exploit that array wraps around to next row status[i-1] = 1; status[i] = 1; } // bottom row for (i = wh - width; i < wh; i += 1) { status[i] = 1; } iStart = width + 1; iEnd = wh - width - 2; } function applyCap(x: i32) : i32 { // branchless bit-twiddling code below // if (x < -0x40000000) { // return -0x40000000; // } // if (x > 0x3FFFFFFF) { // return 0x3FFFFFFF; // } // return x; // const mask : i32 = x >> 31; // if ((x^mask) > 0x3FFFFFFF) { // return 0x3FFFFFFF^mask; // } // return x; const mask : i32 = x >> 31; x = x^mask; // "absolute" value of x (applying one's complement to a two's complement nr) const absMask : i32 = (x<<1)>>31; // abs(x) > 0x3FFFFFFF? x = (x | absMask) & 0x3FFFFFFF; return x^mask; } function toRGB(x: i32) : i32 { // branchless bit-twiddling code below // const val: i32 = x >> 22; // if (val < 0) { // return ((-(val + 1)) | 0xFF000000); //red // } // return (((val << 8) | (val << 16)) | 0xFF000000); // cyan let val: i32 = x >> 22; let sign: i32 = x >> 31; // branchless absolute value & color selection let absVal: i32 = (val^sign) + (sign&1); sign = (sign&8)^sign; absVal = absVal + (absVal << sign); return 0xFF000000 | (absVal << sign); } function toColorRamp(x: i32) : i32 { let val: i32 = (x >> 23) + 128; return colorRamp[val]; } export function applyBrush(x: i32, y: i32, radius: i32) : void { const width: i32 = getCanvasWidth(); const height: i32 = getCanvasHeight(); const wh: i32 = width * height; const force: i32[] = HEAP_START + 4 * wh; if (radius < 0) radius = -radius; const radius2: i32 = radius*radius; const rMul: i32 = 0x3FFFFFFF / radius2; let xi: i32 = x - radius; let yj: i32 = y - radius; let i: i32; let j: i32; for (i = -radius; xi < 0 && i <= radius; i += 1) { xi = x + i+1; } for (j = -radius; yj < 0 && j <= radius; j += 1) { yj = y + j+1; } const i0: i32 = i; const j0: i32 = j; for (j = j0; yj < height && j <= radius; j += 1){ const j2: i32 = j * j; for (i = i0; xi < width && i <= radius; i += 1){ const r2: i32 = j2 + i*i; if (r2 <= radius2) { const f: i32 = force[xi + yj * width]; //force[xi + yj * width] = applyCap(f + 0x3FFFFFFF - rMul*r2); // manually inlined applyCap let cap : i32 = f + 0x3FFFFFFF - rMul*r2; const mask : i32 = cap >> 31; cap = cap^mask; // abs(cap) const absMask : i32 = (cap<<1)>>31; // abs(x) > 0x3FFFFFFF? cap = (cap | absMask) & 0x3FFFFFFF; force[xi + yj * width] = cap^mask; } xi = x + i; } yj = y + j; } } export function step() : void { let i: i32 = iStart; // Calculate velocity change while (i < iEnd) { let uCen: i32 = u[i-1]; let uEast: i32 = u[i]; while (status[i] == 0) { const uNorth: i32 = u[i - width]; const uWest: i32 = uCen; uCen = uEast; uEast = u[i + 1]; const uSouth: i32 = u[i + width]; const uxx: i32 = ((uWest + uEast + 1) >> 1) - uCen; const uyy: i32 = ((uNorth + uSouth + 1) >> 1) - uCen; vel[i] = applyCap(vel[i] + (uxx+1 >> 1) + (uyy+1 >> 1)); i += 1; } i += 1; } // Apply forces i = iStart; while (i < iEnd) { while (status[i] == 0) { const f: i32 = force[i]; u[i] = applyCap(f + applyCap(u[i] + vel[i])); force[i] = f >> 1; i += 1; } i += 1; } // Generate image i = iStart; if (useColorRamp) { while (i < iEnd) { while (status[i] == 0) { // inlined toColorRamp image[i] = colorRamp[128 + (u[i]>>23)]; i += 1; } i += 1; } } else { let val: i32; let sign: i32; let absVal: i32; while (i < iEnd) { while (status[i] == 0) { image[i] = toRGB(u[i]); // manually inlined toRGB const rawVal: i32 = u[i]; val = rawVal >> 22; sign = rawVal >> 31; absVal = (val^sign) + (sign&1); sign = (sign&8)^8; absVal = absVal | (absVal << sign); image[i] = 0xFF000000 | (absVal << sign); i += 1; } i += 1; } } } `34:Tf8b,// used in the visualisation of the buffer cividis = { const RGBA8 = Uint8Array.from([0,32,76,255,0,32,78,255,0,33,80,255,0,34,81,255,0,35,83,255,0,35,85,255,0,36,86,255,0,37,88,255,0,38,90,255,0,38,91,255,0,39,93,255,0,40,95,255,0,40,97,255,0,41,99,255,0,42,100,255,0,42,102,255,0,43,104,255,0,44,106,255,0,45,108,255,0,45,109,255,0,46,110,255,0,46,111,255,0,47,111,255,0,47,111,255,0,48,111,255,0,49,111,255,0,49,111,255,0,50,110,255,0,51,110,255,0,52,110,255,0,52,110,255,1,53,110,255,6,54,110,255,10,55,109,255,14,55,109,255,18,56,109,255,21,57,109,255,23,57,109,255,26,58,108,255,28,59,108,255,30,60,108,255,32,60,108,255,34,61,108,255,36,62,108,255,38,62,108,255,39,63,108,255,41,64,107,255,43,65,107,255,44,65,107,255,46,66,107,255,47,67,107,255,49,68,107,255,50,68,107,255,51,69,107,255,53,70,107,255,54,70,107,255,55,71,107,255,56,72,107,255,58,73,107,255,59,73,107,255,60,74,107,255,61,75,107,255,62,75,107,255,64,76,107,255,65,77,107,255,66,78,107,255,67,78,107,255,68,79,107,255,69,80,107,255,70,80,107,255,71,81,107,255,72,82,107,255,73,83,107,255,74,83,107,255,75,84,107,255,76,85,107,255,77,85,107,255,78,86,107,255,79,87,108,255,80,88,108,255,81,88,108,255,82,89,108,255,83,90,108,255,84,90,108,255,85,91,108,255,86,92,108,255,87,93,109,255,88,93,109,255,89,94,109,255,90,95,109,255,91,95,109,255,92,96,109,255,93,97,110,255,94,98,110,255,95,98,110,255,95,99,110,255,96,100,110,255,97,101,111,255,98,101,111,255,99,102,111,255,100,103,111,255,101,103,111,255,102,104,112,255,103,105,112,255,104,106,112,255,104,106,112,255,105,107,113,255,106,108,113,255,107,109,113,255,108,109,114,255,109,110,114,255,110,111,114,255,111,111,114,255,111,112,115,255,112,113,115,255,113,114,115,255,114,114,116,255,115,115,116,255,116,116,117,255,117,117,117,255,117,117,117,255,118,118,118,255,119,119,118,255,120,120,118,255,121,120,119,255,122,121,119,255,123,122,119,255,123,123,120,255,124,123,120,255,125,124,120,255,126,125,120,255,127,126,120,255,128,126,120,255,129,127,120,255,130,128,120,255,131,129,120,255,132,129,120,255,133,130,120,255,134,131,120,255,135,132,120,255,136,133,120,255,137,133,120,255,138,134,120,255,139,135,120,255,140,136,120,255,141,136,120,255,142,137,120,255,143,138,120,255,144,139,120,255,145,140,120,255,146,140,120,255,147,141,120,255,148,142,120,255,149,143,120,255,150,143,119,255,151,144,119,255,152,145,119,255,153,146,119,255,154,147,119,255,155,147,119,255,156,148,119,255,157,149,119,255,158,150,118,255,159,151,118,255,160,152,118,255,161,152,118,255,162,153,118,255,163,154,117,255,164,155,117,255,165,156,117,255,166,156,117,255,167,157,117,255,168,158,116,255,169,159,116,255,170,160,116,255,171,161,116,255,172,161,115,255,173,162,115,255,174,163,115,255,175,164,115,255,176,165,114,255,177,166,114,255,178,166,114,255,180,167,113,255,181,168,113,255,182,169,113,255,183,170,112,255,184,171,112,255,185,171,112,255,186,172,111,255,187,173,111,255,188,174,110,255,189,175,110,255,190,176,110,255,191,177,109,255,192,177,109,255,193,178,108,255,194,179,108,255,195,180,108,255,197,181,107,255,198,182,107,255,199,183,106,255,200,184,106,255,201,184,105,255,202,185,105,255,203,186,104,255,204,187,104,255,205,188,103,255,206,189,103,255,208,190,102,255,209,191,102,255,210,192,101,255,211,192,101,255,212,193,100,255,213,194,99,255,214,195,99,255,215,196,98,255,216,197,97,255,217,198,97,255,219,199,96,255,220,200,96,255,221,201,95,255,222,202,94,255,223,203,93,255,224,203,93,255,225,204,92,255,227,205,91,255,228,206,91,255,229,207,90,255,230,208,89,255,231,209,88,255,232,210,87,255,233,211,86,255,235,212,86,255,236,213,85,255,237,214,84,255,238,215,83,255,239,216,82,255,240,217,81,255,241,218,80,255,243,219,79,255,244,220,78,255,245,221,77,255,246,222,76,255,247,223,75,255,249,224,73,255,250,224,72,255,251,225,71,255,252,226,70,255,253,227,69,255,255,228,67,255,255,229,66,255,255,230,66,255,255,231,67,255,255,232,68,255,255,233,69,255]); const RGBA32 = new Uint32Array(RGBA8.buffer) return {RGBA32, RGBA8}; }35:Tfe3,// used in the visualisation of the buffer PRGn = { const RGBA8 = Uint8Array.from([64,0,75,255,66,2,77,255,68,3,79,255,70,5,82,255,72,7,84,255,75,8,86,255,77,10,88,255,79,12,90,255,81,13,92,255,83,15,95,255,85,17,97,255,87,18,99,255,89,20,101,255,91,22,103,255,93,24,105,255,95,26,107,255,97,28,109,255,99,29,112,255,101,31,114,255,103,33,116,255,105,35,118,255,107,37,120,255,109,39,122,255,110,41,124,255,112,43,125,255,114,46,127,255,116,48,129,255,117,50,131,255,119,52,133,255,121,55,135,255,122,57,137,255,124,59,138,255,126,62,140,255,127,64,142,255,129,67,144,255,130,69,145,255,132,72,147,255,133,74,149,255,135,77,150,255,136,79,152,255,138,82,153,255,139,84,155,255,141,87,157,255,142,89,158,255,144,92,160,255,145,94,161,255,147,97,163,255,148,99,164,255,150,102,166,255,151,104,167,255,153,107,169,255,154,109,170,255,155,112,172,255,157,114,173,255,159,116,175,255,160,119,176,255,162,121,178,255,163,123,179,255,165,125,181,255,166,128,182,255,168,130,183,255,169,132,185,255,171,134,186,255,172,136,188,255,174,139,189,255,175,141,190,255,177,143,192,255,179,145,193,255,180,147,194,255,182,149,196,255,183,151,197,255,185,153,198,255,186,155,200,255,188,157,201,255,189,159,202,255,191,161,203,255,193,163,205,255,194,165,206,255,196,167,207,255,197,169,208,255,199,171,209,255,200,173,210,255,202,175,211,255,203,177,213,255,205,178,214,255,206,180,215,255,207,182,216,255,209,184,217,255,210,186,218,255,212,188,219,255,213,189,220,255,214,191,221,255,216,193,222,255,217,195,223,255,218,197,224,255,219,198,224,255,221,200,225,255,222,202,226,255,223,203,227,255,224,205,228,255,225,207,229,255,226,208,230,255,228,210,230,255,229,212,231,255,230,213,232,255,230,215,233,255,231,216,233,255,232,218,234,255,233,219,235,255,234,221,235,255,235,222,236,255,235,224,236,255,236,225,237,255,237,226,237,255,237,227,238,255,238,229,238,255,238,230,239,255,239,231,239,255,239,232,239,255,239,233,239,255,240,234,240,255,240,235,240,255,240,236,240,255,240,237,240,255,240,238,239,255,240,238,239,255,240,239,239,255,239,240,239,255,239,240,238,255,239,241,238,255,238,241,237,255,238,242,237,255,237,242,236,255,237,242,235,255,236,242,234,255,235,242,233,255,235,243,232,255,234,243,231,255,233,243,230,255,232,242,229,255,231,242,228,255,230,242,227,255,229,242,225,255,228,242,224,255,226,242,223,255,225,241,221,255,224,241,220,255,222,241,218,255,221,240,217,255,220,240,215,255,218,239,214,255,217,239,212,255,215,238,210,255,214,238,209,255,212,237,207,255,210,237,205,255,209,236,203,255,207,235,201,255,205,235,200,255,203,234,198,255,202,233,196,255,200,233,194,255,198,232,192,255,196,231,190,255,194,230,188,255,192,229,186,255,190,228,184,255,188,228,182,255,186,227,180,255,184,226,178,255,182,225,176,255,179,224,174,255,177,223,172,255,175,222,170,255,173,220,168,255,170,219,166,255,168,218,164,255,166,217,161,255,163,216,159,255,161,214,157,255,158,213,155,255,155,212,152,255,153,210,150,255,150,209,148,255,148,207,145,255,145,206,143,255,142,204,141,255,140,203,139,255,137,201,136,255,134,200,134,255,131,198,132,255,128,196,129,255,126,195,127,255,123,193,125,255,120,191,122,255,117,189,120,255,114,188,118,255,112,186,116,255,109,184,113,255,106,182,111,255,103,180,109,255,100,178,107,255,98,176,105,255,95,174,103,255,92,173,101,255,89,171,98,255,87,169,96,255,84,167,94,255,81,165,93,255,79,163,91,255,76,161,89,255,74,159,87,255,71,157,85,255,69,155,83,255,66,153,81,255,64,150,80,255,61,148,78,255,59,146,76,255,57,144,75,255,54,142,73,255,52,140,71,255,50,138,70,255,48,136,68,255,46,134,67,255,44,132,65,255,41,130,64,255,40,128,62,255,38,126,61,255,36,123,59,255,34,121,58,255,32,119,57,255,30,117,55,255,29,115,54,255,27,113,53,255,26,111,51,255,24,109,50,255,23,107,49,255,21,105,48,255,20,103,46,255,18,101,45,255,17,99,44,255,16,97,43,255,15,95,42,255,13,93,40,255,12,90,39,255,11,88,38,255,10,86,37,255,9,84,36,255,8,82,35,255,6,80,34,255,5,78,33,255,4,76,31,255,3,74,30,255,2,72,29,255,1,70,28,255,0,68,27,255]); const RGBA32 = new Uint32Array(RGBA8.buffer) RGBA32.reverse(); return {RGBA32, RGBA8}; }36:T1003,// used in the visualisation of the buffer Spectral = { const RGBA8 = Uint8Array.from([158,1,66,255,160,3,67,255,162,6,67,255,164,8,68,255,167,11,68,255,169,13,69,255,171,15,69,255,173,18,69,255,175,20,70,255,177,22,70,255,179,25,71,255,181,27,71,255,183,29,72,255,186,32,72,255,188,34,72,255,190,36,73,255,192,39,73,255,193,41,73,255,195,43,74,255,197,45,74,255,199,48,74,255,201,50,74,255,203,52,75,255,205,54,75,255,206,56,75,255,208,59,75,255,210,61,75,255,211,63,75,255,213,65,75,255,215,67,75,255,216,69,75,255,218,71,74,255,219,73,74,255,221,75,74,255,222,77,74,255,223,79,74,255,225,81,74,255,226,83,74,255,227,85,73,255,228,87,73,255,230,89,73,255,231,91,73,255,232,93,73,255,233,95,73,255,234,97,73,255,235,99,73,255,236,101,73,255,237,103,73,255,238,106,73,255,239,108,73,255,240,110,74,255,240,112,74,255,241,114,74,255,242,116,75,255,243,119,75,255,243,121,76,255,244,123,77,255,244,126,77,255,245,128,78,255,246,130,79,255,246,133,80,255,247,135,80,255,247,137,81,255,248,140,82,255,248,142,83,255,248,145,84,255,249,147,86,255,249,149,87,255,249,152,88,255,250,154,89,255,250,156,90,255,250,159,92,255,251,161,93,255,251,163,94,255,251,166,96,255,251,168,97,255,252,170,98,255,252,173,100,255,252,175,101,255,252,177,103,255,252,179,104,255,252,181,106,255,253,184,107,255,253,186,109,255,253,188,110,255,253,190,112,255,253,192,113,255,253,194,115,255,253,196,116,255,253,198,118,255,253,200,120,255,253,202,121,255,254,204,123,255,254,205,125,255,254,207,126,255,254,209,128,255,254,211,130,255,254,213,132,255,254,214,133,255,254,216,135,255,254,218,137,255,254,219,139,255,254,221,141,255,254,222,143,255,254,224,144,255,254,225,146,255,254,227,148,255,254,228,150,255,254,230,152,255,254,231,154,255,254,232,155,255,254,234,157,255,254,235,159,255,254,236,161,255,254,237,162,255,254,239,164,255,254,240,165,255,254,241,167,255,254,242,168,255,253,243,169,255,253,243,170,255,253,244,171,255,253,245,172,255,252,246,173,255,252,246,174,255,252,247,175,255,251,247,175,255,251,248,176,255,250,248,176,255,250,249,176,255,249,249,176,255,249,249,176,255,248,249,176,255,247,250,175,255,247,250,175,255,246,250,174,255,245,250,174,255,244,249,173,255,243,249,172,255,242,249,172,255,242,249,171,255,240,249,170,255,239,248,169,255,238,248,168,255,237,248,167,255,236,247,167,255,235,247,166,255,233,246,165,255,232,246,164,255,231,245,163,255,229,245,162,255,228,244,162,255,226,243,161,255,224,243,161,255,223,242,160,255,221,241,160,255,219,241,159,255,217,240,159,255,215,239,159,255,214,238,159,255,212,238,159,255,210,237,158,255,208,236,158,255,205,235,159,255,203,234,159,255,201,233,159,255,199,232,159,255,197,232,159,255,195,231,159,255,192,230,160,255,190,229,160,255,188,228,160,255,185,227,160,255,183,226,161,255,180,225,161,255,178,224,161,255,176,223,161,255,173,222,162,255,171,221,162,255,168,220,162,255,166,219,163,255,163,218,163,255,160,217,163,255,158,216,163,255,155,215,163,255,153,214,164,255,150,213,164,255,148,212,164,255,145,211,164,255,142,209,164,255,140,208,164,255,137,207,165,255,135,206,165,255,132,205,165,255,130,203,165,255,127,202,166,255,125,201,166,255,122,199,166,255,119,198,166,255,117,197,167,255,115,195,167,255,112,194,168,255,110,192,168,255,107,190,168,255,105,189,169,255,102,187,169,255,100,185,170,255,98,184,170,255,96,182,171,255,93,180,172,255,91,178,172,255,89,176,173,255,87,174,174,255,85,172,174,255,83,170,175,255,81,168,175,255,80,166,176,255,78,164,177,255,76,162,177,255,75,160,178,255,73,157,178,255,72,155,179,255,71,153,179,255,70,151,179,255,69,149,180,255,68,146,180,255,67,144,180,255,67,142,180,255,66,140,181,255,66,137,181,255,66,135,180,255,66,133,180,255,66,131,180,255,66,128,180,255,67,126,179,255,67,124,179,255,68,122,179,255,69,119,178,255,69,117,177,255,70,115,177,255,71,113,176,255,72,110,175,255,74,108,175,255,75,106,174,255,76,104,173,255,78,101,172,255,79,99,171,255,81,97,170,255,82,95,169,255,84,92,168,255,85,90,167,255,87,88,166,255,89,86,165,255,91,83,164,255,92,81,163,255,94,79,162,255]); const RGBA32 = new Uint32Array(RGBA8.buffer) RGBA32.reverse(); return {RGBA32, RGBA8}; }37:[] 2f:{"title":"Compiling Walt in an Observable notebook (experiment)","cells":[{"id":0,"value":"md`# Compiling Walt in an Observable notebook (experiment)\n\nEasy experimentation with the [Walt](https://github.com/ballercat/walt) language, and therefore \\`WASM\\`, right here in an Observable notebook!\n\n*(drag over the canvas below to draw ripples)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"// separate to enable full-screen mode\nwaltCanvas = DOM.canvas(width, height, 1)\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"viewof brushRadius = slider({\n title: \"Brush Radius\",\n min: 1,\n max: 200,\n step: 1,\n value: 10,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"viewof rainNoise = checkbox({\n options: [{ value: \"rain\", label: \"\\\"rain\\\" noise\"}],\n value: \"rain\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"viewof useColormap = checkbox({\n options: [{ value: \"toggle\", label: \"Use Color Ramp\"}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`*Demo code adapted from the [Walt Explorer](https://ballercat.github.io/walt/), originally by [Jason Tiscione](https://github.com/jtiscione).*\n\nTo quote the Readme in [the Walt github repo](https://github.com/ballercat/walt):\n\n> ⚡ _**Walt** is an alternative syntax for WebAssembly text format. It's an experiment for using JavaScript syntax to write to as 'close to the metal' as possible. **It's JavaScript with rules.** \\`.walt\\` files compile directly to WebAssembly binary format._\n> \n> *Highlights:*\n> \n> * _Write \"close to the metal\" JavaScript!_\n> * _**No C/C++ or Rust required**, just **typed** JavaScript._\n> * _**NO LLVM/binary toolkits required**, zero dependencies 100% written in JS._\n> * _Fast compilation, integrates into webpack!_\n\nOn top of that, the Walt compiler can run in the browser, so combined with Observable that should make it very easy to experiment with writing small WASM modules! :)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"WaltSource = md`## Walt Source\n\nThe raw Walt source code as a multiline text string, ready to be compiled:\n\n\\`\\`\\`typescript\n${waltSource}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`\n## Walt Source compiled to \\`ArrayBuffer\\`\n\nWebAssembly instances are created from binary blobs. So we have to take the textual Walt source string from \\`waltSource\\`, and compile it to an \\`ArrayBuffer\\` before it can be instantiated:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"compiledWaltBuffer = walt.compile(waltSource).buffer()","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"InstantiatingWASM = md`## Instantiation Function\n\n The instantiation function takes the buffer of compiled Walt code, creates a WebAssembly instantiation, and creates the scaffolding to connect the results to the rest of the browser environment.\n\nNote that the latter has to be customized depending on what your Walt code is trying to do. In this case, it has to \n\n- ensure there is enough instantiated memory for the heap\n- take the resulting \\`ArrayBuffer\\` and create multiple \\`TypedArray\\`s of the right size and at the correct offset, to give JavaScript access to the arrays used in the Wasm module.\n- connect mouse and touch events to calls to the \\`WASM\\` version of the \\`applyBrush\\` function, which \"draws\" on into these arrays\n- set up a cancellable loop that renders and paints the data to the canvas each frame`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"instantiatedWalt = instantiate(compiledWaltBuffer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"startWalt = {\n instantiatedWalt.run();\n // Thanks to mootari (https://beta.observablehq.com/@mootari) for the invalidation code\n invalidation.then(instantiatedWalt.cancel);\n return instantiatedWalt.running\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"Dependencies = md`## Dependencies and other code fragments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"walt = await require('walt-compiler')","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"import {checkbox, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"cividisReverse = {\n const RGBA32 = cividis.RGBA32.slice(0);\n RGBA32.reverse()\n const RGBA8 = new Uint8Array(RGBA32.buffer);\n return { RGBA32, RGBA8 };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"colorRamp = cividisReverse","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"/**\n * Is the current JS engine little endian or big endian?\n *\n * Example: imagine we have a Uint32Array `t32`, and a Uint8Array `t8`,\n * both using the same underlying buffer.\n * If the content of t8 is `[0x11, 0x22, 0x33, 0x44]`, then:\n * \n * t32[0] === 0x44332211 // little endian\n * t32[0] === 0x11223344 // big endian\n */\nisLittleEndian = (function () {\n let t32 = new Uint32Array(1);\n let t8 = new Uint8Array(t32.buffer);\n t8[0] = 0x11;\n t8[1] = 0x22;\n t8[2] = 0x33;\n t8[3] = 0x44;\n return t32[0] === 0x44332211;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"height = width>>1","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}