2c:null 2d:["$","title",null,{"children":"Linear Interpolation along a Triangle with Barycentric Coordinates | Job van der Zwan | Observable"}] 32:T8ae,triangle_simple = { const ctx = DOM.context2d(500, 500, 1) const x1 = 50; const y1 = 427; const x2 = 450; const y2 = y1; const x3 = 250; const y3 = 70; const imgData = ctx.getImageData(0, 0, 500, 500); const {data} = imgData; // change background data // AFAIK color inputs are guaranteed to return a hex string, // so I can use this quick hack to extract the values // (I think it's always lower-case, but have a safety // check for that regardless) const toNr = idx => { const cc = bg.charCodeAt(idx); return cc - ((cc < 58) ? 48 : (cc < 71 ? 55 : 87)); }; const rb = toNr(1) * 16 + toNr(2), gb = toNr(3) * 16 + toNr(4), bb =toNr(5) * 16 + toNr(6); for (let i = 0; i < data.length; i += 4) { data[i] = rb; data[i+1] = gb; data[i+2] = bb; data[i+3] = 255; } const dy = y1 - y3; // 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); 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 }33:Tc8d,md`Equations taken from [Codeplea - Interpolating in a Triangle](https://codeplea.com/triangular-interpolation), which has an excellent interactive explanation of how these coordinates work (TODO: less formalism, more understandability - but really, that Codeplea article is great for that) Say we have a triangle, which means we have three vertices ${tex`v_1, v_2, v_3`} that form that triangle. Let's say we give each of these vertices a color, say ${tex`c_{v_1}, c_{v_2}, c_{v_3}`} respectively. What if we want to interpolate the colors across that triangle? Well, what we really are saying then is that for each point ${tex`p`} in the triangle we want a color that is a product of the three colors of the vertex, so a kind of weighted average: ${tex`c_{p} = w_{v_1} \cdot c_{v_1} + w_{v_2} \cdot c_{v_3} + w_{v_3} \cdot c_{v_3}`} What are the values we want to assign to these weights? Well, on the vertices, it's clear that the color that comes out should be the same color as the vertex, so for ${tex`p = v_1`} for example we get: ${tex`c_{p} = c_{v_1} = 1 \cdot c_{v_1} + 0 \cdot c_{v_3} + 0 \cdot c_{v_3}`} Similarly, when we're halfway along an edge between two vertices, it makes sense that we want the color to be halfway between those values, without any influence of the third vertex color: ${tex`p = \frac{v_1 + v_2}{2} \\ c_{p} = \frac{1}{2} \cdot c_{v_1} + \frac{1}{2} \cdot c_{v_2} + 0 \cdot c_{v_3}`} In fact, along any edge between two vertices we really just want to linearly interpolate between those two vertices, right? ${tex` w_{v_1} = \alpha \\ w_{v_2} = 1 - \alpha \\ p_{\alpha} = w_{v_1} \cdot v_1 + w_{v_2} \cdot v_2 \\ c_{p_a} = w_{v_1} \cdot c_{v_1} + w_{v_2} \cdot c_{v_2} + 0 \cdot c_{v_3} \\ `} We basically want to extend that formula for two weights to three. So for two points (that is, along an edge), we have these constraints that the other equations are derived from: ${tex` w_{v_1} + w_{v_2} = 1 \\ p = w_{v_1} \cdot v_1 + w_{v_2} \cdot v_2 `} So what turns out to be the case is that to extend this to a triangle, we just have to add the third point: ${tex` w_{v_1} + w_{v_2} + w_{v_3} = 1 \\ p = w_{v_1} \cdot v_1 + w_{v_2} \cdot v_2 + w_{v_3} \cdot v_3 `} Ok, so? Well, remember our original goal: we want to linearly interpolate the colors along points inside a triangle. Or, in our discrete case, the pixels. That means that our three vertices are known, as well as the position ${tex`p`} for every pixel. And *that* in turn means that we can re-arrange these equations to determine the weights based on these four positions. To be completely honest, I say "we" but I just copied this formula from someone else, and now you can repeat that! Shoulders of giants and all that. Here we go:

${tex`w_{v_1}=\Large\frac{(y_{v_2}-y_{v_3})(p_{x}-x_{v_3})+(x_{v_3}-x_{v_2})(p_{y}-y_{v_3})}{(y_{v_2}-y_{v_3})(x_{v_1}-x_{v_3})+(x_{v_3}-x_{v_2})(y_{v_1}-y_{v_3})}`}

${tex`w_{v_2}=\Large\frac{(y_{v_3}-y_{v_1})(p_{x}-x_{v_3})+(x_{v_1}-x_{v_3})(p_{y}-y_{v_3})}{(y_{v_2}-y_{v_3})(x_{v_1}-x_{v_3})+(x_{v_3}-x_{v_2})(y_{v_1}-y_{v_3})}`}

${tex`w_{v_3}=1 - w_{v_1} - w_{v_2}`}

See also: https://en.wikipedia.org/wiki/Barycentric_coordinate_system`34:[] 30:{"id":"c09b83ae3bcfed22","slug":"linear-interpolation-along-a-triangle-with-barycentric-co","title":"Linear Interpolation along a Triangle with Barycentric Coordinates","thumbnail":"ed98f13351823b55b4864d4572843f728990129b9b3bc8b9fc47df62b0ea1472","access_level":"public","create_time":"$D2020-05-20T06:10:24.320Z","update_time":"$D2024-02-04T11:10:30.362Z","view_time":null,"first_public_time":"$D2020-05-20T21:46:34.952Z","fork":false,"stars":7,"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":313,"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":[{"id":"deaa1e336698cd21","reply_to_id":null,"content":"Currently broken and needs to be pinned. The latest compatible version is \"0.20.1\".","create_time":"$D2021-12-12T13:41:49.283Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"9a37f87a8a5346c4","reply_to_id":null,"content":"Have you thought about turning the triangle area into a color picker?","create_time":"$D2021-12-12T13:43:03.206Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"e5962f531062382d","reply_to_id":"deaa1e336698cd21","content":"Thanks!","create_time":"$D2021-12-12T18:57:39.115Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"205daac6ef625e92","reply_to_id":"9a37f87a8a5346c4","content":"That was my original reason for making this, then it turned out I didn't need one and I didn't bother finishing it :p","create_time":"$D2021-12-12T18:58:05.665Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"276ae7f1d4c27161","reply_to_id":"9a37f87a8a5346c4","content":"Hi, could you please show me how to change background color to something other than white?","create_time":"$D2024-02-02T13:18:20.005Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"8fbae61e137fe2d2","login":"alexp4","name":"AlexP","avatar_url":"https://avatars-next.observableusercontent.com/241d304866a4dd41ff0ada2e7c5921ec8ed7f452790511f77d0a4a30b7bffb70","tier":null}},{"id":"91510998cb5aab70","reply_to_id":"9a37f87a8a5346c4","content":"Does this work for you?","create_time":"$D2024-02-04T11:08:56.570Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"0d3d119f6fe3adb1","reply_to_id":"9a37f87a8a5346c4","content":"Hi Job, this is wonderful!\nI cannot thank you enough!","create_time":"$D2024-02-04T11:12:02.197Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"8fbae61e137fe2d2","login":"alexp4","name":"AlexP","avatar_url":"https://avatars-next.observableusercontent.com/241d304866a4dd41ff0ada2e7c5921ec8ed7f452790511f77d0a4a30b7bffb70","tier":null}},{"id":"c86c81daa64e1602","reply_to_id":"9a37f87a8a5346c4","content":"Glad to be of help :)","create_time":"$D2024-02-04T14:00:02.073Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Linear Interpolation along a Triangle with Barycentric Coordinates","cells":[{"id":243,"value":"html`

Linear Interpolation along a Triangle with Barycentric Coordinates

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":" viewof rgb = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"viewof bg = Inputs.color({label: \"Background color\", value: \"#ffffff\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"culori = require(\"culori@0.20.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"