30:[] 2e:{"title":"2D Color Interpolation","cells":[{"id":0,"value":"md`# 2D Color Interpolation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"html`\n

Top Left

Top Right

${ viewof tl.bind(html``)}

${ viewof tr.bind(html``)}

Bottom Left

Bottom Right

${ viewof bl.bind(html``)}

${ viewof br.bind(html``)}

\n
\nGrid size: ${ viewof size.bind(html``)} ${size}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"cells = [...Array(size*size)].map((d, i) => {\n let s = size-1;\n let x = i%size;\n let y = ~~(i/size);\n let p = x/s;\n let q = y/s;\n let c = `rgb(${rgb.map(c=>blerp(p,q,...c))})`;\n return { x, y, p, q, c, i };\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"cs = [tl, tr, bl, br].map(hexToDec)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"hexToDec = n => n.match(/\\w{2}/g).map(n=>parseInt(n,16))","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"rgb = [\n cs.map(c=>c[0]),\n cs.map(c=>c[1]),\n cs.map(c=>c[2])\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"blerp = (x,y,Q,R,S,T) => (1-y)*((1-x)*Q+x*R)+y*((1-x)*S+x*T)","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"md`### Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"viewof tl = new View('#dd1313');","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"viewof tr = new View('#172021');","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"viewof bl = new View(\"#ffea00\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"viewof br = new View(\"#2aaabb\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"viewof size = new View(10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}