2d:null 2e:["$","title",null,{"children":"Exploring Dithering | Emmanuel Meinike | Observable"}] 33:T641,{ const precalculateThesholdMap = ({ size, thresholdMap: originalThresholdMap }) => { const thresholdMap = JSON.parse(JSON.stringify(originalThresholdMap)); const s = Math.sqrt(size); for (let y = 0; y < s; y++) { for (let x = 0; x < s; x++) { thresholdMap[y][x] = (thresholdMap[y][x] + 1) / s ** 2; } } return { thresholdMap, size: s }; }; const sourceImage = await loadImage(sourceImageUrl); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const width = sourceImage.width; const height = sourceImage.height; canvas.width = width; canvas.height = height; ctx.drawImage(sourceImage, 0, 0); const imageData = ctx.getImageData(0, 0, width, height); const { thresholdMap, size } = precalculateThesholdMap( thresholdMapsList[currentThresholdIndex] ); for (let i = 0; i < imageData.data.length; i += 4) { const y = Math.floor(i / 4 / width); const x = (i / 4) % width; const thresholdEntry = thresholdMap[y % size][x % size]; const [hue, saturation, luminance] = rgbToHsl([ imageData.data[i + 0], imageData.data[i + 1], imageData.data[i + 2] ]); if (luminance > thresholdEntry) { imageData.data[i + 0] = 255; imageData.data[i + 1] = 255; imageData.data[i + 2] = 255; imageData.data[i + 3] = 255; } else { imageData.data[i + 0] = 0; imageData.data[i + 1] = 0; imageData.data[i + 2] = 0; imageData.data[i + 3] = 255; } } ctx.putImageData(imageData, 0, 0); return canvas; }34:T45e,sourceImages = [ { url: "https://images.unsplash.com/photo-1495566273813-b897730c1d3d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" }, { url: "https://images.unsplash.com/photo-1558027309-0844844295f7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" }, { url: "https://images.unsplash.com/photo-1624233599130-8f9a318988ab?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=350&q=80" }, { url: "https://images.unsplash.com/photo-1579128191615-c22cde169e1e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" }, { url: "https://images.unsplash.com/photo-1624333531237-51cee78e2231?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" }, { url: "https://images.unsplash.com/photo-1624267009608-1ba443b4d957?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" } ]35:T46b,async function thresHoldDithering(url, threshold, randomOffsetFunc = () => 0) { const sourceImage = await loadImage(url); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const width = sourceImage.width; const height = sourceImage.height; canvas.width = width; canvas.height = height; ctx.drawImage(sourceImage, 0, 0); const imageData = ctx.getImageData(0, 0, width, height); for (let i = 0; i < imageData.data.length; i += 4) { let x = ((i % 400) / 400) * 255; let y = (Math.ceil(i / 400) / 100) * 255; const [hue, saturation, luminance] = rgbToHsl([ imageData.data[i + 0], imageData.data[i + 1], imageData.data[i + 2] ]); if ((luminance + randomOffsetFunc()) > threshold) { imageData.data[i + 0] = 255; imageData.data[i + 1] = 255; imageData.data[i + 2] = 255; imageData.data[i + 3] = 255; } else { imageData.data[i + 0] = 0; imageData.data[i + 1] = 0; imageData.data[i + 2] = 0; imageData.data[i + 3] = 255; } } ctx.putImageData(imageData, 0, 0); return canvas; }36:T549,{ const map4x4 = [[0, 8, 2, 10], [12, 4, 14, 6], [3, 11, 1, 9], [15, 7, 13, 5]]; const map2x2 = [[0, 2], [3, 1]]; const expansionMap = [ [i => 4 * i + 0, i => 4 * i + 2], [i => 4 * i + 3, i => 4 * i + 1] ]; const insertEmptyRows = map => map.reduce((acc, cv) => [...acc, cv, []], []); const expand = (thresholdMap, size) => { const expandedArray = []; /* for (let y = 0; y < 2; y++) { expandedArray.push([]); expandedArray.push([]); for (let x = 0; x < 2; x++) { const expansionFunc = expansionMap[y][x]; for (let yy = 0; thresholdMap.length; yy++) { for (let xx = 0; thresholdMap[yy].length; xx++) { const entry = thresholdMap[yy][xx]; if () } } } } */ // const expandedArrayNew = []; /* for (let y = 0; y < thresholdMap.length; y++) { expandedArray.push([]); expandedArray.push([]); for (let x = 0; x < thresholdMap[y].length; x++) { const entry = thresholdMap[y][x]; expandedArray[y * 2].push(4 * entry + 0); expandedArray[y * 2].push(null); //expandedArray[(y*2)+1].push((4 * entry) + 3); //expandedArray[(y*2)+1].push((4 * entry) + 1); } } */ return { thresholdMap, expandedArray }; }; return expand(map2x2, 4); }37:[] 31:{"id":"25148c47bfdcee0e","slug":"exploring-dithering","title":"Exploring Dithering","thumbnail":"c7c53eec8fe09acaca1b74c1b9a20cd2f761f65b63631cde455775bd86da7f6f","access_level":"public","create_time":"$D2021-06-24T17:14:44.217Z","update_time":"$D2021-07-10T11:50:04.490Z","view_time":null,"first_public_time":"$D2021-07-10T09:08:20.906Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5ae7edd5ed69e614","login":"kuukienator","name":"Emmanuel Meinike","avatar_url":"https://avatars-next.observableusercontent.com/221648326252ab6e7a27057e5f95831508de74dc7a8c5202a933b98b973d95a2","tier":"starter_2024"},"version":772,"publish_version":772,"role":null,"authored":false,"authors":[{"type":"individual","id":"2ae574df9cb533a3","login":"kuukienator","name":"Emmanuel Meinike","avatar_url":"https://avatars-next.observableusercontent.com/221648326252ab6e7a27057e5f95831508de74dc7a8c5202a933b98b973d95a2","tier":null}],"members":[{"type":"individual","id":"2ae574df9cb533a3","login":"kuukienator","name":"Emmanuel Meinike","avatar_url":"https://avatars-next.observableusercontent.com/221648326252ab6e7a27057e5f95831508de74dc7a8c5202a933b98b973d95a2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Exploring Dithering","cells":[{"id":0,"value":"md`# Exploring Dithering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof sourceImageUrl = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`## Source`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{\n const image = new Image();\n image.crossOrigin = \"Anonymous\";\n image.src = sourceImageUrl;\n\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`## Threshold Dithering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"thresHoldDithering(sourceImageUrl, fixedThreshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"viewof fixedThreshold = Inputs.range([0, 1], {label: \"Threshold\", step: 0.1, value: 0.5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"md`## Random Threshold Dithering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"thresHoldDithering(sourceImageUrl, randomThreshold, () => Math.random() - 0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"viewof randomThreshold = Inputs.range([0, 1], {label: \"Random Threshold\", step: 0.1, value: 0.5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"md`## Ordered Dithering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"viewof currentThresholdIndex = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`## Utils and Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"thresholdMapsList = {\n const thresholdMapConfig4 = {\n name: 'Bayer Matrix 4',\n size: 4,\n thresholdMap: [[0, 2], [3, 1]]\n };\n\n const thresholdMapConfig16 = {\n name: 'Bayer Matrix 16',\n size: 16,\n thresholdMap: [[0, 8, 2, 10], [12, 4, 14, 6], [3, 11, 1, 9], [15, 7, 13, 5]]\n };\n\n const thresholdMapConfig64 = {\n name: 'Bayer Matrix 64',\n size: 64,\n thresholdMap: [\n [0, 32, 8, 40, 2, 34, 10, 42],\n [48, 16, 56, 24, 50, 18, 58, 26],\n [12, 44, 4, 36, 14, 46, 6, 38],\n [60, 28, 52, 20, 62, 30, 54, 22],\n [3, 35, 11, 43, 1, 33, 9, 41],\n [51, 19, 59, 27, 49, 17, 57, 25],\n [15, 47, 7, 39, 13, 45, 5, 37],\n [63, 31, 55, 23, 61, 29, 53, 21]\n ]\n };\n\n const clusteredDots = {\n name: 'Clustered Dots 4',\n size: 4,\n thresholdMap: [\n [34, 29, 17, 21],\n [28, 14, 9, 16],\n [13, 8, 4, 5],\n [12, 3, 0, 1]\n ]\n };\n\n return [\n thresholdMapConfig4,\n thresholdMapConfig16,\n thresholdMapConfig64,\n clusteredDots\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"rgbToHsl = {\n const calculateHue = (colorRatios, indexOfMax, max, min) => {\n let hue = 0;\n\n if (indexOfMax === 0) {\n hue = (colorRatios[1] - colorRatios[2]) / (max - min);\n } else if (indexOfMax === 1) {\n hue = 2.0 + (colorRatios[2] - colorRatios[0]) / (max - min);\n } else if (indexOfMax === 2) {\n hue = 4.0 + (colorRatios[0] - colorRatios[1]) / (max - min);\n }\n hue *= 60;\n\n hue = hue < 1 ? hue + 360 : hue;\n\n return hue;\n };\n const rgbToHsl = color => {\n const colorRatios = color.map(c => c / 255);\n const min = Math.min(...colorRatios);\n const max = Math.max(...colorRatios);\n\n const luminance = (min + max) / 2;\n const saturation =\n min === max\n ? 0\n : luminance < 0.5\n ? (max - min) / (max + min)\n : (max - min) / (2.0 - max - min);\n\n const hue = calculateHue(colorRatios, colorRatios.indexOf(max), max, min);\n\n return [hue, saturation, luminance];\n };\n\n return rgbToHsl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"loadImage = () => new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = \"Anonymous\";\n image.src = sourceImageUrl;\n image.onload = () => resolve(image);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"