30:T4aa,function showImageData(imgData) { const [w, h] = [imgData.width, imgData.height]; const ctx = DOM.context2d(w, h, 1); ctx.putImageData(imgData, 0, 0); const tooltip = html`

`; Object.assign(tooltip.style, { position: "absolute", border: "1px solid black", background: "white", borderRadius: "5px", textAlign: "center", padding: "5px 0", width: "8em", font: "8pt monospace", top: "10px", left: "10px", zIndex: 2 }); const container = htl.html`

`; Object.assign(container.style, { display: "inline-block", position: "relative", margin: "20px" }); container.append(ctx.canvas, tooltip); container.onmousemove = container.onmouseenter = (e) => { const x = e.offsetX; const y = e.offsetY; const i = (x + y * w) * 4; if ( x >= 0 && x < w && y >= 0 && y < h && i >= 0 && i < imgData.data.length ) { tooltip.innerHTML = `${imgData.data[i]}, ${imgData.data[i + 1]}, ${ imgData.data[i + 2] }`; Object.assign(tooltip.style, { top: `calc(${y - 30}px)`, left: `calc(${x}px - 4em)` }); } }; return container; }31:[{"id":"6d022df240597164b101a9920aaeb97d29a46f534777756cb1e83cfb5cd7a664d57b73f418c8a0fae02662a0964941722b165610ebf7eeb97bb01aa7a1025be8","href":"https://static.observableusercontent.com/files/6d022df240597164b101a9920aaeb97d29a46f534777756cb1e83cfb5cd7a664d57b73f418c8a0fae02662a0964941722b165610ebf7eeb97bb01aa7a1025be8","name":"oklabTriangleNotebook.png","type":"image/png","lastModified":1715607653968.156,"size":75252},{"id":"67d0aa61dfc8f710716dabc91719f9bc95c25c4eca624b56bfbe2f1c2135d11408671eb8a31dbeba39fecfb8f6d0dd948b6fd5a167620cc08249a26d1b7e9211","href":"https://static.observableusercontent.com/files/67d0aa61dfc8f710716dabc91719f9bc95c25c4eca624b56bfbe2f1c2135d11408671eb8a31dbeba39fecfb8f6d0dd948b6fd5a167620cc08249a26d1b7e9211","name":"oklabTrianglePrototype.png","type":"image/png","lastModified":1715607654273.075,"size":77395}] 2e:{"title":"Image Difference","cells":[{"id":0,"value":"md`# Image Difference\n\nPick two images to compare. The colors below correspond to the absolute difference between the r,g,b channels of both images. You can also specify a multiplier to enhance the difference.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"viewof afile = localFileInput({\n accept: \".png\",\n label: \"Image A\",\n value: FileAttachment(\"oklabTriangleNotebook.png\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof bfile = localFileInput({\n accept: \".png\",\n label: \"Image B\",\n value: FileAttachment(\"oklabTrianglePrototype.png\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"html`

${showImageData(imageData(a))}${showImageData(imageData(b))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof multiplier = Inputs.radio([1, 5, 10, 50, 100], {\n label: \"difference multiplier\",\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"showImageData(imageDataDifference(imageData(b), imageData(a), multiplier))","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"
\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"function imageData(img, options = {}) {\n const { width = 500, height = 500 } = options;\n const ctx = DOM.context2d(width, height, 1);\n ctx.drawImage(img, 0, 0, width, height);\n return ctx.getImageData(0, 0, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"function imageDataDifference(imgData1, imgData2, multiplier = 1) {\n const [a, b] = [imgData1.data, imgData2.data];\n const result = new ImageData(imgData1.width, imgData1.height);\n const c = result.data;\n const n = a.length;\n for (let i = 0; i < n; ) {\n c[i] = Math.min(255, Math.abs(a[i] - b[i]) * multiplier);\n i++;\n c[i] = Math.min(255, Math.abs(a[i] - b[i]) * multiplier);\n i++;\n c[i] = Math.min(255, Math.abs(a[i] - b[i]) * multiplier);\n i++;\n c[i] = 255;\n i++;\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"a = afile.image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"b = bfile.image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"function localFileInput({\n accept, // e.g., \".txt,.md\"\n label,\n value // set the initial value (typically to a FileAttachment),\n} = {}) {\n const lab = label\n ? html`${label}`\n : \"\";\n return Object.assign(\n htl.html`