2e:null 2f:["$","title",null,{"children":"Genuary 2022 / 2 — dithering | Sundar Singh | Observable"}] 34:T4a5,atkinson = { let GRAYS = 256; let THRESHOLD = []; for (let i = 0; i < GRAYS; i++) { THRESHOLD.push(i < (GRAYS >> 1) ? 0 : GRAYS - 1); } let ctx = DOM.canvas(data.width, data.height).getContext('2d'); ctx.canvas.style.width = `${data.width * 1.46}px`; ctx.canvas.style.imageRendering = 'pixelated'; let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height); function px(x, y) { return (x * 4) + (y * data.width * 4); } for (let y = 0; y < data.height; y++) { for (let x = 0; x < data.width; x++) { let oldPixel = clone.data[px(x, y)]; let grayNew = THRESHOLD[oldPixel]; let grayErr = (oldPixel - grayNew) >> 3; let newPixel = oldPixel > 125 ? 255 : 0; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel; let quantError = oldPixel - newPixel; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = grayNew; [[1, 0], [2, 0], [-1, 1], [0, 1], [1, 1], [0, 2]].forEach(([dx, dy]) => { clone.data[px(x + dx, y + dy)] += grayErr; }); } } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }35:T574,floydSteinberg = { let ctx = DOM.canvas(data.width, data.height).getContext('2d'); ctx.canvas.style.width = `${data.width * 1.46}px`; let clone = new ImageData( new Uint8ClampedArray(data.data.data), data.width, data.height ); function px(x, y) { return x * 4 + y * data.width * 4; } for (let y = 0; y < data.height; y++) { for (let x = 0; x < data.width; x++) { let oldPixel = clone.data[px(x, y)]; let newPixel = oldPixel > 125 ? 255 : 0; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[ px(x, y) + 2 ] = newPixel; let quantError = oldPixel - newPixel; clone.data[px(x + 1, y)] = clone.data[px(x + 1, y) + 1] = clone.data[ px(x + 1, y) + 2 ] = clone.data[px(x + 1, y)] + (quantError * 7) / 16; clone.data[px(x - 1, y + 1)] = clone.data[ px(x - 1, y + 1) + 1 ] = clone.data[px(x - 1, y + 1) + 2] = clone.data[px(x - 1, y + 1)] + (quantError * 3) / 16; clone.data[px(x, y + 1)] = clone.data[px(x, y + 1) + 1] = clone.data[ px(x, y + 1) + 2 ] = clone.data[px(x, y + 1)] + (quantError * 5) / 16; clone.data[px(x + 1, y + 1)] = clone.data[ px(x + 1, y + 1) + 1 ] = clone.data[px(x + 1, y + 1) + 2] = clone.data[px(x + 1, y + 1)] + (quantError * 1) / 16; } } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }36:[{"id":"c93614123426273a8ef9221c2f7b4d336c0cef3f312f1a55eb6f548f045aff4c5eece72f32585893582824209d4b8e5bbca947573d614be6509abb568313bf3c","href":"https://static.observableusercontent.com/files/c93614123426273a8ef9221c2f7b4d336c0cef3f312f1a55eb6f548f045aff4c5eece72f32585893582824209d4b8e5bbca947573d614be6509abb568313bf3c","name":"cage_cropped.jpg","type":"image/jpeg","lastModified":1641496578193.178,"size":92729}] 32:{"id":"60d378d53f63492d","slug":"genuary-2022-2-dithering","title":"Genuary 2022 / 2 — dithering","thumbnail":"b23e59d8c4c624f782b3ec7288c12db224e0ec5d4786448215091bf7b48be28e","access_level":"public","create_time":"$D2022-01-06T19:00:22.987Z","update_time":"$D2022-01-07T10:06:55.326Z","view_time":null,"first_public_time":"$D2022-01-07T10:03:13.967Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"956970941b62fd35","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":"starter_2024"},"version":202,"publish_version":202,"role":null,"authored":false,"authors":[{"type":"individual","id":"07656ab2121ed222","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":null}],"members":[{"type":"individual","id":"07656ab2121ed222","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"0145ddb9c9b7a3b6","slug":"genuary","title":"genuary","owner":{"id":"956970941b62fd35","login":"eesur","name":"Sundar Singh"}},"type":"notebook","body":{"title":"Genuary 2022 / 2 — dithering","cells":[{"id":0,"value":"# Genuary 2022 / 2 — dithering\n\nWorking through Tom MacWright two notebooks: \n- https://observablehq.com/@tmcw/dithering\n- https://observablehq.com/@tmcw/final-step-of-dithering-to-svg\n\nand some background reading to help me grok it:\n- https://observablehq.com/@jobleonard/ordered-error-diffusion-dithering\n- https://www.howtogeek.com/745906/what-is-dithering-in-computer-graphics/\n- https://en.wikipedia.org/wiki/Floyd%E2%80%93Steinberg_dithering\n- https://beyondloom.com/blog/dither.html\n- https://css-tricks.com/almanac/properties/i/image-rendering/\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"--------\n\n## Atkinson dithering:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"svg render:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"svg = {\n let pixels = ctx2.getImageData(0, 0, data.width, data.height);\n let lines = \"\";\n let w = data.width * 4;\n let p = ``;\n for (let i = 0; i < pixels.data.length; i += w) {\n let y = Math.floor(i / w);\n p += `M0 ${y}`;\n let down = false;\n for (let j = i; j < i + w; j += 4) {\n if (pixels.data[j] === 0) {\n if (down === false) {\n p += `M ${(j % w) / 4} ${y} `;\n down = true;\n }\n } else {\n if (down === true) {\n p += `L ${(j % w) / 4} ${y} `;\n down = false;\n }\n }\n }\n }\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"-----\n\n## Floyd-Steinberg dithering:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"svg render:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"svg2 = {\n let pixels = ctx1.getImageData(0, 0, data.width, data.height);\n let lines = \"\";\n let w = data.width * 4;\n let p = ``;\n for (let i = 0; i < pixels.data.length; i += w) {\n let y = Math.floor(i / w);\n p += `M0 ${y}`;\n let down = false;\n for (let j = i; j < i + w; j += 4) {\n if (pixels.data[j] === 0) {\n if (down === false) {\n p += `M ${(j % w) / 4} ${y} `;\n down = true;\n }\n } else {\n if (down === true) {\n p += `L ${(j % w) / 4} ${y} `;\n down = false;\n }\n }\n }\n }\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"---------\n\n```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"ctx1 = floydSteinberg.getContext(\"2d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"ctx2 = atkinson.getContext(\"2d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = {\n let img = await FileAttachment(\"cage_cropped.jpg\").image();\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.drawImage(img, 0, 0);\n return {\n data: ctx.getImageData(0, 0, img.width, img.height),\n width: img.width,\n height: img.height\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"image of John Cage (John Cage, near Grenoble, France, in 1972.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"FileAttachment(\"cage_cropped.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"