31:[] 2f:{"title":"Image blur/sharpen cycle","cells":[{"id":0,"value":"md`# Image blur/sharpen cycle`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":178,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":141,"value":"md`## Input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof nextImage = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":138,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":5,"value":"size = Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":144,"value":"function applyFilter(input, filter) {\n return svgToCanvas(svg`\n `);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}