31: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 }32:[] 2f:{"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"},{"id":124,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":" viewof rgb = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"viewof bg = Inputs.color({label: \"Background color\", value: \"#ffffff\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"culori = require(\"culori@0.20.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}