2d:null 2e:["$","title",null,{"children":"Modelling: Spheres | Introduction to Computer Graphics MSState | Observable"}] 33:Tbc9,A sphere is characterized by its center ${tex`\color{${object_color}}\bullet\mathrm{c}`} and radius ${tex`\color{${object_color}}r`}; every point ${tex`\bullet\mathrm{p}`} on the surface of the sphere satisfies ${tex.block`\left\|\bullet\mathrm{p}-\textcolor{${object_color}}{\bullet\mathrm{c}}\right\|^2=\textcolor{${object_color}}{r}^2`} If we substitute the ${spancolor(ray_color,"ray")} equation ${tex`\textcolor{${ray_color}}{\mathrm{r}}(t)`} for ${tex`\bullet\mathrm{p}`}, then we can express the intersection in terms of ${tex`t`} ${tex.block`\begin{aligned} \left\|\textcolor{${ray_color}}{\bullet\mathrm{r}}\left(t\right)-\textcolor{${object_color}}{\bullet\mathrm{c}}\right\|^2&=\textcolor{${object_color}}{r}^2\\ \left\|\textcolor{${ray_color}}{\bullet\mathrm{r_0}}+\textcolor{${ray_color}}{\hat{\mathbf{d}}}t-\textcolor{${object_color}}{\bullet\mathrm{c}}\right\|^2&=\textcolor{${object_color}}{r}^2 \end{aligned}`} Recall, the squared length of a vector is just the dot project with itself ${tex`\left\|\mathrm{v}\right\| = \mathrm{v} \cdot \mathrm{v}`} ${tex.block`\begin{aligned} \left(\left(\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet\mathrm{c}}\right)+\textcolor{${object_color}}{\hat{\mathbf{d}}}t\right)\cdot\left(\left(\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet\mathrm{c}}\right)+\textcolor{${object_color}}{\hat{\mathbf{d}}}t\right)&=\textcolor{${object_color}}{r}^2\\ \|\textcolor{${object_color}}{\hat{\mathbf{d}}}t\|^2 + 2\left(\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet\mathrm{c}}\right)\cdot\textcolor{${object_color}}{\hat{\mathbf{d}}}t + \left\|\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet\mathrm{c}}\right\|^2 -\textcolor{${object_color}}{r}^2 &= 0 \end{aligned}`} We can then use the [quadratic formula](https://en.wikipedia.org/wiki/Quadratic_formula "Wikipedia: Quadratic Formula") to solve for ${tex`t`} ${tex.block`t=\frac{-b\pm\color{${d3.schemeCategory10[3]}}\sqrt{b^2-4ac}}{2a}`} where ${tex.block`\begin{aligned}a & = \left\|\textcolor{${object_color}}{\hat{\mathbf{d}}}\right\|^2\\ b &= 2\left(\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet\mathrm{c}}\right)\cdot\textcolor{${object_color}}{\hat{\mathbf{d}}}\\ c &= \left\|\textcolor{${ray_color}}{\bullet\mathrm{r_0}}-\textcolor{${object_color}}{\bullet\mathrm{c}}\right\|^2 -\textcolor{${object_color}}{r}^2 \end{aligned}`} The discriminant, the portion under the square root, determines how many intersections there are with the sphere: If negative, the are no intersections; if zero, then they ray hits the sphere at a tangent; if positive, then there are two intersections—the signs of the ${tex`t`}s then determines if the intersection is along the ray (positive) or behind the ray origin (negative).34:T1005,{ const id = DOM.uid("arrowhead"); const id2 = DOM.uid("spheres"); let origin = [0.25*ewidth, 128] 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]); const 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]); const hits = intersect_sphere(origin, norm(sub(target, origin)), [0.5*ewidth, 128], 60); viewof t0.value = hits.length > 0 ? `[${offset(target, hits[0]).map(x => Math.round(x))}]` : "undefined"; viewof t1.value = hits.length > 1 ? `[${offset(target, hits[1]).map(x => Math.round(x))}]` : "undefined"; d3.select(fig).select("#t0").attr("visibility", hits.length > 0 ? "visible" : "hidden") .attr("cx", hits.length > 0 ? offset(target, hits[0])[0]: -1) .attr("cy", hits.length > 0 ? offset(target, hits[0])[1]: -1) d3.select(fig).select("#t1").attr("visibility", hits.length > 1 ? "visible" : "hidden") .attr("cx", hits.length > 1 ? offset(target, hits[1])[0]: -1) .attr("cy", hits.length > 1 ? offset(target, hits[1])[1]: -1) } return fig; }35:T658,md`The equation above can be slightly simplified by noting that we can factor out a 4 from out of the square root which cancels the factor of 2 in ${tex`b`} and the denominator: ${tex.block`t=\frac{-\color{${ray_color}}\mathbf{\hat{d}}\color{black}\cdot\left(\color{${ray_color}}\bullet\mathrm{r_0}\color{black}-\color{${object_color}}\bullet\mathrm{c}\right)\pm\color{${d3.schemeCategory10[3]}}\sqrt{\color{black}\left(\color{${ray_color}}\mathbf{\hat{d}}\color{black}\cdot\left(\color{${ray_color}}\bullet\mathrm{p}\color{black}-\color{${object_color}}\bullet\mathrm{c}\color{black}\right)\right)^2-\|\color{${ray_color}}\mathbf{\hat{d}}\color{black}\|^2\left(\left\|\color{${ray_color}}\bullet\mathrm{p}\color{black} - \color{${object_color}}\bullet\mathrm{c}\color{black}\right\|^2 -\textcolor{${object_color}}{r}^2\right)}}{\|\color{${ray_color}}\mathbf{\hat{d}}\color{black}\|^2}`} Finally, as we assumed our ray direction is already normalized, ${tex`\|\color{${ray_color}}\mathbf{\hat{d}}\color{black}\|=1`} and thus ${tex.block`t=-\color{${ray_color}}\mathbf{\hat{d}}\color{black}\cdot\left(\color{${ray_color}}\bullet\mathrm{r_0}\color{black}-\color{${object_color}}\bullet\mathrm{c}\right)\pm\color{${d3.schemeCategory10[3]}}\sqrt{\color{black}\left(\color{${ray_color}}\mathbf{\hat{d}}\color{black}\cdot\left(\color{${ray_color}}\bullet\mathrm{r_0}\color{black}-\color{${object_color}}\bullet\mathrm{c}\color{black}\right)\right)^2-\left(\left\|\color{${ray_color}}\bullet\mathrm{r_0}\color{black} - \color{${object_color}}\bullet\mathrm{c}\color{black}\right\|^2 -\textcolor{${object_color}}{r}^2\right)}`} `36:T1639,{ const id = DOM.uid("arrowhead"); const id2 = DOM.uid("spheres"); let origin = [0.25*ewidth, 128] let offset_len = Math.max(30,0.05*ewidth); let step = 0; let prev_step = 0; const offset = ([x,y], d=offset_len, src=origin) => add(src, norm(sub([x,y],src)).map(i=>i*d)) let target = offset([0.4*ewidth, 69]); const fig = html`

Drag point and ray to see possible intersections.

` 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] >= 256) { step = 0; loc = origin; } const distance = sphere_signed_distance(loc, [0.5*ewidth,128], 60); prev_step = step; if(distance > 1 || distance < -1) { step += Math.abs(distance); viewof march_distance.value = `${distance}`; } else { viewof march_intersection.value = `[${loc.map(x=>x.toFixed(4))}]`; step = 0; loc = origin; } d3.active(this, "march") .attr("r", distance+60) .attr("stroke", d3.interpolateGreys(1-distance/(0.5*ewidth-60))) .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-sphere_signed_distance(loc, [0.5*ewidth,128], 60)/(0.5*ewidth-60))) .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?(256-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 = sphere_signed_distance(origin, [0.5*ewidth,128], 60); viewof march_distance.value = `${distance}`; viewof march_intersection.value = "undefined"; d3.select(fig).selectAll("#dist") .attr("r", distance+60) .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":"f0367c9149d860d2","slug":"modelling-spheres","title":"Modelling: Spheres","thumbnail":"6c3f37d490cf4827d363c040bc286141aae6b499ca70bfb65c7377811f8dff73","access_level":"public","create_time":"$D2025-09-10T18:56:22.004Z","update_time":"$D2025-09-12T17:43:11.465Z","view_time":null,"first_public_time":"$D2025-09-11T15:42:28.836Z","has_unpublished_edits":null,"fork":{"id":"68f24a1e17b3ad98","slug":"basic-ray-casting","title":"Basic Ray Casting","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"stars":1,"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":1306,"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":0,"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: Spheres","cells":[{"id":0,"value":"# Modelling: Spheres\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"{\n const id = DOM.uid(\"sphere\");\n\n return html`

The sphere

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"\nAfter [the camera has been constructed](https://observablehq.com/@cse4413msstate/modelling-view-frame-ray-generation?collection), we generate ${spancolor(ray_color,\"rays\")}. ${spancolor(ray_color,\"Rays\")} consist of an ${spancolor(ray_color,\"origin\")} ${texcolor(ray_color,\"\\\\bullet\\\\mathrm{r}_0\")} and the ${spancolor(ray_color,\"ray direction\")} ${texcolor(ray_color,\"\\\\mathbf{\\\\hat d}\")} (assumed to be normalized). What we want is the nearest point ${texcolor(\"black\",\"\\\\bullet \\\\mathrm{p}\")} on the ${spancolor(object_color,\"nearest surface\")} along this ${spancolor(ray_color,\"ray\")}; finding this point requires calculating potential intersections with each ${spancolor(object_color,\"object\")} in the scene. Here, we consider spheres.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"## Analytical (Ray Casting)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"viewof origin = Inputs.text({label: html`${spancolor(ray_color,\"Ray Origin\")}`, value:`[${0.25*ewidth}, 128]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"viewof 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":1144,"value":"viewof t0 = Inputs.text({label: \"First Intersection\", value: \"undefined\", disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"viewof t1 = Inputs.text({label: \"Second Intersection\", value: \"undefined\", disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`Equations for other objects are solved similarly. This particular version returns all intersections; it sufficent just return the closest positive if there is one.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"## Implicit (Ray Marching)\n\nTo find the signed distance function, we start with the sphere equation\n\n${tex.block`\\left\\|\\bullet\\mathrm{p}-\\textcolor{${object_color}}{\\bullet\\mathrm{c}}\\right\\|^2=\\textcolor{${object_color}}{r}^2`}\n\nThis easily transforms into a signed distance by making it an implicit equation in terms of the sample point ${tex`\\bullet\\mathrm{p}`}\n\n${tex.block`\\operatorname{sdf}\\left(\\bullet\\mathrm{p}\\color{black}\\right)=\\left\\|\\bullet\\mathrm{p} -\\color{${object_color}}\\bullet\\mathrm{c}\\color{black}\\right\\|-\\textcolor{${object_color}}{r}`}\n\nWe then march along the ray, calculating the signed distance at every point. We return an intersection when this distance is smaller than a chosen threshold or changes from positive to negative (or vice versa if we start within the sphere).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1242,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"viewof march_origin = Inputs.text({label: html`${spancolor(ray_color,\"Ray Origin\")}`, value:`[${0.25*ewidth}, 128]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"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":1269,"value":"viewof march_distance = Inputs.text({label: \"March Distance\", value:`${sphere_signed_distance([0.25*ewidth, 128], [0.5*ewidth,128],60)}`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"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":1231,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"ewidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"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":724,"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":913,"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":909,"value":"lensq = (vec) => dot(vec, vec)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"len = (vec) => Math.sqrt(lensq(vec))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"norm = ([x,y]) => [x/len([x,y]), y/len([x,y])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"function intersect_sphere(origin, dir, center, radius)\n{\n const a = lensq(dir); // If dir is normalized, than we can just assume this is 1\n const b = dot(dir, sub(origin, center));\n const c = lensq(sub(origin, center)) - radius * radius;\n if(b*b - a*c < 0)\n return [];\n let t0 = (-b - Math.sqrt(b*b - a*c)) / a;\n let t1 = (-b + Math.sqrt(b*b - a*c)) / a;\n if(t1 < 0)\n return [];\n else if(t0 < 0)\n return [t1];\n else if(t1 != t0)\n return [t0, t1];\n else\n return [t0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"function sphere_signed_distance(origin, center, radius)\n{\n return len(sub(origin, center)) - radius;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"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":1016,"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"