2a:null 2b:["$","title",null,{"children":"Image blur/sharpen cycle | Roman Karavia | Observable"}] 30:[] 2e:{"id":"230508a63aef3182","slug":"image-blur-sharpen-cycle","title":"Image blur/sharpen cycle","thumbnail":"d26a35440a61287ef89fd8e3c056f326eb07a51d6f48667f73f16354580c0800","access_level":"public","create_time":"$D2020-11-14T17:01:54.287Z","update_time":"$D2020-11-16T09:33:16.124Z","view_time":null,"first_public_time":"$D2020-11-14T18:36:31.289Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1609e18a38defa15","login":"rkaravia","name":"Roman Karavia","avatar_url":"https://avatars-next.observableusercontent.com/72b3824f938211537b9e078b7abf49f6c915dc32300f13ca6fd111d01f51f23b","tier":"starter_2024"},"version":190,"publish_version":190,"role":null,"authored":false,"authors":[{"type":"individual","id":"89cab7559adfc60a","login":"rkaravia","name":"Roman Karavia","avatar_url":"https://avatars-next.observableusercontent.com/72b3824f938211537b9e078b7abf49f6c915dc32300f13ca6fd111d01f51f23b","tier":null}],"members":[{"type":"individual","id":"89cab7559adfc60a","login":"rkaravia","name":"Roman Karavia","avatar_url":"https://avatars-next.observableusercontent.com/72b3824f938211537b9e078b7abf49f6c915dc32300f13ca6fd111d01f51f23b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"952f76d0493d2e9b","slug":"animations","title":"Animations","owner":{"id":"1609e18a38defa15","login":"rkaravia","name":"Roman Karavia"}},"type":"notebook","body":{"title":"Image blur/sharpen cycle","cells":[{"id":0,"value":"md`# Image blur/sharpen cycle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"{\n replay;\n let canvas = inputCanvas;\n const blurFilter = ``;\n const sharpenFilter = ``;\n\n for (let i = 0; i < 20; i += 1) {\n canvas = await applyFilter(canvas, blurFilter);\n yield canvas;\n canvas = await applyFilter(canvas, sharpenFilter);\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"md`## Credits\n\n- Inspired by [Matt Henderson](https://twitter.com/matthen2/status/1327449422532263936)\n- Random Images by [Unsplash Source](https://source.unsplash.com/), usage inspired by [Fabian Iwand](https://observablehq.com/@mootari/inverted-luminosity)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"md`## Input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"viewof nextImage = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"inputCanvas = {\n return new Promise(resolve => {\n const image = new Image();\n image.onload = () => {\n const context = DOM.context2d(size, size, 1);\n context.drawImage(image, 0, 0, size, size);\n resolve(context.canvas);\n };\n image.crossOrigin = 'anonymous';\n image.src = src;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"src = (nextImage,\nfetch(`https://source.unsplash.com/random/${size}x${size}`, {\n method: 'head'\n}).then(response => response.url))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"size = Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"blurStdDeviation = {\n // It looks like the stdDeviation attribute of \n // is not interpreted consistently across browsers.\n // => Use a browser-specific value\n if (/firefox/i.test(navigator.userAgent)) {\n return 0.5;\n }\n return 0.7;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"function applyFilter(input, filter) {\n return svgToCanvas(svg`\n `);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"function svgToCanvas(svg) {\n return new Promise(resolve => {\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svg);\n const image = new Image();\n image.onload = () => {\n const context = DOM.context2d(size, size, 1);\n context.drawImage(image, 0, 0);\n resolve(context.canvas);\n };\n image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"