2f:[{"id":"21baa010e0945600b5e146f14445102631cb85c502d32bf7e37e5724b4ade6d7bce0d7b2344bfef44f4943f4a3224a1831b409f3c75466e6badf909b98faf547","href":"https://static.observableusercontent.com/files/21baa010e0945600b5e146f14445102631cb85c502d32bf7e37e5724b4ade6d7bce0d7b2344bfef44f4943f4a3224a1831b409f3c75466e6badf909b98faf547","name":"stld-19.jpg","type":"image/jpeg","lastModified":1685726579597.21,"size":63104},{"id":"223f75b950621c55236d3a1ecb3ece9404cfc6d9f328857d24c46529cdaecd00d4c6f76636441aa042177ef72a533274e8dc4f1e90b73d617c2c05cb3fb86b89","href":"https://static.observableusercontent.com/files/223f75b950621c55236d3a1ecb3ece9404cfc6d9f328857d24c46529cdaecd00d4c6f76636441aa042177ef72a533274e8dc4f1e90b73d617c2c05cb3fb86b89","name":"thor-17.jpg","type":"image/jpeg","lastModified":1685726579908.569,"size":95083},{"id":"c7fe1d0257d90778326b6e8b21e4a61e19d8c098940977affdd44a5164126d289f8dd8007596d9e5910a51f3a9e27c7e34e01a5f824fcba0fa7574c54908ad01","href":"https://static.observableusercontent.com/files/c7fe1d0257d90778326b6e8b21e4a61e19d8c098940977affdd44a5164126d289f8dd8007596d9e5910a51f3a9e27c7e34e01a5f824fcba0fa7574c54908ad01","name":"core-57.jpg","type":"image/jpeg","lastModified":1685726579646.1,"size":72429},{"id":"ed2a91d5a09f5ff74c4414210da2e7834f783476a2f7cf973f71582ee8df46ab9bcd3205d2ebe7612e8febc4bdbb7e5cff8dede3973a02dce0962e984b604ca9","href":"https://static.observableusercontent.com/files/ed2a91d5a09f5ff74c4414210da2e7834f783476a2f7cf973f71582ee8df46ab9bcd3205d2ebe7612e8febc4bdbb7e5cff8dede3973a02dce0962e984b604ca9","name":"hlk-18.jpg","type":"image/jpeg","lastModified":1685726579770.262,"size":63881},{"id":"baec820d978af6ec582ab5597bd1f98cdbb9efca04313aab81de0f576c673dd78d7cc1ed61dfc53bc451fe6f48008e949936a69861e9a8c18e5a9193cf1e54a4","href":"https://static.observableusercontent.com/files/baec820d978af6ec582ab5597bd1f98cdbb9efca04313aab81de0f576c673dd78d7cc1ed61dfc53bc451fe6f48008e949936a69861e9a8c18e5a9193cf1e54a4","name":"bkw-11.jpg","type":"image/jpeg","lastModified":1685726579669.287,"size":72639},{"id":"ff233457b656381232e80476af88a08a7e212b64511311a5666bd007298f330847bd0faebd717793e9d0101001d6a05558f1653b095844db00da45a2e08cf32d","href":"https://static.observableusercontent.com/files/ff233457b656381232e80476af88a08a7e212b64511311a5666bd007298f330847bd0faebd717793e9d0101001d6a05558f1653b095844db00da45a2e08cf32d","name":"thor-31.jpg","type":"image/jpeg","lastModified":1685726579788.1,"size":61883},{"id":"fd5bec742227c011d992860b06d4d5ea81311ccf22ca121a9e781da5e36e0e680fd795b8dec0e1fb1eb0c6099347e69c63816e11d89d5d7f9505860ca7f172d0","href":"https://static.observableusercontent.com/files/fd5bec742227c011d992860b06d4d5ea81311ccf22ca121a9e781da5e36e0e680fd795b8dec0e1fb1eb0c6099347e69c63816e11d89d5d7f9505860ca7f172d0","name":"mts-13.jpg","type":"image/jpeg","lastModified":1685726579873.687,"size":81327},{"id":"79e1c692b1de1a74f4c33b52923849216d3379a9e20a39bb90a0da2e0a5ff4302f22ab5aef98aa48b16b05fdcef07124117fbdd402981736bf441824973b578f","href":"https://static.observableusercontent.com/files/79e1c692b1de1a74f4c33b52923849216d3379a9e20a39bb90a0da2e0a5ff4302f22ab5aef98aa48b16b05fdcef07124117fbdd402981736bf441824973b578f","name":"sm-10.jpg","type":"image/jpeg","lastModified":1685307995373.847,"size":68145},{"id":"8ccf023e3a283a4851cced334629f0fbb9c67b53383309b908f74e0112e008468769c51470e9081823939e122cd8f3e163b24b548ee5fd0832a1f84ba1d65cec","href":"https://static.observableusercontent.com/files/8ccf023e3a283a4851cced334629f0fbb9c67b53383309b908f74e0112e008468769c51470e9081823939e122cd8f3e163b24b548ee5fd0832a1f84ba1d65cec","name":"core-76.jpg","type":"image/jpeg","lastModified":1685307995433.913,"size":76290}] 2d:{"title":"Image histogram transfer","cells":[{"id":0,"value":"# Image histogram transfer\n\nThe green / red / yellow / blue backgrounds on these cards don’t quite match,\ndue to differences in lighting and camera when they were captured. Can we fix it\nusing software?\n\nhttps://en.wikipedia.org/wiki/Histogram_matching\n","pinned":false,"hidden":false,"mode":"md"},{"id":603,"value":"viewof fixIt = Inputs.toggle({ label: \"Fix it!\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"{\n const image = await source.image();\n const canvas = DOM.canvas(image.width, image.height);\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(image, 0, 0);\n const imgData = ctx.getImageData(0, 0, image.width, image.height);\n const { data } = imgData;\n\n if (fixIt) {\n for (let i = 0; i < data.length; i += 4)\n for (const c of [0, 1, 2])\n data[i + c] = Math.min(adjusted[c][data[i + c]], 255);\n }\n\n ctx.putImageData(imgData, 0, 0);\n canvas.style.width = \"30%\";\n\n return htl.html`\n

\n ${canvas}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"files = [\n FileAttachment(\"sm-10.jpg\"),\n FileAttachment(\"core-76.jpg\"),\n FileAttachment(\"hlk-18.jpg\"),\n FileAttachment(\"core-57.jpg\"),\n // FileAttachment(\"thor-17.jpg\"),\n FileAttachment(\"thor-31.jpg\"),\n FileAttachment(\"bkw-11.jpg\"),\n FileAttachment(\"mts-13.jpg\"),\n FileAttachment(\"stld-19.jpg\")\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"viewof source = Inputs.select(\n files,\n {\n label: \"Source\",\n format: (d) => d.name\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"viewof target = Inputs.select(\n files.filter(d => d !== source),\n {\n label: \"Target\",\n format: (d) => d.name\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"Whole image histograms:","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"plot(histogram(await source.image()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"plot(histogram(await target.image()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"Histograms for just the bottom footer area:","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"footer = [0.12, -0.04, 0.88, 0.04]","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"sourceHistogram = histogram(await source.image(), ...footer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"plot(sourceHistogram)","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"targetHistogram = histogram(await target.image(), ...footer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"plot(targetHistogram)","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"An adjusted version of the source histogram just above, matching cumulative distribution functions.","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"histogram = (image, x = 0, y = 0, w = image.width, h = image.height) => {\n if (x < 1) x *= image.width;\n if (x < 0) x += image.width;\n if (y < 1) y *= image.height;\n if (y < 0) y += image.height;\n if (w <= 1) w *= image.width;\n if (h <= 1) h *= image.height;\n\n const canvas = DOM.canvas(image.width, image.height);\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(image, 0, 0);\n const { data } = ctx.getImageData(x, y, w, h);\n const histograms = Array.from({ length: 3 }, () => new Array(256).fill(0));\n for (let i = 0; i < data.length; i += 4)\n for (const c of [0, 1, 2]) histograms[c][data[i + c]]++;\n return histograms;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"plot = (histograms) =>\n Plot.plot({\n marks: [\n [\"red\", \"green\", \"blue\"].map((stroke, i) =>\n Plot.lineY(histograms[i], { stroke, strokeWidth: 1, curve: \"bump-x\" })\n )\n ],\n y: { type: \"sqrt\", tickFormat: \"s\" },\n height: 160,\n width: 480\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"Cumulative distribution functions:","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"plot(sourceHistogram.map(cdf))","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"plot(targetHistogram.map(cdf))","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"Adjusted cumulative distribution function for the source:","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"plot(adjusted)","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"cdf = (histogram) => {\n const cdf = d3.cumsum(histogram);\n const m = cdf[cdf.length - 1];\n return cdf.map((d) => d / m);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"adjusted = d3.zip(sourceHistogram, targetHistogram).map(([sh, th]) => {\n const normalizedCDF = cdf(sh);\n const targetCDF = cdf(th);\n\n return normalizedCDF.map((d) => d3.bisectLeft(targetCDF, d));\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"Plot.plot({\n width: 300,\n aspectRatio: true,\n grid: true,\n x: { ticks: d3.range(0, 257, 32) },\n y: { ticks: d3.range(0, 257, 32) },\n marks: [\n [0, 1, 2].map((c) =>\n Plot.lineY(adjusted[c], { stroke: [\"red\", \"green\", \"blue\"][c] })\n ),\n Plot.ruleY([0, 256])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}