2d:null 2e:["$","title",null,{"children":"Modelling: Triangles | Introduction to Computer Graphics MSState | Observable"}] 33:T487,{ const id = DOM.uid("plane"); const id2 = DOM.uid("arrow"); return html`

A triangle.

` }34:T4d4,${tex.block`\begin{aligned} \left(1-\textcolor{${ray_color}}{\alpha}-\textcolor{${ray_color}}{\beta}\right)\textcolor{${object_color}}{\bullet \mathrm{p}_0}+\textcolor{${ray_color}}{\alpha} \textcolor{${object_color}}{\bullet \mathrm{p}_1}+ \textcolor{${ray_color}}{\beta}\textcolor{${object_color}}{\bullet \mathrm{p}_2} &= \textcolor{${ray_color}}{\bullet \mathrm{r}}\left(t\right)\\ \left(1-\textcolor{${ray_color}}{\alpha}-\textcolor{${ray_color}}{\beta}\right)\textcolor{${object_color}}{\bullet \mathrm{p}_0}+\textcolor{${ray_color}}{\alpha} \textcolor{${object_color}}{\bullet \mathrm{p}_1}+ \textcolor{${ray_color}}{\beta}\textcolor{${object_color}}{\bullet \mathrm{p}_2} &= \textcolor{${ray_color}}{\bullet \mathrm{r}_0} + \textcolor{${ray_color}}{\hat{\mathbf{d}}}t\\ \textcolor{${object_color}}{\bullet \mathrm{p}_0}+\left(\textcolor{${object_color}}{\bullet \mathrm{p}_1}-\textcolor{${object_color}}{\bullet \mathrm{p}_0}\right)\textcolor{${ray_color}}{\alpha} + \left(\textcolor{${object_color}}{\bullet \mathrm{p}_2}-\textcolor{${object_color}}{\bullet \mathrm{p}_0}\right)\textcolor{${ray_color}}{\beta} &= \textcolor{${ray_color}}{\bullet \mathrm{r}_0} + \textcolor{${ray_color}}{\hat{\mathbf{d}}}t\\ \end{aligned}`}35:T4d8,${tex.block`\begin{aligned} \textcolor{${object_color}}{\bullet \mathrm{p}_0}+\left(\textcolor{${object_color}}{\bullet \mathrm{p}_1}-\textcolor{${object_color}}{\bullet \mathrm{p}_0}\right)\textcolor{${ray_color}}{\alpha} + \left(\textcolor{${object_color}}{\bullet \mathrm{p}_2}-\textcolor{${object_color}}{\bullet \mathrm{p}_0}\right)\textcolor{${ray_color}}{\beta} &= \textcolor{${ray_color}}{\bullet \mathrm{r}_0} + \textcolor{${ray_color}}{\hat{\mathbf{d}}}t\\ -\textcolor{${ray_color}}{\hat{\mathbf{d}}}t + \textcolor{${object_color}}{ \mathbf{e}_{10}}\textcolor{${ray_color}}{\alpha} + \textcolor{${object_color}}{\mathbf{e}_{20}}\textcolor{${ray_color}}{\beta} &= \textcolor{${ray_color}}{\bullet \mathrm{r}_0} - \textcolor{${object_color}}{\bullet \mathrm{p}_0}\\ \begin{bmatrix} \vert & \vert & \vert \\ -\textcolor{${ray_color}}{\hat{\mathbf{d}}} & \textcolor{${object_color}}{ \mathbf{e}_{10}} & \textcolor{${object_color}}{ \mathbf{e}_{20}} \\ \vert & \vert & \vert \\ \end{bmatrix} \begin{bmatrix} t\\ \textcolor{${ray_color}}{\alpha} \\ \textcolor{${ray_color}}{\beta} \end{bmatrix} &= \begin{bmatrix} \vert \\ \textcolor{${ray_color}}{\mathbf{r}_{0\textcolor{${object_color}}{0}}}\\ \vert \end{bmatrix} \end{aligned}`}36:T75b,${tex.block`\begin{aligned} t &= \frac{\operatorname{det}\left(\mathrm{M}_t\right)}{\operatorname{det}\left(\mathrm{M}\right)} = \frac{ \begin{vmatrix} \vert & \vert & \vert \\ \textcolor{${ray_color}}{\mathbf{r}_{0\textcolor{${object_color}}{0}}} & \textcolor{${object_color}}{ \mathbf{e}_{10}} & \textcolor{${object_color}}{ \mathbf{e}_{20}} \\ \vert & \vert & \vert \\ \end{vmatrix}} {\begin{vmatrix} \vert & \vert & \vert \\ -\textcolor{${ray_color}}{\hat{\mathbf{d}}} & \textcolor{${object_color}}{ \mathbf{e}_{10}} & \textcolor{${object_color}}{ \mathbf{e}_{20}}\\ \vert & \vert & \vert \\ \end{vmatrix}} \\ \textcolor{${object_color}}{\alpha} &= \frac{\operatorname{det}\left(\mathrm{M}_\alpha\right)}{\operatorname{det}\left(\mathrm{M}\right)} =\frac{ \begin{vmatrix} \vert & \vert & \vert \\ -\textcolor{${ray_color}}{\hat{\mathbf{d}}} & \textcolor{${ray_color}}{\mathbf{r}_{0\textcolor{${object_color}}{0}}} & \textcolor{${object_color}}{ \mathbf{e}_{20}}\\ \vert & \vert & \vert \\ \end{vmatrix}} {\begin{vmatrix} \vert & \vert & \vert \\ -\textcolor{${ray_color}}{\hat{\mathbf{d}}} & \textcolor{${object_color}}{ \mathbf{e}_{10}} & \textcolor{${object_color}}{ \mathbf{e}_{20}} \\ \vert & \vert & \vert \\ \end{vmatrix}} \\ \textcolor{${object_color}}{\beta} &= \frac{\operatorname{det}\left(\mathrm{M}_\beta\right)}{\operatorname{det}\left(\mathrm{M}\right)} = \frac{ \begin{vmatrix} \vert & \vert & \vert \\ -\textcolor{${ray_color}}{\hat{\mathbf{d}}} & \textcolor{${object_color}}{ \mathbf{e}_{10}} & \textcolor{${ray_color}}{\mathbf{r}_{0\textcolor{${object_color}}{0}}} \\ \vert & \vert & \vert \\ \end{vmatrix}} {\begin{vmatrix} \vert & \vert & \vert \\ -\textcolor{${ray_color}}{\hat{\mathbf{d}}} & \textcolor{${object_color}}{ \mathbf{e}_{10}} & \textcolor{${object_color}}{ \mathbf{e}_{20}} \\ \vert & \vert & \vert \\ \end{vmatrix}} \end{aligned}`}37:T5a6,${tex.block`\begin{aligned} t = \frac{\operatorname{det}\left(\mathrm{M}_t\right)}{\operatorname{det}\left(\mathrm{M}\right)} &= \frac{\textcolor{${object_color}}{\mathbf{e}_{20}}\cdot\left(\textcolor{${ray_color}}{\mathbf{r}_{0\textcolor{${object_color}}{0}}}\times\textcolor{${object_color}}{\mathbf{e}_{10}} \right)} {\textcolor{${object_color}}{\mathbf{e}_{10}}\cdot\left(\textcolor{${ray_color}}{\mathbf{d}}\times \textcolor{${object_color}}{\mathbf{e}_{20}}\right)} \\ \textcolor{${object_color}}{\alpha} = \frac{\operatorname{det}\left(\mathrm{M}_\alpha\right)}{\operatorname{det}\left(\mathrm{M}\right)} &=\frac{\textcolor{${ray_color}}{\mathbf{r}_{0\textcolor{${object_color}}{0}}}\cdot\left(\textcolor{${ray_color}}{\mathbf{d}}\times \textcolor{${object_color}}{ \mathbf{e}_{20}}\right)} {\textcolor{${object_color}}{\mathbf{e}_{10}}\cdot\left(\textcolor{${ray_color}}{\mathbf{d}}\times \textcolor{${object_color}}{\mathbf{e}_{20}}\right)} \\ \textcolor{${object_color}}{\beta} = \frac{\operatorname{det}\left(\mathrm{M}_\beta\right)}{\operatorname{det}\left(\mathrm{M}\right)} &=\frac{\textcolor{${ray_color}}{\mathbf{d}}\cdot\left(\textcolor{${ray_color}}{\mathbf{r}_{0\textcolor{${object_color}}{0}}}\times\textcolor{${object_color}}{\mathbf{e}_{10}} \right)} {\textcolor{${object_color}}{\mathbf{e}_{10}}\cdot\left(\textcolor{${ray_color}}{\mathbf{d}}\times \textcolor{${object_color}}{\mathbf{e}_{20}}\right)} \end{aligned}`}38:T1412,{ const id = DOM.uid("ray"); const id2 = DOM.uid("box"); let origin = [0.125*ewidth, 128]; let p0 = [0.325*ewidth,192]; let p1 = [0.675*ewidth,128]; let p2 = [0.5*ewidth,64]; let offset_len = Math.max(30,0.1*ewidth); const offset = ([x,y], d=offset_len) => add(origin, norm(sub([x,y],origin)).map(i=>i*d)) let target = offset([0.4*ewidth, 69]); //viewof t.value = `[${offset(target, t0).map(x => Math.round(x))}]` let fig= html`

Drag point and ray to see possible intersections.

`; d3.select(fig).selectAll(".draggable").call(d3.drag() .on("drag", dragged)); function dragged(e) { if(e.x < 0 || e.x >= ewidth || e.y < 0 || e.y >= 256) return; let ele = d3.select(this); if(ele.classed("origin")) { // Dragging origin target = add(target, sub([e.x, e.y], origin)); origin = [e.x, e.y]; viewof origin.value = `[${origin.map((x,i) => Math.round((i%2?(256-x):x)))}]`; } else { // Dragging line target = [e.x, e.y]; viewof direction.value = `[${norm(sub(target,origin)).map((x,i) => x.toFixed(4) * (i%2==0?1:-1))}]`; } if(len(sub(origin, target)) < 0.001) return; // Too close target = offset(target); let far = offset(target,ewidth); d3.select(fig).selectAll("line.draggable") .attr('x1', origin[0]).attr('y1', origin[1]) .attr('x2', target[0]).attr('y2', target[1]); d3.select(fig).selectAll("line.ray") .attr('x1', target[0]).attr('y1', target[1]) .attr('x2', far[0]).attr('y2', far[1]); d3.select(fig).selectAll(".origin") .attr('cx', origin[0]).attr('cy', origin[1]); let ts = intersect_triangle(origin, norm(sub(target, origin)), p0, p1, p2); let t0 = ts.length > 0 ? ts[0] : NaN; let t1 = ts.length > 1 ? ts[1] : NaN; viewof t.value =!Number.isNaN(t0) ? `[${offset(target, t0).map(x => Math.round(x))}]` : "undefined"; d3.select(fig).select("#t0").attr("visibility", !Number.isNaN(0) ? "visible" : "hidden") .attr("cx", !Number.isNaN(t0) ? offset(target, t0)[0]: -1) .attr("cy", !Number.isNaN(t0) ? offset(target, t0)[1]: -1) d3.select(fig).select("#t1").attr("visibility", t0 != t1 ? "visible" : "hidden") .attr("cx", !Number.isNaN(t0) ? offset(target, t1)[0]: -1) .attr("cy", !Number.isNaN(t0) ? offset(target, t1)[1]: -1); } return fig; }39:[] 31:{"id":"ebbd88a90b15408e","slug":"modelling-triangles","title":"Modelling: Triangles","thumbnail":"a51631aadcc470ed6f12758573895af2658961f519d9c9757faceeadd975f56b","access_level":"public","create_time":"$D2025-09-17T18:13:51.438Z","update_time":"$D2026-09-17T14:32:17.015Z","view_time":null,"first_public_time":"$D2025-09-18T15:21:33.492Z","has_unpublished_edits":null,"fork":{"id":"1dacf8b8806ceff6","slug":"modelling-planes","title":"Modelling: Planes","owner":{"id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024"},"version":721,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"},{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"16798e6b406d73db","slug":"ray-tracing-notes","title":"Ray Tracing Notes","owner":{"id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState"}},"type":"notebook","body":{"title":"Modelling: Triangles","cells":[{"id":0,"value":"# Modelling: Triangles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"Triangles are the most prevalent primitive in computer graphics; this is largely due to the fact that graphics hardware is optimized for rasterizing triangles. As many of our models will be triangulated, we will need to be able to render them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"## Analytical (Ray Casting)\n\nTriangles are defined by three non-collinear points ${tex`\\textcolor{${object_color}}{\\bullet \\mathrm{p}_0, \\bullet \\mathrm{p}_1,\\bullet \\mathrm{p}_2}`}. To see if a ${spancolor(ray_color, \"ray\")} intersects with our triangle, we must answer two questions:\n- Did the ${spancolor(ray_color, \"ray\")} intersect the plane containing the triangle?\n- If the ${spancolor(ray_color, \"ray\")} intersected the plane, is it within the triangle itself?\n\nWe can solve both questions simultaneously by using barycentric coordinates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":356,"value":"### Triangle Containment\n\nBarycentric coordinates can be used to determine if a point is within a triangle: if any of the coordinates are negative or greater than one, then the point is outside the triangle; otherwise it is within. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"$${tex.block`\\left(1-\\alpha-\\beta\\right) \\textcolor{${object_color}}{\\bullet \\mathrm{p}_0}+\\beta \\textcolor{${object_color}}{\\bullet \\mathrm{p}_1}+\\alpha \\textcolor{${object_color}}{\\bullet \\mathrm{p}_2} = \\bullet \\mathrm{p}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"We can express our ${spancolor(\"ray_color\", \"intersection point\")} in barycentric coordinates:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"$${tex.block` \\left(1-\\textcolor{${ray_color}}{\\alpha}-\\textcolor{${ray_color}}{\\beta}\\right)\\textcolor{${object_color}}{\\bullet \\mathrm{p}_0}+\\textcolor{${ray_color}}{\\beta} \\textcolor{${object_color}}{\\bullet \\mathrm{p}_1}+ \\textcolor{${ray_color}}{\\alpha}\\textcolor{${object_color}}{\\bullet \\mathrm{p}_2} = \\textcolor{${ray_color}}{\\bullet \\mathrm{r}}\\left(t\\right)`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"Rearranging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"Note that the ${tex`\\textcolor{${object_color}}{\\mathbf{e}_{10}} = \\textcolor{${object_color}}{\\bullet \\mathrm{p}_1}-\\textcolor{${object_color}}{\\bullet \\mathrm{p}_0}`} and ${tex`\\textcolor{${object_color}}{\\mathbf{e}_{20}} =\\textcolor{${object_color}}{\\bullet \\mathrm{p}_2}-\\textcolor{${object_color}}{\\bullet \\mathrm{p}_0}`} are edge vectors for the triangle; they can be pre-calculated and stored with the model or calculated when needed.\n\nWe have three unknowns: ${tex`t, \\textcolor{${ray_color}}{\\alpha\\textcolor{black}{,} \\beta}`}. Our linear system has three equations (one for each dimension in 3D, expressed as columns in the following):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"where ${tex`\\textcolor{${ray_color}}{\\mathbf{r}_{0\\textcolor{${object_color}}{0}}}=\\textcolor{${ray_color}}{\\bullet \\mathrm{r}_0} - \\textcolor{${object_color}}{\\bullet \\mathrm{p}_0}`}. Solving via Cramer's Rule gives us","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":460,"value":"We can use a linear algebra hack that ${tex`\\operatorname{det}\\left(\\begin{bmatrix}\\mathbf{m_0}&\\mathbf{m_1}&\\mathbf{m_2}\\end{bmatrix}\\right) = \\mathbf{m_0} \\cdot \\left(\\mathbf{m_1} \\times \\mathbf{m_2}\\right) = \\mathbf{m_1} \\cdot \\left(\\mathbf{m_2} \\times \\mathbf{m_0}\\right) = \\mathbf{m_2} \\cdot \\left(\\mathbf{m_0} \\times \\mathbf{m_1}\\right)`} where the ${tex`\\mathbf{m_i}`} are column vectors to solve for the determinants. In addition, ${tex`\\mathbf{u} \\times \\mathbf{v} = - \\left(\\mathbf{v} \\times \\mathbf{u}\\right)`}. This allows us to re-write the solution in different ways. One arrangement, by Möller and Trumbore, is","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":512,"value":"Both ${tex`\\textcolor{${ray_color}}{\\mathbf{d}}\\times \\textcolor{${object_color}}{\\mathbf{e}_{20}}`} and ${tex`\\textcolor{${ray_color}}{\\mathbf{r}_{0\\textcolor{${object_color}}{0}}}\\times\\textcolor{${object_color}}{\\mathbf{e}_{10}}`} occur multiple times and can be cached; this is useful for optimization.\n\nTo solve for ${tex`t`}, we follow four steps:\n\n1. Calculate ${tex`\\operatorname{det}\\left(\\mathrm{M}\\right)`}; if it is zero, there is no intersection (the ray and triangle plane are parallel).\n2. Find ${tex`\\textcolor{${object_color}}{\\alpha}`}. If it is negative or greater than one, there is no intersection (we are outside the triangle).\n3. Find ${tex`\\textcolor{${object_color}}{\\beta}`}. If it is negative or greater than one, there is no intersection (we are outside the triangle).\n4. Calculate ${tex`t`}. If it is negative, there is no intersection (it is behind us).\n5. Return ${tex`\\textcolor{${ray_color}}{\\bullet \\mathrm{r}}\\left(t\\right)`} as the intersection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"

How thin is thin?

We are working on the assumption that we do not report that rays that start in the plane of the triangle and stay in that plane as potentially intersecting; the triangle is "too thin" for such intersections. If that assumption is invalid, we would need to extend step 1 to check to see if ${tex`\\textcolor{${ray_color}}{\\bullet \\mathrm{r}_0}`} is in the triangle's plane and use a different algorithm.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"viewof origin = Inputs.text({label: html`${spancolor(ray_color,\"Ray Origin\")}`, value:`[${0.125*ewidth}, 128]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"viewof direction = Inputs.text({label: html`${spancolor(ray_color,\"Ray Direction\")}`, value:`[${norm(sub(offset([0.4*ewidth, 69]),[0.125*ewidth, 128])).map((x,i) => (i%2?-x:x).toFixed(4))}]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof t = Inputs.text({label: \"Intersection\", value: \"undefined\", disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"## Implicit (Ray Casting)\n\nTo be completed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"viewof march_origin = Inputs.text({label: html`${spancolor(ray_color,\"Ray Origin\")}`, value:`[${0.25*ewidth}, 112]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"viewof march_direction = Inputs.text({label: html`${spancolor(ray_color,\"Ray Direction\")}`, value:`[${norm([1,1]).map(x => x.toFixed(4))}]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"viewof march_distance = Inputs.text({label: \"March Distance\", value:`${sdf([0.25*ewidth, 112], [0.5*ewidth,54],[0,-1])}`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"viewof march_intersection = Inputs.text({label: \"Intersection\", value: \"undefined\", disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"ewidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"sub = ([x1,y1],[x0,y0]) => [x1-x0,y1-y0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"add = ([x0,y0],[x1,y1])=>[x1+x0,y1+y0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"dot = ([x,y], [i,j]) => x*i + y*j","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"lensq = (vec) => dot(vec, vec)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"len = (vec) => Math.sqrt(lensq(vec))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"norm = ([x,y]) => [x/len([x,y]), y/len([x,y])]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"sdf = (p, q, n) => dot(sub(p,q),n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"ray = (r,d,t) => add(r,d.map(x=>x*t))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"intersect_triangle = (r,d,p0,p1,p2) => {\n // The above derivation does not work in 2D (the ray direction is parallel to the triangle plane).\n // Instead, treat each triangle edge as a plane perpendicular to the xy plane, make sure the point\n // is between the edge endpoints, and return the smallest positive intersection.\n let e10 = sub(p1,p0);\n let e20 = sub(p2,p0);\n let e21 = sub(p2,p1);\n\n let t10 = intersect_ray_point(r, d, p0, [-e10[1],e10[0]]);\n let t20 = intersect_ray_point(r, d, p0, [-e20[1],e20[0]]);\n let t21 = intersect_ray_point(r, d, p1, [-e21[1],e21[0]]);\n\n let [r10, r20, r21] = [t10, t20, t21].map(x=>ray(r,d,x));\n let on_edge = (t,first,second) => {\n let p = ray(r,d,t);\n let projection = dot(sub(second,first), sub(p,first));\n return projection >=0 && projection <= lensq(sub(second,first)) && t>= 0;\n };\n let index_map = [[p0,p1],[p0,p2],[p1,p2]];\n return [t10,t20,t21].filter((t,i)=>on_edge(t,...index_map[i])).toSorted((a,b)=>a-b).slice(0,2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"offset_len = Math.max(30,0.1*ewidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"offset = ([x,y], d=offset_len) => add([160,112], norm(sub([x,y],[0.25*ewidth,112])).map(i=>i*d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"import {intersect_ray_point} from \"@cse4413msstate/modelling-planes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"### Color Constants\n\nWe use a lot of colors; define constants to use for them. They are imported.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"import {x_color,y_color,z_color,u_color,v_color,n_color,camera_color,viewport_color,image_color,ray_color,object_color,scene_color,spancolor,texcolor} from \"@cse4413msstate/graphics-color-functions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"