31:[] 2f:{"title":"Chroma Key Compositing","cells":[{"id":0,"value":"md`# Chroma Key Compositing\n\nAn interactive exploration of [Edward Cannon's Greenscreen](http://gc-films.com/chromakey.html) code for [Chroma key compositing](https://en.wikipedia.org/wiki/Chroma_key). Inspired by [Evangelina Ferreira](https://twitter.com/evaferreira92)'s wonderful talk, [“Take On Me, Web Browsers!”](https://www.youtube.com/watch?v=11DHJISR3b8). Photos taken from [Unsplash](https://unsplash.com/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"viewof radius = fancyRange({\n width: 400, min: 0, max: 50, value: 15,\n label: v => html`radius: ${v.toLocaleString()}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"viewof feather = fancyRange({\n width: 400, min: 0, max: 50, value: 10,\n label: v => html`feather: ${v.toLocaleString()}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"{\n const {naturalWidth: w, naturalHeight: h} = foregroundImg;\n const ctx = DOM.context2d(w, h, 1);\n ctx.canvas.style.maxWidth = '100%';\n const out = ctx.getImageData(0, 0, w, h);\n\n const [keyR, keyG, keyB] = keyColor;\n const keyCb = rgb2cb(keyR, keyG, keyB);\n const keyCr = rgb2cr(keyR, keyG, keyB);\n \n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const k = 4 * (y * w + x);\n const r = fg[k],g = fg[k + 1], b = fg[k + 2];\n const mask = chromaKeyMask(r, g, b, keyCb, keyCr, radius, radius + feather);\n out.data[k + 0] = chromaBlend(r, bg[k + 0], keyR, mask);\n out.data[k + 1] = chromaBlend(g, bg[k + 1], keyG, mask);\n out.data[k + 2] = chromaBlend(b, bg[k + 2], keyB, mask);\n out.data[k + 3] = 255;\n }\n }\n ctx.putImageData(out, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"viewof foregroundId = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"viewof backgroundId = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"foregroundImg = fetchImage(`https://images.unsplash.com/photo-${foregroundId}?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&h=450&q=80`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"backgroundImg = fetchImage(`https://images.unsplash.com/photo-${backgroundId}?auto=format&fit=crop&w=800&h=450&q=80`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"chromaBlend = (fgC, bgC, keyC, mask) => Math.max(fgC - mask * keyC, 0) + mask * bgC","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"chromaKeyMask = (r, g, b, keyCb, keyCr, tolA, tolB) => {\n const cb = rgb2cb(r, g, b);\n const cr = rgb2cr(r, g, b);\n const d = Math.hypot(keyCb - cb, keyCr - cr);\n return 1 - (d < tolA ? 0 : d > tolB ? 1 : (d - tolA) / (tolB - tolA));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"rgb2cb = (r, g, b) => Math.round(128 - 0.168736 * r - 0.331264 * g + 0.5 * b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"rgb2cr = (r, g, b) => Math.round(128 + 0.5 * r - 0.418688 * g - 0.081312 * b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"bg = getPixelData(backgroundImg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"fg = getPixelData(foregroundImg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"keyColor = {\n const k = 4 * (30 * foregroundImg.naturalWidth + 30); // fetch foreground pixel at [30, 30]\n return fg.slice(k, k + 3);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"getPixelData = (img) => {\n const {naturalWidth: w, naturalHeight: h} = img;\n const ctx = DOM.context2d(w, h, 1);\n ctx.drawImage(img, 0, 0);\n return ctx.getImageData(0, 0, w, h).data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"import {fetchImage} from '@mbostock/cross-origin-images'","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"import {fancyRange} from '@mourner/non-robust-arithmetic-as-art'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}