2a:null 2b:["$","title",null,{"children":"Linear Interpolation along a Rectangle | Job van der Zwan | Observable"}] 30:Ta73,triangle_simple = { const ctx = DOM.context2d(640, 640, 1) const x1 = 64; const y1 = 64; const x2 = 640-64; const y2 = 640-64; ctx.fillStyle = bg; ctx.fillRect(0, 0, 640, 640); const imgData = ctx.getImageData(0, 0, 640, 640); const {data} = imgData; // Let's interpolate over LRGB, shall we? // And yes, I'm so lazy that I use culori's hex string // conversion and then convert that back to a number. const formatter = culori.formatter('hex'); const c1 = culori.lrgb(rgb.c1); const c2 = culori.lrgb(rgb.c2); const c3 = culori.lrgb(rgb.c3); const c4 = culori.lrgb(rgb.c4); for (let i = 0; i <= 512; i++) { const lweight = 512 - i; // const rweight = i; for (let j = 0; j <= 512; j++) { const tweight = 512 - j; // const bweight = j const tlweight = lweight * tweight; const trweight = i * tweight; const blweight = lweight * j; const brweight = i * j; const r = (c1.r * tlweight + c2.r * trweight + c3.r * blweight + c4.r * brweight) / (512 * 512); const g = (c1.g * tlweight + c2.g * trweight + c3.g * blweight + c4.g * brweight) / (512 * 512); const b = (c1.b * tlweight + c2.b * trweight + c3.b * blweight + c4.b * brweight) / (512 * 512); const hex = formatter({r, g, b, mode: "lrgb"}); const idx = ((64 + i) + (64 + j) * 640) * 4; imgData.data[idx] = +("0x" + hex.substring(1,3)); imgData.data[idx + 1] = +("0x" + hex.substring(3, 5)); imgData.data[idx + 2] = +("0x" + hex.substring(5, 7)); } } // for (let y = y3; y <= y1; y++) { // const a = (y - y3) / dy; // const x3a = x3 * (1 - a) // for (let x = (x3a + x1 * a) | 0, xEnd = (x3a + x2 * a) | 0; x <= xEnd; x++) { // const w1 = ((y2 - y3)*(x-x3)+(x3 - x2)*(y - y3))/((y2-y3)*(x1-x3)+(x3-x2)*(y1-y3)); // const w2 = ((y3 - y1)*(x-x3)+(x1 - x3)*(y - y3))/((y2-y3)*(x1-x3)+(x3-x2)*(y1-y3)); // const w3 = 1 - (w1 + w2); // const r = c1.r * w1 + c2.r * w2 + c3.r * w3; // const g = c1.g * w1 + c2.g * w2 + c3.g * w3; // const b = c1.b * w1 + c2.b * w2 + c3.b * w3; // const hex = formatter({r, g, b, mode: "lrgb"}); // const idx = (x + y*500)*4; // imgData.data[idx] = +("0x" + hex.substring(1,3)); // imgData.data[idx + 1] = +("0x" + hex.substring(3, 5)); // imgData.data[idx + 2] = +("0x" + hex.substring(5, 7)); // // plain (bad) srgb interpolation // // imgData.data[idx] = w1 * 255 | 0; // // imgData.data[idx + 1] = w2 * 255 | 0; // // imgData.data[idx + 2] = w3 * 255 | 0; // } // } ctx.putImageData(imgData, 0, 0); return ctx.canvas }31:[] 2e:{"id":"809dea2d651c425b","slug":"linear-interpolation-along-a-rectangle","title":"Linear Interpolation along a Rectangle","thumbnail":"b3bf1784cb2e06025612afc157cbee52aedbdd03e1ba78adf875fb7395e081e2","access_level":"public","create_time":"$D2024-02-04T22:50:03.409Z","update_time":"$D2024-02-04T23:11:21.341Z","view_time":null,"first_public_time":"$D2024-02-04T23:11:48.806Z","has_unpublished_edits":null,"fork":{"id":"c09b83ae3bcfed22","slug":"linear-interpolation-along-a-triangle-with-barycentric-co","title":"Linear Interpolation along a Triangle with Barycentric Coordinates","owner":{"id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":328,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Linear Interpolation along a Rectangle","cells":[{"id":243,"value":"# Linear Interpolation along a Rectangle\n\nI had a private request for a rectangular version of my [triangle interpolation notebook](https://observablehq.com/@jobleonard/linear-interpolation-along-a-triangle-with-barycentric-co).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":" viewof rgb = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"viewof bg = Inputs.color({label: \"Background color\", value: \"#ffffff\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"culori = require(\"culori@0.20.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"