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

The plane

` }34:T607,${tex.block`\begin{aligned} \left(\textcolor{${ray_color}}{\bullet\mathrm{r}}\left(t\right) - \textcolor{${object_color}}{\bullet \mathrm{q}}\right) \cdot\textcolor{${object_color}}{\hat{\mathbf{n}}} &=0\\ \left(\textcolor{${ray_color}}{\bullet\mathrm{r_0}}+\textcolor{${ray_color}}{\hat{\mathbf{d}}}t - \textcolor{${object_color}}{\bullet \mathrm{q}}\right) \cdot\textcolor{${object_color}}{\hat{\mathbf{n}}} &=0\\ \left(\left(\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet \mathrm{q}}\right)\cdot\textcolor{${object_color}}{\hat{\mathbf{n}}}\right)+\textcolor{${ray_color}}{\hat{\mathbf{d}}}\cdot\textcolor{${object_color}}{\hat{\mathbf{n}}}t &=0 \\ \textcolor{${ray_color}}{\hat{\mathbf{d}}}\cdot\textcolor{${object_color}}{\hat{\mathbf{n}}}t &= -\left(\left(\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet \mathrm{q}}\right)\cdot\textcolor{${object_color}}{\hat{\mathbf{n}}}\right) \\ t &= -\frac{\left(\left(\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet \mathrm{q}}\right)\cdot\textcolor{${object_color}}{\hat{\mathbf{n}}}\right)}{\textcolor{${ray_color}}{\hat{\mathbf{d}}}\cdot\textcolor{${object_color}}{\hat{\mathbf{n}}}} \\ t &= \frac{\left(\left(\textcolor{${ray_color}}{\textcolor{${object_color}}{\bullet \mathrm{q}}-\bullet\mathrm{r_0}}\right)\cdot\textcolor{${object_color}}{\hat{\mathbf{n}}}\right)}{\textcolor{${ray_color}}{\hat{\mathbf{d}}}\cdot\textcolor{${object_color}}{\hat{\mathbf{n}}}} \end{aligned}`}35:T106d,{ const id = DOM.uid("ray"); const id2 = DOM.uid("arrow"); let origin = [0.25*ewidth, 112] 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]); let fig= html`

