2e:null 2f:["$","title",null,{"children":"Chroma Key Compositing | Volodymyr Agafonkin | Observable"}] 34:[] 32:{"id":"58295a1ed82dcbc3","slug":"chroma-key-compositing","title":"Chroma Key Compositing","thumbnail":"42f6688172ffbb9e054ad82bc5959d6aa1981bfdf92278ed8b48dcbfe2914182","access_level":"public","create_time":"$D2019-09-21T11:39:30.526Z","update_time":"$D2019-09-23T07:06:37.802Z","view_time":null,"first_public_time":"$D2019-09-21T14:10:42.110Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":"starter_2024"},"version":366,"publish_version":366,"role":null,"authored":false,"authors":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null}],"members":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"05c3a5b5466d0c69","slug":"explorables","title":"Explorables","owner":{"id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"viewof foregroundId = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof backgroundId = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"chromaBlend = (fgC, bgC, keyC, mask) => Math.max(fgC - mask * keyC, 0) + mask * bgC","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"bg = getPixelData(backgroundImg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"fg = getPixelData(foregroundImg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import {fetchImage} from '@mbostock/cross-origin-images'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"import {fancyRange} from '@mourner/non-robust-arithmetic-as-art'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"