2f:[{"id":"5705654d20153ab7cc5dfa328c08d615483235b687a22cab9f6e9f7f578526e5f50a6c4f977da138a2dedb0c8c8ec8323eadd69d6817e93a7c529c8f483ab9f6","href":"https://static.observableusercontent.com/files/5705654d20153ab7cc5dfa328c08d615483235b687a22cab9f6e9f7f578526e5f50a6c4f977da138a2dedb0c8c8ec8323eadd69d6817e93a7c529c8f483ab9f6","name":"Cappuchin_Bridge_16.jpg","type":"image/jpeg","lastModified":1678573343200.504,"size":27061}] 2d:{"title":"Simple HTML Canvas","cells":[{"id":0,"value":"# Simple HTML Canvas","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"viewof operation = {\n let choices = radio({\n title: \"Image operation\",\n options: [\n {\n label:\n 'Brightness (pixel += delta)',\n value: \"brightness\"\n },\n {\n label:\n 'Right Shift (pixel += delta)',\n value: \"colorshift\"\n }\n ],\n value: \"brightness\"\n });\n\n choices.setAttribute(\"class\", \"radio-buttons\");\n\n return choices;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof amount = {\n const operations = {\n brightness: { min: -100, max: 100, step: 1 },\n colorshift: { min: 0, max: 8, step: 1 }\n };\n\n return slider(operations[operation]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"operation","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"canvas1 = {\n const canvas = DOM.canvas(imageTest.naturalWidth, imageTest.naturalHeight);\n const context = canvas.getContext(\"2d\");\n canvas.style =\n \"image-rendering: pixelated; image-rendering: crisp-edges; width: 100%;\";\n\n context.drawImage(\n imageTest,\n 0,\n 0,\n imageTest.naturalWidth,\n imageTest.naturalHeight\n );\n\n const imageData = context.getImageData(\n 0,\n 0,\n imageTest.naturalWidth,\n imageTest.naturalHeight\n );\n const operations = { brightness, colorshift };\n\n operations[operation](imageData.data, amount);\n\n brightness(imageData.data, amount);\n // make15Bit(imageData, amount);\n\n context.putImageData(imageData, 0, 0);\n\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"w = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"wasmMemory = new Uint8Array(height * w * 4 * 4) // pretend this is the wasm memory","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"outputPointer = 1024 // rustWasm.get_output_buffer_pointer();","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"imageDataArray = wasmMemory.slice(outputPointer, outputPointer + height * w * 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"url = \"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Cappuchin_Bridge_(30706076020).jpg/1079px-Cappuchin_Bridge_(30706076020).jpg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"imageTest = d3.image(url, { crossOrigin: \"anonymous\" })\n//imageTest = FileAttachment(\"Cappuchin_Bridge_16.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"imageTest.naturalWidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"imageTest.naturalHeight","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"function brightness(data, delta) {\n for (let i = 0; i < data.length; i += 4) {\n data[i + 0] = data[i + 0] + delta;\n data[i + 1] = data[i + 1] + delta;\n data[i + 2] = data[i + 2] + delta;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"function colorshift(data, shift) {\n let mask = (0xff >> shift) << shift;\n for (let i = 0; i < data.length; i += 4) {\n data[i + 0] = data[i + 0] & mask;\n data[i + 1] = data[i + 1] & mask;\n data[i + 2] = data[i + 2] & mask;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"function mask(shift) {\n return (0xff >> shift) << shift;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"mask(7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"import { radio, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}