44:["$","title",null,{"children":"Coordonnées barycentriques | msc59 | Observable"}] 4c:T84c,md`En se plaçant à un niveau avancé en Mathématiques, les coordonnées barycentriques d'un point sont les coordonnées de ce point dans un simplexe d'un espace affine. En se plaçant sur un plan plus pratique, les coordonnées barycentriques sont un moyen d'exprimer la position d'un point en fonction de la géométrie et non d'un système global de coordonnées. En infographie, les coordonnées barycentriques sont très largement utilisées : [rastérisation](https://fr.wikipedia.org/wiki/Rastérisation), texture mapping, modeling de surfaces, [test d'appartenance d'un point à l'intérieur d'un triangle](https://beta.observablehq.com/@kelleyvanevert/2d-point-in-triangle-test). Les définitions et calculs of ces coordonnées barycentriques est présenté ici. ## Segments Soient deux points distincts ${tex`\color{${d3.schemeCategory10[0]}}\mathrm{a}`} et ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{b}`}; le vecteur depuis ${tex`\mathrm{\color{${d3.schemeCategory10[0]}}\mathrm{a}}`} jusque ${tex`\mathrm{\color{${d3.schemeCategory10[1]}}\mathrm{b}}`} est ${tex`\overrightarrow{\mathrm{ab}}=\textcolor{${d3.schemeCategory10[1]}}{\mathrm{b}}-\color{${d3.schemeCategory10[0]}}\mathrm{a}`}${tex`=\textcolor{${d3.schemeCategory10[1]}}{\mathrm{b}}-\color{${d3.schemeCategory10[0]}}\mathrm{a}`}. Nous pouvons moduler ce vecteur par un coefficient multiplicatif compris entre 0 et 1 de façon à parcourir le segment reliant ${tex`\color{${d3.schemeCategory10[0]}}\mathrm{a}`} à ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{b}`}: ${tex`\mathrm{p}(t)=\textcolor{${d3.schemeCategory10[0]}}{\mathrm{a}}+t\mathbf{ab}`} : tout ceci n'est qu'une bonne vieille interpolation linéaire !`4d:T563,line = { const a = [ewidth*0.25, 16]; const b = [ewidth*0.75, 32]; const ab = sub(b,a); const p = add(a, scale(t, ab)); const a_0 = add(a, scale(-1, ab)); const b_0 = add(a, scale(+2, ab)); return html`

Coordonnées barycentriques pour ${tex`\overrightarrow{\mathbf{ab}}`}: ${tex`[\textcolor{${d3.schemeCategory10[0]}}{\alpha}, \textcolor{${d3.schemeCategory10[1]}}{\beta}]=`}[${fmt(1-t)},${fmt(t)}]

` }4e:T88a,md`Instead of thinking about how far along the line segment to travel, we can instead think about the point as a *normalized weighted average* of the endpoints: If we take half of ${tex`\textcolor{${d3.schemeCategory10[0]}}{\mathrm{a}}`} and half of ${tex`\textcolor{${d3.schemeCategory10[1]}}{\mathrm{b}}`}, we are in the middle of the line; changing the ratio changes the position. Mathematically, this is a simple change in the equation: ${tex.block`\begin{aligned} \mathrm{p}(t) &= \mathrm{\textcolor{${d3.schemeCategory10[0]}}{a}} + t\mathbf{ab}\\ &= \mathrm{\textcolor{${d3.schemeCategory10[0]}}{a}} + t\left(\textcolor{${d3.schemeCategory10[1]}}{\mathrm{b}}-\textcolor{${d3.schemeCategory10[0]}}{\mathrm{a}}\right)\\ &= \mathrm{\textcolor{${d3.schemeCategory10[0]}}{a}} + t\textcolor{${d3.schemeCategory10[1]}}{\mathrm{b}}-t\textcolor{${d3.schemeCategory10[0]}}{\mathrm{a}}\\ &= \left(1-t\right)\mathrm{\textcolor{${d3.schemeCategory10[0]}}{a}} + t\textcolor{${d3.schemeCategory10[1]}}{\mathrm{b}}\\ \mathrm{p} &= \textcolor{${d3.schemeCategory10[0]}}{\alpha\mathrm{a}} + \textcolor{${d3.schemeCategory10[1]}}{\beta\mathrm{b}}\\ \end{aligned}`} where ${tex`\textcolor{${d3.schemeCategory10[0]}}{\alpha}, \textcolor{${d3.schemeCategory10[1]}}{\beta}`}. are the **barycentric coordinates** of ${tex`\mathrm{p}`}. \[[1](#footnote_combos "Footnote: Sums")\] So far, we have talked about points only between the endpoints of the line segment. However, as lines are infinite in extent, we can extend our coordinates as well. In fact, there is no limit on the values of ${tex`\textcolor{${d3.schemeCategory10[0]}}{\alpha}`} and ${tex`\textcolor{${d3.schemeCategory10[1]}}{\beta}`} other than that their sum must be one: the parametric term ${tex`t`} is less than zero when ${tex`\textcolor{${d3.schemeCategory10[0]}}{\alpha} > 1`} (and thus we are to the left of ${tex`\textcolor{${d3.schemeCategory10[0]}}{\mathrm{a}}`}) and ${tex`t > 1`} when ${tex`\textcolor{${d3.schemeCategory10[1]}}{\beta} > 1`} (and thus we are to the right of ${tex`\textcolor{${d3.schemeCategory10[1]}}{\mathrm{b}}`}). We can demonstrate this by removing the constraints on ${tex`t`} [above](#line).`4f:T42d,md`When we express two (or more) points as a normalized weighted sum, we call the sum an affine combination if the weights are allowed any value and a convex combination if they are limited between ${tex`0\dots 1`} individually. This distinction is important when we generalize to polygons. ## Triangles In the plane, three non-colinear points ${tex`\color{${d3.schemeCategory10[0]}}\mathrm{a}`}, ${tex`\color{${d3.schemeCategory10[1]}}\mathrm{b}`}, ${tex`\color{${d3.schemeCategory10[2]}}\mathrm{c}`} define a triangle, the simplex in two dimensions. As we did before, we can take the normalized weighted sum of the triangle endpoints to generate any point on the plane—the weights are again the point's barycentric coordinates (click the points to interact):`50:T6f1,triangle = { const tri = html`

Areas for ${tex`\Delta\mathrm{\textcolor{${d3.schemeCategory10[0]}}{a}\textcolor{${d3.schemeCategory10[1]}}{b}\textcolor{${d3.schemeCategory10[2]}}{c}}`}

` d3.select(tri).selectAll(".vertex>circle").call(d3.drag() .on("drag", dragging) .on("drag.update", update)); d3.select(tri).selectAll(".point>circle").call(d3.drag() .on("drag", dragging) .on("drag.update", update)); update(); return tri; }54:T857,{ // Triangle edges d3.selectAll(".ab").attr("x1", a[0]).attr("y1", a[1]).attr("x2", b[0]).attr("y2", b[1]); d3.selectAll(".bc").attr("x1", b[0]).attr("y1", b[1]).attr("x2", c[0]).attr("y2", c[1]); d3.selectAll(".ac").attr("x1", a[0]).attr("y1", a[1]).attr("x2", c[0]).attr("y2", c[1]); // Lines to point d3.selectAll(".ap").attr("x1", a[0]).attr("y1", a[1]).attr("x2", p[0]).attr("y2", p[1]); d3.selectAll(".bp").attr("x1", b[0]).attr("y1", b[1]).attr("x2", p[0]).attr("y2", p[1]); d3.selectAll(".cp").attr("x1", c[0]).attr("y1", c[1]).attr("x2", p[0]).attr("y2", p[1]); // Triangle and sub-triangles d3.selectAll(".abc").attr("d", `M${[a, b, c].join("L")} Z`); d3.selectAll(".pbc").attr("d", `M${[p, b, c].join("L")} Z`); d3.selectAll(".apc").attr("d", `M${[a, p, c].join("L")} Z`); d3.selectAll(".abp").attr("d", `M${[a, b, p].join("L")} Z`); // Vertices & Labels d3.selectAll(".vertex>circle").each(function process() { const target = {"a":a, "b":b, "c":c}[this.parentElement.classList[1]]; d3.select(this).attr("cx", target[0]).attr("cy", target[1]); }); d3.selectAll(".vertex>text").each(function process() { const target = {"a":a, "b":b, "c":c}[this.parentElement.classList[1]]; d3.select(this).attr("x", target[0]).attr("y", target[1]); }); // Point & Label d3.selectAll(".point>circle").attr("cx", p[0]).attr("cy", p[1]); d3.selectAll(".point>text").attr("x", p[0]).attr("y", p[1]); const caption_tri = html`Barycentric Coords. for ${tex`\Delta\mathrm{\textcolor{${d3.schemeCategory10[0]}}{a}\textcolor{${d3.schemeCategory10[1]}}{b}\textcolor{${d3.schemeCategory10[2]}}{c}}`}: ${tex`\textcolor{${d3.schemeCategory10[0]}}{\alpha}=`}${fmt(alpha)}, ${tex`\textcolor{${d3.schemeCategory10[1]}}{\beta}=`}${fmt(beta)}, ${tex`\textcolor{${d3.schemeCategory10[2]}}{\gamma}=`}${fmt(gamma)}`; d3.select("#triangle>figcaption").html(caption_tri.innerHTML); return md`Triangle dragging code took a lot of head bashing; [async is fun!](http://infowantstobeseen.org/thoughts/some-noticeable-thoughts-on-observable/ "Some Noticeable Notes on Observable") ...`; }55:[] 48:{"id":"37095cd53601b75a","slug":"coordonnees-barycentriques","title":"Coordonnées barycentriques","thumbnail":"5b033eed2c8c4c0efb10d50da8131c1efb8be5ed230129edda32ca19be2ff4f7","access_level":"public","create_time":"$D2018-09-10T03:52:44.671Z","update_time":"$D2018-09-11T16:04:16.115Z","view_time":null,"first_public_time":"$D2018-09-10T13:22:11.683Z","has_unpublished_edits":null,"fork":{"id":"e828ee5776f183b6","slug":"barycentric-coordinates","title":"Barycentric Coordinates ","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"stars":0,"starred":false,"owner":{"type":"team","id":"51e9e6bbb85f05f1","login":"msc59","name":"","avatar_url":"https://avatars-next.observableusercontent.com/70c6ba5df36a92dfd587104f6df90d4ab8b3bf8af09ad73b132ca42ec0256306","tier":"starter_2024","bio":"No one to follow \n/\nAnd nothing to teach \n/\nExcept that the goal \n/\nFalls short of the reach\n/\nLeonard Cohen\n","followed_by_you":false,"follows_you":false},"version":1190,"publish_version":1190,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f6586efe16fde16","login":"msc59","name":"","avatar_url":"https://avatars-next.observableusercontent.com/70c6ba5df36a92dfd587104f6df90d4ab8b3bf8af09ad73b132ca42ec0256306","tier":null,"bio":"Tente d'enseigner un peu de maths à de futurs informaticiens - IUT Lille.\n\n// No one to follow \n// And nothing to teach \n// Except that the goal \n// Falls short of the reach\n// L. Cohen","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0f6586efe16fde16","login":"msc59","name":"","avatar_url":"https://avatars-next.observableusercontent.com/70c6ba5df36a92dfd587104f6df90d4ab8b3bf8af09ad73b132ca42ec0256306","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Coordonnées barycentriques","cells":[{"id":0,"value":"md`# Coordonnées barycentriques\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"viewof t = {\n const line_form = slider({min:-1,max:2, format:fmt});\n line_form.style.cssText = \"display:block;max-width:640px;margin:auto;\";\n line_form.input[\"oninput\"] = (e) => {\n e && e.preventDefault();\n if((line_form.input.value < 0 || line_form.input.value > 1) && constrain_line == \"constrain\")\n {\n line_form.input.value = Math.min(1, Math.max(0, line_form.input.value));\n line_form.output.value = line_form.input.value;\n e.stopPropagation();\n e.preventDefault();\n line_form.dispatchEvent(new CustomEvent(\"input\"));\n return;\n }\n };\n return line_form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof constrain_line = checkbox({\n options: [{ value: \"constrain\", label: \"Constrain to segment\" }],\n value: \"constrain\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"calc_barycentric = (pt, vert_a, vert_b, vert_c) => {\n const ab = sub(vert_b, vert_a);\n const ac = sub(vert_c, vert_a);\n const ap = sub(pt, vert_a);\n\n const nac = [vert_a[1] - vert_c[1], vert_c[0] - vert_a[0]];\n const nab = [vert_a[1] - vert_b[1], vert_b[0] - vert_a[0]];\n\n const bary_beta = dot(ap, nac) / dot(ab, nac);\n const bary_gamma = dot(ap, nab) / dot(ac, nab);\n const bary_alpha = 1 - bary_beta - bary_gamma;\n \n return [bary_alpha, bary_beta, bary_gamma];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"md`Our solution is a *geometrically* motivated solution, as opposed to an *algebriacally* motivated approach. In two dimenions, we have two unknowns (any pair of barycentric coordinates) and the two equations to calculate ${tex`\\mathrm{p}`}'s Cartesian coordinates. Thus, we can [solve a simple linear system](https://en.wikipedia.org/wiki/Barycentric_coordinate_system#Conversion_between_barycentric_and_Cartesian_coordinates) to also find the coordinate values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`## Tetrahedra\n\nThe four vertices of a tetrahedra define an affine 3-dimensional space similarly to a triangle for 2D and a line in 1D. Instead of triangle area ratios, [we use tetrahedra subvolume ratios](http://www.iue.tuwien.ac.at/phd/nentchev/node31.html). We can also [define the coordinates algebraically](https://en.wikipedia.org/wiki/Barycentric_coordinate_system#Barycentric_coordinates_on_tetrahedra).\n\nIn addition to interpolation and point-in-simplex tests, barycentric coordinates on tetrahedra are extensively used in flow visualization, e.g. [particle tracing](https://ieeexplore.ieee.org/document/506224/ \"Interactive time-dependent particle tracing using tetrahedral decomposition\").`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"md`## Summary\n\nBarycentric coordinates have a multitude of uses in computer graphics and visualization, and are inexpensive to calculate. These coordinates provide [a clear way of describing many geometric problems](http://web.evanchen.cc/handouts/bary/bary-full.pdf).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"footnote_combos = md`## Footnotes\n\n\\[1\\] Strictly speaking, adding two points or scaling points are not defined in affine space. However, as we demonstrated, these operations are just shorthand for scaling and adding the vectors expressed by the differences of the points (their displacements).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"footnote_distance = md`[3] Formally, the ratio of distances in question is not with respect to the edge opposite, but along the line from the vertex in question to the opposite side through ${tex`\\mathrm{p}`} (the [cevian](https://en.wikipedia.org/wiki/Cevian) through ${tex`\\overrightarrow{\\mathbf{bp}}`} if we are solving for ${tex`\\textcolor{${d3.schemeCategory10[1]}}{\\beta}`})—this direclty relates to the ratios of triangle areas above. However, all the distances involved are part of similar right triangles and thus the ratios are the same. Calculating the distances from the opposite edge is more straightforward than calculating along ${tex`\\overrightarrow{\\mathbf{bp}}`} directly. `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## Appendix: Implementation\n\nThis notebook uses some ideas from [Kelley van Evert's](https://kelleyvanevert.nl/) Notebook \"[2D point in triangle test](https://beta.observablehq.com/@kelleyvanevert/2d-point-in-triangle-test)\" and [Mike Bostok's](https://bost.ocks.org/mike/) Notebook \"[De Casteljau's Algorithm](https://beta.observablehq.com/@mbostock/de-casteljaus-algorithm)\". \n\nThis formalism I learned at the feet of [Dr. Ken Joy](http://graphics.cs.ucdavis.edu/~joy/) at [UC Davis](http://www.ucdavis.edu) while a student; Ken was influenced by [Dr. Tony DeRose's](http://graphics.pixar.com/people/derose/) [coordinate-free approach](http://graphics.pixar.com/people/derose/publications/GeometryBook/paper.pdf) to Computer Graphics. [Shirley & Marschner](https://www.cs.cornell.edu/~srm/fcg4/ \"Fundamentals of Computer Graphics, 4th Ed.\") also proved helpful.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"add = ([x1, y1], [x2, y2]) => [x1+x2, y1+y2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"sub= ([x1, y1], [x2, y2]) => [x1-x2, y1-y2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"dot = ([px,py],[qx, qy]) => px * qx + py * qy","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"cross = ([px, py, pz=0], [qx, qy, qz=0]) => [py*qz-qy*pz, qx*pz-px*qz, px*qy-py*qx]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"scale = (s, [x,y]) => [s*x, s*y]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"d3 = require(\"d3-drag\",\"d3-selection\",\"d3-dispatch\", \"d3-format\", \"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"fmt = d3.format(\" 6.2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"ewidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"import {slider,checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"mutable a = [Math.min(300, ewidth) * 0.5 + (0.5* ewidth-150), 150 - 150.0 / (2 * Math.cos(30 * Math.PI / 180.))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"mutable b = [Math.min(300,ewidth)*0.25+(0.5*ewidth-150), 150 + 0.5 * 150 * Math.tan(30 * Math.PI / 180.)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"mutable c = [Math.min(300,ewidth) * 0.75+(ewidth/2-150), 150 + 0.5 * 150 * Math.tan(30 * Math.PI / 180)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"mutable p = scale(0.33333, add(a, add(b, c)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"mutable alpha=0.3333","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"mutable beta=0.3333","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"mutable gamma=0.3333","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":" function dragging()\n {\n const draggable = { \"a\": mutable a, \"b\": mutable b, \"c\": mutable c, \"p\": mutable p};\n const dragged = draggable[this.parentElement.classList[1]];\n dragged[0] = d3.event.x;\n dragged[1] = d3.event.y;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":" function update()\n {\n const [bary_alpha, bary_beta, bary_gamma] = calc_barycentric(mutable p, mutable a, mutable b, mutable c);\n mutable alpha = bary_alpha;\n mutable beta = bary_beta;\n mutable gamma = bary_gamma;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W55","stdlib":"1"}} 24:null