2b:null 2c:["$","title",null,{"children":"Triangular color interpolation | Torben Jansen | Observable"}] 31:[] 2f:{"id":"ccdfe3b47bbefc40","slug":"triangular-color-interpolation","title":"Triangular color interpolation","thumbnail":"82e280af4a103b63b8e2cc02839861afd86d019fcd88d8df852e5552fa53304f","access_level":"public","create_time":"$D2019-01-12T09:23:59.315Z","update_time":"$D2021-06-04T14:13:20.204Z","view_time":null,"first_public_time":"$D2019-01-13T02:10:04.573Z","fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":632,"publish_version":632,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"3a0b4a16f415a789","slug":"color","title":"Color","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"type":"notebook","body":{"title":"Triangular color interpolation","cells":[{"id":0,"value":"md`# Triangular color interpolation\n\nLet's say we have a triangle and each vertice of that triangle corresponds to a certain value, for example a color. Given an arbitrary point, inside of the triangle, how do we define its value?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"{ \n //colors;\n context.putImageData(imageData, 0, 0);\n \n context.save();\n context.filter = 'blur(20px)';\n context.clip(clipPath);\n context.fill(triangle);\n context.restore();\n \n context.stroke(triangle);\n \n if (showCoordinates) {\n const labelWidth = context.measureText(\"t2: -0.00000\").width + 30;\n const labelHeight = 45 + 20; // (12 + 3)px * 3\n\n context.save();\n context.translate(width - labelWidth - 20, height - labelHeight - 20)\n context.fillStyle = \"rgba(255, 255, 255, 0.3)\";\n context.rect(0, 0, labelWidth, labelHeight);\n context.fill();\n\n context.fillStyle = \"rgba(0, 0, 0, 1)\";\n t.forEach((t, i) => {\n context.fillText(\n `t${i}: ${t < 0 ? \"\" : \" \"}${format(t)}`, 15, 12 + i * 15)\n })\n context.restore();\n }\n \n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"html`

${color || \"0xffffff\"}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"viewof colors = {\n const form = html`\n \n `\n form.oninput = () => {\n const colors = [\n hex2rgb(form.c1.value),\n hex2rgb(form.c2.value),\n hex2rgb(form.c3.value)\n ];\n \n form.value = colors;\n }\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"viewof zoom = {\n const form = html`\n `;\n form.oninput = () => form.value = +form.size.value;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"viewof rotation = {\n const form = html`\n `;\n form.oninput = () => form.value = (+form.rotation.value - 90) * Math.PI / 180;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"viewof showOutside = {\n const form = html`\n `;\n form.oninput = () => form.value = +form.showOutside.checked;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"viewof showCoordinates = {\n const form = html`\n `;\n form.oninput = () => form.value = +form.showCoordinates.checked;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"mutable color = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"md`\nThe solution is to use [barycentric coordinates](https://en.wikipedia.org/wiki/Barycentric_coordinate_system). Barycentric coordinates are triples of numbers ${tex`t_1:t_2:t_3`} corresponding to values placed at the vertices of a reference triangle. The three vertices of the triangle are given by ${tex`1:0:0`}, ${tex`0:1:0`}, and ${tex`0:0:1`}.\n\nIf a point lies in the interior of the triangle, all of its barycentric coordinates ${tex`t_1:t_2:t_3`} lie in the interval ${tex`(0,1)`}. If a point is not inside the triangle, it's still possible to compute barycentric coordinates but at least one of the coordinates will be ${tex` < 0`}.\n\n---\n\n#### Further reading:\n- https://beta.observablehq.com/@infowantstobeseen/barycentric-coordinates\n- https://codeplea.com/triangular-interpolation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"context = {\n const context = DOM.context2d(width, height, 1);\n \n context.lineWidth = 2;\n context.strokeStyle = \"rgb(255, 255, 255)\";\n context.fillStyle = \"rgba(0, 0, 0, 0.5)\";\n \n context.font = \"12px sans-serif\";\n //context.textAlign = \"end\";\n context.textBaseline = \"top\";\n \n context.canvas.addEventListener('mousemove', (e) => pick(e, vertices));\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"imageData = {\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const index = (x + y * width) * 4;\n const rgb = getColor(x, y, vertices, colors);\n data[index ] = rgb[0];\n data[index + 1] = rgb[1];\n data[index + 2] = rgb[2];\n data[index + 3] = 255;\n }\n }\n return new ImageData (data, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"clipPath = {\n const clipPath = new Path2D();\n clipPath.moveTo(0, 0);\n clipPath.lineTo(width, 0);\n clipPath.lineTo(width, height);\n clipPath.lineTo(0, height);\n clipPath.lineTo(0, 0);\n clipPath.addPath(triangle);\n return clipPath;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"triangle = {\n const triangle = new Path2D();\n triangle.moveTo(...vertices[0]);\n triangle.lineTo(...vertices[1]);\n triangle.lineTo(...vertices[2]);\n triangle.lineTo(...vertices[0]);\n return triangle;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"vertices = [0, 120, 240].map(degrees => {\n const angle = degrees * Math.PI / 180 + rotation;\n return [\n Math.cos(angle) * zoom + width / 2,\n -(Math.sin(angle) * zoom - height / 2)\n ];\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"data = new Uint8ClampedArray(width * height * 4);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"function pick(event, vertices) {\n const x = event.layerX;\n const y = event.layerY;\n mutable t = cartesian2barycentric(x, y, vertices);\n mutable color = d3.rgb(...getColor(x, y, vertices, colors)).hex();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"mutable t = [0, 0, 0];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"function getColor(x, y, vertices, colors) {\n const t = cartesian2barycentric(x, y, vertices);\n if (!showOutside && t.some(t => t < 0)) return [255, 255, 255];\n return [\n Math.floor(colors[0].r * t[0] + colors[1].r * t[1] + colors[2].r * t[2]),\n Math.floor(colors[0].g * t[0] + colors[1].g * t[1] + colors[2].g * t[2]),\n Math.floor(colors[0].b * t[0] + colors[1].b * t[1] + colors[2].b * t[2]),\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"function cartesian2barycentric(x, y, [[x1, y1], [x2, y2], [x3, y3]]) {\n \n const y2y3 = y2 - y3,\n x3x2 = x3 - x2,\n x1x3 = x1 - x3,\n y1y3 = y1 - y3,\n y3y1 = y3 - y1,\n xx3 = x - x3,\n yy3 = y - y3;\n \n const d = y2y3 * x1x3 + x3x2 * y1y3,\n lambda1 = (y2y3 * xx3 + x3x2 * yy3) / d,\n lambda2 = (y3y1 * xx3 + x1x3 * yy3) / d;\n \n return [\n lambda1,\n lambda2,\n 1 - lambda1 - lambda2\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"function hex2rgb(str) {\n const i = parseInt(str.slice(1), 16);\n return {\n r: i >> 16,\n g: i >> 8 & 0xff,\n b: i & 0xff\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"height = 480","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":496,"value":"format = d3.format(\".5f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":463,"value":"d3 = require(\"d3-format\", \"d3-color\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"