Side view of the plane. 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?(128-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 hit = intersect_ray_point(origin, norm(sub(target, origin)), [0.5*ewidth, 64], [0,-1]); if(hit < 0) hit = NaN; viewof t.value =!Number.isNaN(hit) ? `[${offset(target, hit).map(x => Math.round(x))}]` : "undefined"; if((!Number.isFinite(hit) && !Number.isNaN(hit))|| offset(target, hit)[0] < 0 || offset(target, hit)[0] > ewidth || offset(target, hit)[1] < 0 || offset(target, hit)[1] > 128) { viewof t.value = "offscreen"; hit = NaN; } d3.select(fig).select("#t").attr("visibility", !Number.isNaN(hit) ? "visible" : "hidden") .attr("cx", !Number.isNaN(hit) ? offset(target, hit)[0]: -1) .attr("cy", !Number.isNaN(hit) ? offset(target, hit)[1]: -1) } return fig; }36:T16ca,{ const id = DOM.uid("ray"); const id2 = DOM.uid("arrow"); let step = 0; let prev_step = 0; let origin = [0.25*ewidth, 112] 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]); let dir = norm(sub(target,origin)); const fig = html`

`; d3.select(fig).select("#dist") .interrupt("march") .transition("march") .ease(d3.easeCubic) .on("start", function march(){ let loc = offset(target,step); if(loc[0] < 0 || loc[0] >= ewidth || loc[1] < 0 || loc[1] >= 128) { step = 0; loc = origin; } const distance = sdf(loc, [0.5*ewidth,64], [0,-1]); prev_step = step; if(distance > 1 || distance < -1) { step += Math.abs(distance); viewof march_distance.value = `${distance}`; } else { viewof march_distance.value = `${distance}`; viewof march_intersection.value = `[${loc.map(x=>x.toFixed(4))}]`; step = 0; loc = origin; } d3.active(this, "march") .attr("y1", 64-distance) .attr("y2", 64-distance) .attr("stroke", d3.interpolateGreys(1-Math.abs(distance)/64)) .transition("march") .delay(1000) .on("start", march); }); d3.select(fig).select("#pos") .transition("march") .ease(d3.easeLinear) .on("start", function march(){ let loc = offset(target,prev_step); d3.active(this, "march") .attr("cx", loc[0]).attr("cy", loc[1]) .attr("fill", d3.interpolateGreys(1-sdf(loc, [0.5*ewidth,64], [0,-1])/64)) .transition("march") .delay(1000) .on("start", march); }); invalidation.then(() => d3.select(fig).selectAll("*").interrupt("march")); d3.select(fig).selectAll(".draggable").call(d3.drag() .on("start", start).on("drag", dragged).on("end", update)); function start() { d3.select(fig).selectAll(".anim") .attr("visibility", "hidden"); } 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 march_origin.value = `[${origin.map((x,i) => Math.round((i%2?(128-x):x)))}]`; } else { // Dragging line target = [e.x, e.y]; viewof march_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.ray") .attr('x1', origin[0]).attr('y1', origin[1]) .attr('x2', target[0]).attr('y2', target[1]); d3.select(fig).selectAll("line.projection") .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]); } function update() { const distance = sdf(origin, [0.5*ewidth,64], [0,-1]); viewof march_distance.value = `${distance}`; viewof march_intersection.value = "undefined"; d3.select(fig).selectAll("#dist") .attr("y1", 64-distance) .attr("y2", 64-distance) .attr("stroke", d3.interpolatePurples(1-distance/(0.5*ewidth-60))) .attr("visibility", "visible"); d3.select(fig).selectAll("#pos") .attr("cx", origin[0]).attr("cy", origin[1]) .attr("fill", d3.interpolatePurples(1-distance/(0.5*ewidth-60))) .attr("visibility", "visible"); step = 0; } return fig; }37:[] 31:{"id":"1dacf8b8806ceff6","slug":"modelling-planes","title":"Modelling: Planes","thumbnail":"fe78c41ad3ba30017975b848448c4810e045079fc6f7ec803aa693d10de6d927","access_level":"public","create_time":"$D2025-09-11T23:05:13.404Z","update_time":"$D2025-09-17T16:39:00.341Z","view_time":null,"first_public_time":"$D2025-09-12T22:36:21.080Z","has_unpublished_edits":null,"fork":false,"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":332,"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":2,"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: Planes","cells":[{"id":0,"value":"# Modelling: Planes","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":"Planes form the basis of many other shapes (literally and figuratively). Intersecting a plane can thus be part of another intersection sequence. Here we provide some means to perform this intersection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"## Analytical (Ray Casting)\n\nPlanes are defined by a normal ${tex`\\textcolor{${object_color}}{\\hat{\\mathbf{n}}}`} pointing away from the plane and any point ${tex`\\color{${object_color}}\\mathrm{\\bullet q}`} within the plane. Another other point ${tex`\\bullet \\mathrm{p}`} within the plane must form a displacement vector with ${tex`\\color{${object_color}}\\mathrm{\\bullet q}`} that is orthogonal to ${tex`\\textcolor{${object_color}}{\\hat{\\mathbf{n}}}`}; thus, using a convenient property, the dot product of those two vectors is zero:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"$${tex.block`\\left(\\bullet \\mathrm{p} - \\textcolor{${object_color}}{\\bullet \\mathrm{q}}\\right) \\cdot\\textcolor{${object_color}}{\\hat{\\mathbf{n}}}=0`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"Like before, we can substitute the ray equation for the intersection point and solve for ${tex`t`} to find the intersection:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"$35","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.25*ewidth}, ${128-112}]`, 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.25*ewidth,112])).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: `[${ray([160,112],norm(sub(offset([0.4*ewidth, 69]),[160,112])),intersect_ray_point([160,112],norm(sub(offset([0.4*ewidth, 69]),[160,112])),[0.5*ewidth,64],[0,-1])).map(x=>x.toFixed(4))}]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"There are two degenerate cases to check. First, if","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"$${tex.block`\\left(\\left(\\textcolor{${ray_color}}{\\textcolor{${object_color}}{\\bullet \\mathrm{q}}-\\bullet\\mathrm{r_0}}\\right)\\cdot\\textcolor{${object_color}}{\\hat{\\mathbf{n}}}\\right)=0`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"then the point ${tex`\\color{${ray_color}}\\bullet \\mathrm{r_0}`} is within the plane; the displacement vector consisting of a known point on the plane ${tex`\\color{${object_color}}\\bullet \\mathrm{q}`} and ${tex`\\color{${ray_color}}\\bullet \\mathrm{r_0}`} is orthogonal with the normal ${tex`\\color{${object_color}} \\mathbf{\\hat{n}}`}. This only happens if ${tex`\\color{${ray_color}}\\bullet \\mathrm{r_0}`} starts in the plane. \n\nThe second case occurs if","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"$${tex.block`\\textcolor{${ray_color}}{\\hat{\\mathbf{d}}}\\cdot\\textcolor{${object_color}}{\\hat{\\mathbf{n}}}=0`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"then the ${spancolor(ray_color,\"ray\")} is parallel to the plane, and thus will never intersect it (unless it started in the plane as above).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"## Implicit (Ray Casting)\n\nThe plane equation is the signed distance function; we are projecting the displacement vector ${tex`\\bullet \\mathrm{p} - \\textcolor{${object_color}}{\\bullet \\mathrm{q}}`} onto the normal to the plane ${tex`\\textcolor{${object_color}}{\\hat{ \\mathbf{n}}}`} which is exactly the distance. If the distance is zero, we are on the plane; if positive, we are above the plane; if negative, below. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"$${tex.block`\\operatorname{sdf}\\left(\\bullet \\mathrm{p}\\right)=\\left(\\bullet \\mathrm{p} - \\textcolor{${object_color}}{\\bullet \\mathrm{q}}\\right) \\cdot\\textcolor{${object_color}}{\\hat{\\mathbf{n}}}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":124,"value":"Note, this can give us an equivalent expression for the plane intersection:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"$${tex.block`t = -\\frac{\\operatorname{sdf}\\left(\\textcolor{${ray_color}}{\\bullet\\mathrm{r_0}}\\right)}{\\textcolor{${ray_color}}{\\hat{\\mathbf{d}}}\\cdot\\textcolor{${object_color}}{\\hat{\\mathbf{n}}}}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"This provides a *geometric* interpretation of the intersection: We are finding the (signed) distance of the ${spancolor(ray_color,\"ray origin\")} from the plane and dividing by the length of the projection onto the closest direction between the two (which is one unless they are orthogonal). The sign is negative as we are measuring *from* the plane *to* the origin; thus we have to flip it going the other way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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_ray_point = (r,d,q,n) => -sdf(r,q,n) / dot(d,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":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":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"