31:[{"id":"50e401078b5fcadb8e991ce85427e2f9d36bf96c3fabaf56b88172f9d0f820ac94e4c9259d9cc8787b05d9d4aaa930ae8abf04ee017c5d3d6df7d0189c8b41de","href":"https://static.observableusercontent.com/files/50e401078b5fcadb8e991ce85427e2f9d36bf96c3fabaf56b88172f9d0f820ac94e4c9259d9cc8787b05d9d4aaa930ae8abf04ee017c5d3d6df7d0189c8b41de","name":"IMG_1353.jpeg","type":"image/jpeg","lastModified":1599352276907.567,"size":2651189},{"id":"19bdee52079d931e69e973109e299533ec9a2d058d1cec71a8a8d4e3ac8e2cc9918fe21417951011f8e73bae86f625594d75731db3e52f8a3b2cc8d3eafbcc99","href":"https://static.observableusercontent.com/files/19bdee52079d931e69e973109e299533ec9a2d058d1cec71a8a8d4e3ac8e2cc9918fe21417951011f8e73bae86f625594d75731db3e52f8a3b2cc8d3eafbcc99","name":"IMG_1131.jpeg","type":"image/jpeg","lastModified":1599341988184.526,"size":2556322},{"id":"c20dbfb57a5b231d34f3b55585f67d3c06f30be4bb93f00f902f7e9fb262f891ac057515dace6ef3829fc49499a583f6e4a121673c12a9e1b14ba119257e6178","href":"https://static.observableusercontent.com/files/c20dbfb57a5b231d34f3b55585f67d3c06f30be4bb93f00f902f7e9fb262f891ac057515dace6ef3829fc49499a583f6e4a121673c12a9e1b14ba119257e6178","name":"IMG_1194.jpeg","type":"image/jpeg","lastModified":1599372117161.758,"size":2709680},{"id":"ead343f36fbb96c18fab85afaca2fd56376ed4e97c1427a5bc72a024c93dfb8369d87001cb3a61474334316e442ee07ede47857e04fd633ec05f5bda656f9eb1","href":"https://static.observableusercontent.com/files/ead343f36fbb96c18fab85afaca2fd56376ed4e97c1427a5bc72a024c93dfb8369d87001cb3a61474334316e442ee07ede47857e04fd633ec05f5bda656f9eb1","name":"IMG_1159.jpeg","type":"image/jpeg","lastModified":1599369105151.084,"size":2634995},{"id":"68babe27fc09f9d4c4e00879cb98baa7c36c1495d3d7d6f4b111323eb118ee1dda1b7334d1182396345280eb36f6a01b3a9417775d6d94b1edbf8df0d181556c","href":"https://static.observableusercontent.com/files/68babe27fc09f9d4c4e00879cb98baa7c36c1495d3d7d6f4b111323eb118ee1dda1b7334d1182396345280eb36f6a01b3a9417775d6d94b1edbf8df0d181556c","name":"IMG_1141.jpeg","type":"image/jpeg","lastModified":1599368066240.953,"size":2673617},{"id":"6b0a62fa3d69ee4fa71554d3df8e56bdc0771eaaf998ba1e12ee93ee1c95f4c291ca394ee9172fc647f2f4c7350689c407569ab01564c3d6752abcff1a79fa45","href":"https://static.observableusercontent.com/files/6b0a62fa3d69ee4fa71554d3df8e56bdc0771eaaf998ba1e12ee93ee1c95f4c291ca394ee9172fc647f2f4c7350689c407569ab01564c3d6752abcff1a79fa45","name":"IMG_1133.jpeg","type":"image/jpeg","lastModified":1599366866388.347,"size":2537693},{"id":"2e7a2c5dc8f67000b1de743603733655cc28df4617c8c7113b3b8404b7200e207cdc07438e377239e54831674fbe8e44348c6dfcb50c98550b4229553f6870bb","href":"https://static.observableusercontent.com/files/2e7a2c5dc8f67000b1de743603733655cc28df4617c8c7113b3b8404b7200e207cdc07438e377239e54831674fbe8e44348c6dfcb50c98550b4229553f6870bb","name":"IMG_1162.jpeg","type":"image/jpeg","lastModified":1599379368868.049,"size":2571409},{"id":"1db44e89b94043ceb48067c8347a08010ce828c561d79bd133d4a4bc386cafbaafb1dd7fc402576196941fa07d0979ef61b48789f8ad72accd5d83e6b4cb6e32","href":"https://static.observableusercontent.com/files/1db44e89b94043ceb48067c8347a08010ce828c561d79bd133d4a4bc386cafbaafb1dd7fc402576196941fa07d0979ef61b48789f8ad72accd5d83e6b4cb6e32","name":"IMG_1158.jpeg","type":"image/jpeg","lastModified":1599380794000.408,"size":2613385},{"id":"3456002968fe18b0a0555fd73ba5e54c5f9f37102b679f9b0b0d52aebd389996711763f93ced0dba406d755b48c8d789fbbf0731de7229f73aa9c50e5c52501e","href":"https://static.observableusercontent.com/files/3456002968fe18b0a0555fd73ba5e54c5f9f37102b679f9b0b0d52aebd389996711763f93ced0dba406d755b48c8d789fbbf0731de7229f73aa9c50e5c52501e","name":"IMG_1134.jpeg","type":"image/jpeg","lastModified":1599348534195.601,"size":2641162},{"id":"d5987db324cd1c5512a66bd56f027b68520f13cafb05f82e988ccfdfa64e0e7b3faab7f7c00ff2c325a3a43b738b43c1eb38f4179fcd0ff249173469c00e98bb","href":"https://static.observableusercontent.com/files/d5987db324cd1c5512a66bd56f027b68520f13cafb05f82e988ccfdfa64e0e7b3faab7f7c00ff2c325a3a43b738b43c1eb38f4179fcd0ff249173469c00e98bb","name":"IMG_1155.jpeg","type":"image/jpeg","lastModified":1599348553708.294,"size":2602673},{"id":"b4647070b9ba1791ba042063f7e04429393dc110209987129cbb053d42c08042ad6cc24babaa0becbbc764aa1eeb7c37810146c3f843cf3b77a603e27c89173a","href":"https://static.observableusercontent.com/files/b4647070b9ba1791ba042063f7e04429393dc110209987129cbb053d42c08042ad6cc24babaa0becbbc764aa1eeb7c37810146c3f843cf3b77a603e27c89173a","name":"IMG_1410.jpeg","type":"image/jpeg","lastModified":1600061454875.061,"size":2759319},{"id":"8187a44d48350ecc1050c6ca81df14f3830c722781a60b41e1a0aa100f414869a3af34b1a4ac8d0517a5acf81a5262793406a27b346656f5f1bdaf14b3fe1741","href":"https://static.observableusercontent.com/files/8187a44d48350ecc1050c6ca81df14f3830c722781a60b41e1a0aa100f414869a3af34b1a4ac8d0517a5acf81a5262793406a27b346656f5f1bdaf14b3fe1741","name":"IMG_1570.jpeg","type":"image/jpeg","lastModified":1600061820317.131,"size":2755117},{"id":"e69d0c16c37b9ea2873ce32fb4849d93bfbe5a70e343048c846485c883b7529bb9c8888e0c173e87eca8380fab9d30e004be964831531a994037a4b0ac895bef","href":"https://static.observableusercontent.com/files/e69d0c16c37b9ea2873ce32fb4849d93bfbe5a70e343048c846485c883b7529bb9c8888e0c173e87eca8380fab9d30e004be964831531a994037a4b0ac895bef","name":"IMG_1219@1.jpeg","type":"image/jpeg","lastModified":1599466736324.146,"size":2661888},{"id":"0114ecb40c00f30577576a3a6b28f4f18988dda6cd486cd1c3be90f86afcd5d641d250972fef955b90fd2a3e4410625d05628da3b2d5206c574b194dd57f8507","href":"https://static.observableusercontent.com/files/0114ecb40c00f30577576a3a6b28f4f18988dda6cd486cd1c3be90f86afcd5d641d250972fef955b90fd2a3e4410625d05628da3b2d5206c574b194dd57f8507","name":"IMG_1882.jpeg","type":"image/jpeg","lastModified":1600067304470.045,"size":2593291},{"id":"294b932d004577d9fd9d12e254fb39099d1c428f181baa23edfdc71633dfeeb7b962ef8e55451bfa4c4622e205ec1db3b07221323c09fc8b93b992c78e285db9","href":"https://static.observableusercontent.com/files/294b932d004577d9fd9d12e254fb39099d1c428f181baa23edfdc71633dfeeb7b962ef8e55451bfa4c4622e205ec1db3b07221323c09fc8b93b992c78e285db9","name":"IMG_1884.jpeg","type":"image/jpeg","lastModified":1600067304488.053,"size":2629901},{"id":"9965cd9fc97148b489901e9b2b991944a0411b52dc74ae4f6406ab51c40b22b821dd729755b2d2120ec4b534a68ca6c239206bf29e3f9fb2088b4c851247f2d0","href":"https://static.observableusercontent.com/files/9965cd9fc97148b489901e9b2b991944a0411b52dc74ae4f6406ab51c40b22b821dd729755b2d2120ec4b534a68ca6c239206bf29e3f9fb2088b4c851247f2d0","name":"55.jpeg","type":"image/jpeg","lastModified":1678947752327.518,"size":2593733},{"id":"9b33fa836e8cf3be442d537491b9742ede5c0bfcc2cbb7f14dd8dee50165cff8517e2dab1c74052c07d7ddfe491aa1ade41be971b4de096830630ff4df06db2a","href":"https://static.observableusercontent.com/files/9b33fa836e8cf3be442d537491b9742ede5c0bfcc2cbb7f14dd8dee50165cff8517e2dab1c74052c07d7ddfe491aa1ade41be971b4de096830630ff4df06db2a","name":"IMG_2001.jpeg","type":"image/jpeg","lastModified":1603519075638.44,"size":2269910},{"id":"f3afbbefc7ad9e697579777f8ca443c17fc316a80420589f2077f87cdb06b7ca608645cbb6addb657a087ff51ffd68fce08c21a42a0873b4059b17e30903afd6","href":"https://static.observableusercontent.com/files/f3afbbefc7ad9e697579777f8ca443c17fc316a80420589f2077f87cdb06b7ca608645cbb6addb657a087ff51ffd68fce08c21a42a0873b4059b17e30903afd6","name":"55@1.jpeg","type":"image/jpeg","lastModified":1679291457324.812,"size":2323796},{"id":"3620749994cf4941202ef99cea7967e6705f6b7132b295da4464d05acb0d0f8bc875b7cb200f06c624aaf98f33e243cf5c2bc79ae38e8a32df21cb3812e4252f","href":"https://static.observableusercontent.com/files/3620749994cf4941202ef99cea7967e6705f6b7132b295da4464d05acb0d0f8bc875b7cb200f06c624aaf98f33e243cf5c2bc79ae38e8a32df21cb3812e4252f","name":"54.jpeg","type":"image/jpeg","lastModified":1679207382711.751,"size":2200112},{"id":"f093bbb4ef1b56d90aff983f813296078e9874625e114f7cf106190df11140e0b49560e6054aa2ac3165a553312f53e0c29b206bcad3a4e33ee2ff9b1567d2d6","href":"https://static.observableusercontent.com/files/f093bbb4ef1b56d90aff983f813296078e9874625e114f7cf106190df11140e0b49560e6054aa2ac3165a553312f53e0c29b206bcad3a4e33ee2ff9b1567d2d6","name":"2.jpeg","type":"image/jpeg","lastModified":1679207443683.198,"size":2017082},{"id":"f2df51e89f032efd2448f3d0722e447651685d387f58406071e5cde18d84a59a708a250cbe64851051a5590dbd5773b4c12be1d5fa9ab9d9b8d24ea495cb0b50","href":"https://static.observableusercontent.com/files/f2df51e89f032efd2448f3d0722e447651685d387f58406071e5cde18d84a59a708a250cbe64851051a5590dbd5773b4c12be1d5fa9ab9d9b8d24ea495cb0b50","name":"13+.jpeg","type":"image/jpeg","lastModified":1679765560790.679,"size":2336815},{"id":"96fcfd37ca48c05390e8fc32a7d834f111a225a08df553aa69a5dae8cbe16991c0148140dc479a79391e3148589ae749f7fec6f6e184b17b3fee867a6d824d14","href":"https://static.observableusercontent.com/files/96fcfd37ca48c05390e8fc32a7d834f111a225a08df553aa69a5dae8cbe16991c0148140dc479a79391e3148589ae749f7fec6f6e184b17b3fee867a6d824d14","name":"5.jpeg","type":"image/jpeg","lastModified":1680931431512.11,"size":2650439},{"id":"bfc236c43eac92f321d98220e70be6af79da1f30e047361faf562c7706c5a3f3059754ed5113f87a184a5904ecb6b910400c471102350e0f33b6882daa980282","href":"https://static.observableusercontent.com/files/bfc236c43eac92f321d98220e70be6af79da1f30e047361faf562c7706c5a3f3059754ed5113f87a184a5904ecb6b910400c471102350e0f33b6882daa980282","name":"6.jpeg","type":"image/jpeg","lastModified":1680931898930.458,"size":2371460},{"id":"170d960af42959a965be14c3c01a90aeb941f49730efb84c734583266485eec2e47fa5eb660848c894261e3703e819837f3b68118d2b2280975b4d2d1d15cff9","href":"https://static.observableusercontent.com/files/170d960af42959a965be14c3c01a90aeb941f49730efb84c734583266485eec2e47fa5eb660848c894261e3703e819837f3b68118d2b2280975b4d2d1d15cff9","name":"13.jpeg","type":"image/jpeg","lastModified":1681025191734.02,"size":1403128},{"id":"0e8a65700e3947c6c2d603253dfb484bfee4c35ba0bf3c74acb8ff003ea72a055e32a5d201ab25b51973b50def7969ace0a99c4ce912bc073fda5162c32d059f","href":"https://static.observableusercontent.com/files/0e8a65700e3947c6c2d603253dfb484bfee4c35ba0bf3c74acb8ff003ea72a055e32a5d201ab25b51973b50def7969ace0a99c4ce912bc073fda5162c32d059f","name":"1a.jpeg","type":"image/jpeg","lastModified":1681025339657.953,"size":2528810},{"id":"54628aafb04d173d227828b385cc076cc6cf33a487bcd12aebe777d399e94fd69a00cbbedc152ded56fe6a6c2474f50af6aee86dc7903cefc9f10b9e9420b57b","href":"https://static.observableusercontent.com/files/54628aafb04d173d227828b385cc076cc6cf33a487bcd12aebe777d399e94fd69a00cbbedc152ded56fe6a6c2474f50af6aee86dc7903cefc9f10b9e9420b57b","name":"5@1.jpeg","type":"image/jpeg","lastModified":1681026216658.124,"size":1969267},{"id":"9ef60e5f50d0b351e141ba11fa9693b7575b55a1c290defe2ebd277f2b7bb8361579963290b0cf67b83931fdff6be4055f954845e19a1c0e7ee2c87c1d07c0bd","href":"https://static.observableusercontent.com/files/9ef60e5f50d0b351e141ba11fa9693b7575b55a1c290defe2ebd277f2b7bb8361579963290b0cf67b83931fdff6be4055f954845e19a1c0e7ee2c87c1d07c0bd","name":"29.jpeg","type":"image/jpeg","lastModified":1693762775014.473,"size":2280769},{"id":"9150ad2a89403434d3918bb002ffbd328c9f756604b990373ac35421a1d0a945d1d26eddccf4ba95843ea1cb35a3d7c862c86dd89e2cc78558f25192e1750aab","href":"https://static.observableusercontent.com/files/9150ad2a89403434d3918bb002ffbd328c9f756604b990373ac35421a1d0a945d1d26eddccf4ba95843ea1cb35a3d7c862c86dd89e2cc78558f25192e1750aab","name":"14.jpeg","type":"image/jpeg","lastModified":1694319123352.913,"size":1642264}] 2f:{"title":"Makeshift camera phone scanner","cells":[{"id":0,"value":"# Makeshift camera phone scanner\n\nI taped my phone to a ring light to “scan” my\n[Marvel Champions](https://www.fantasyflightgames.com/en/products/marvel-champions-the-card-game/)\ncards.\n\nDissatisfied with all of the app store “scanner” apps, I attempted to write my\nown card extraction based on my unique scanning constraints: a white background\nwith consistent lighting, but camera might not be perfectly top-down and card\ncan be slightly rotated. It turned out better than the general purpose apps!\n","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"files = [\n FileAttachment(\"13+.jpeg\"),\n FileAttachment(\"29.jpeg\"),\n FileAttachment(\"IMG_1131.jpeg\"),\n FileAttachment(\"IMG_1141.jpeg\"),\n FileAttachment(\"IMG_1158.jpeg\"),\n FileAttachment(\"IMG_1410.jpeg\"),\n FileAttachment(\"54.jpeg\"),\n FileAttachment(\"55@1.jpeg\"),\n FileAttachment(\"2.jpeg\"),\n FileAttachment(\"13.jpeg\"),\n FileAttachment(\"1a.jpeg\"),\n FileAttachment(\"5@1.jpeg\"),\n FileAttachment(\"14.jpeg\"),\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"### Given an image…","pinned":false,"hidden":false,"mode":"md"},{"id":1602,"value":"viewof file = Inputs.select(files, { format: (d) => d.name, label: \"Source image\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"image = {\n const img = await file.image()\n const canvas = DOM.canvas(img.width, img.height)\n const ctx = canvas.getContext('2d')\n ctx.drawImage(img, 0, 0)\n return ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"input = canvas(image)","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"### Threshold\n\nCreate a monochrome image based on luminosity and a manually picked threshold.\n","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"luminosity = (r, g, b) => 0.2126 * r + 0.7125 * g + 0.0722 * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1439,"value":"viewof t = Inputs.range([100, 200], {label: \"Threshold\", value: 130, step: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"threshold = (l) => l >= t ? 255 : 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"thresholded = {\n const result = new ImageData(image.width, image.height),\n r = result.data,\n d = image.data\n for (let i = 0; i < d.length; i += 4) {\n r[i] = r[i + 1] = r[i + 2] = threshold(luminosity(d[i], d[i + 1], d[i + 2]))\n r[i + 3] = d[i + 3]\n }\n return result\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1588,"value":"edgeErrors","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"canvas(thresholded)","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"### Minimum area bounding quadrilateral\n\nWe need a quadrilateral to extract, so now we’re meandering into made up\nalgorithm territory.\n\nFirst, let’s grab all the ⟨x, y⟩ points that are black in the thresholded image.\nTo deal with a few pixels of noise in all that white background, we’d normally\nwant to do a [kernel convolution][1] to consider it among its neighbors and\nfilter them out, but we don’t have time for that, so just check pixels “around”\nit too.\n\nAlso randomly sample down matching pixels which helps reduce noise and speed up\nthe following steps, but leads to a nondeterministic result, which I’m undecided\nif I like or not.\n\n[1]: https://en.wikipedia.org/wiki/Kernel_(image_processing)#Convolution\n","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"points = {\n const points = []\n const { data } = thresholded\n for (let i = 0; i < data.length; i += 4) {\n // sample down\n if (Math.random() < 0.95) continue;\n // super hacky filtering: check a pixels 5 away too\n if (data[i] === 0 && data[i - 20] === 0 && data[i + 20] === 0) {\n const p = i / 4\n points.push([p % image.width, Math.floor(p / image.width)])\n }\n }\n return points\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1482,"value":"// TODO view points","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"Now the actually novel part. I shall dub this “rainbow edge bounding\nquadrilateral” for lack of a better name and research. If you know of a proper\nsolution, let me know!\n\nCreate a convex hull around all the points. For all the edges of that hull,\ncategorize them into one of four a sides using its angle, throwing out outliers,\nthen find the longest edge per side. Extend those edges out to their\nintersecting vertices.\n","pinned":false,"hidden":false,"mode":"md"},{"id":762,"value":"hull = d3.polygonHull(points)","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"angle = ([[x1, y1], [x2, y2]]) => Math.atan2(y2 - y1, x2 - x1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"edges = {\n // create edges\n const wrappedHull = hull.concat([hull[0]]);\n const edges = [];\n for (let i = 0; i < wrappedHull.length - 1; i++)\n edges.push([wrappedHull[i], wrappedHull[i + 1]]);\n\n // group by side and find longest\n const edge = d3.scaleQuantize(\n [-Math.PI, Math.PI],\n [\"top\", \"right\", \"bottom\", \"left\", \"top\"]\n );\n const length = ([[x1, y1], [x2, y2]]) =>\n Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);\n const longest = d3.rollup(\n edges,\n (r) => r.sort((a, b) => length(b) - length(a))[0],\n (s) => edge(angle(s))\n );\n\n return longest;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1640,"value":"Sometimes an edge we find is too short or at a bad angle. You’ll see a bug on\nthe 54.jpeg card.\n\nWe can check to see if the edges perpendicular to each other. If so, try\neverything again with a higher threshold value.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1555,"value":"cornerAngleErrors = {\n const ordered = Array.from(edges.values()).map(angle);\n const wrapped = ordered.concat(ordered[0]);\n return d3.pairs(wrapped, (a, b) => {\n const d = Math.abs(b - a);\n return Math.abs(Math.abs(d - Math.PI) - Math.PI / 2);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1536,"value":"edgeErrors = cornerAngleErrors.some((d) => d > Math.PI / 180)","pinned":true,"hidden":false,"mode":"ojs"},{"id":978,"value":"vertices = {\n // https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line\n const intersection = ([[x1, y1], [x2, y2]], [[x3, y3], [x4, y4]]) => {\n const d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4)\n return [\n ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) / d,\n ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / d\n ]\n }\n\n const ordered = Array.from(edges.values())\n const wrapped = ordered.concat([ordered[0]])\n return d3.pairs(wrapped, intersection);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"{\n const c = canvas(image),\n ctx = c.getContext('2d')\n ctx.putImageData(thresholded, 0, 0)\n \n ctx.fillStyle = 'gray'\n const size = 50\n for (const [x, y] of hull)\n ctx.fillRect(x - size/2, y - size/2, size, size)\n \n // ctx.lineWidth = 40\n // ctx.strokeStyle = 'blue'\n // ctx.beginPath()\n // for (const [x, y] of hull)\n // ctx.lineTo(x, y)\n // ctx.closePath()\n // ctx.stroke()\n \n ctx.lineWidth = 40\n for (const segment of edges.values()) {\n ctx.strokeStyle = `hsl(${angle(segment)}rad, 80%, 70%)`\n const [[x1, y1], [x2, y2]] = segment\n ctx.beginPath()\n ctx.moveTo(x1, y1)\n ctx.lineTo(x2, y2)\n ctx.stroke()\n }\n \n return c\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"### Perspective transform\n\nTransform all the pixels from that quadrilateral into an upright card. Be sure\nto iterate over the destination pixels, using the inverse transform to find the\ncorresponding source pixel.\n\nFuture improvement: you’ll notice some\n[moiré patterns](https://en.wikipedia.org/wiki/Moiré_pattern) created this way\nwhich could be improved by sampling and averaging around the source pixel\ninstead.\n","pinned":false,"hidden":false,"mode":"md"},{"id":732,"value":"function sort(points) {\n const rotateBy = d3.minIndex(points, ([x, y]) => x + y)\n return points.slice(rotateBy).concat(points.slice(0, rotateBy))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"card = {\n const cw = 1000,\n ch = Math.floor(cw / 0.7),\n target = [\n [0, 0], // top left\n [0, ch], // bottom left\n [cw, ch], // bottom right\n [cw, 0], // top right\n ].flat()\n const rectangle = sort(vertices)\n\n const tx = perspectiveTransform(rectangle.flat(), target)\n\n const card = new ImageData(cw, ch)\n const cardBuffer = new Uint32Array(card.data.buffer),\n imageBuffer = new Uint32Array(image.data.buffer)\n\n for (let i = 0; i < cardBuffer.length; i++) {\n const x = i % cw,\n y = Math.floor(i / cw),\n [xs, ys] = tx.transformInverse(x, y),\n j = Math.round(ys) * image.width + Math.round(xs)\n cardBuffer[i] = imageBuffer[j]\n }\n\n return card\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"canvas(card)","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"### White balance\n\nTransform in RGB space to get an actual white value. Use the four corner pixels\nas our example of what should be pure white in the image.\n","pinned":false,"hidden":false,"mode":"md"},{"id":444,"value":"cardWhiteBalanced = {\n const image = card\n const { data } = image\n\n // average the 4 corners for \"white\"\n const whitePoint = [0, 0, 0, 255]\n for (let y of [0, image.height - 1]) {\n for (let x of [0, image.width - 1]) {\n const i = (y * image.width + x) * 4\n for (let d = 0; d < 3; d++) whitePoint[d] += data[i + d]\n }\n }\n for (let d = 0; d < 3; d++) whitePoint[d] /= 4\n\n // adjust in RGB space (there's probably a better color space to do this in?)\n const result = new ImageData(image.width, image.height)\n const multiplier = whitePoint.map(x => 255 / x)\n for (let i = 0; i < data.length; i += 4)\n for (let d = 0; d < 4; d++) result.data[i + d] = data[i + d] * multiplier[d]\n\n return result\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"output = canvas(cardWhiteBalanced)","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"function canvas(image, style = width <= 480 ? 'width: 100%' : 'width: 50%') {\n const canvas = DOM.canvas(image.width, image.height),\n ctx = canvas.getContext('2d')\n ctx.putImageData(image, 0, 0)\n if (style) canvas.style = style\n \n return canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"// d3 = require('d3-array@2', 'd3-color@2', 'd3-polygon@2', 'd3-scale@3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"perspectiveTransform = require('perspective-transform@1.1.3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}