2d:null 2e:["$","title",null,{"children":"Modelling: View Frame & Ray Generation | Introduction to Computer Graphics MSState | Observable"}] 33:T8e8,line = { const p = [ewidth*0.375, 130]; const q = [ewidth*0.625, 138]; const u = [ewidth*0.5, 134]; const r = [ewidth*0.525, 50]; const v = [(p[0]+r[0]) / 2, (p[1]+r[1])/2]; const s = [ewidth*0.275, 45]; const n = [(p[0]+s[0]) / 2 - 15, (p[1]+s[1])/2]; const id = DOM.uid("arrowhead"); const id2 = DOM.uid("arrowhead2"); const id3 = DOM.uid("arrowhead3"); return html`

A frame. Its origin is at ${tex`\textcolor{black}{\mathrm{p}}`} with basis ${tex`\mathbf{\textcolor{${u_color}}{\hat{e}_0}}, \mathbf{\textcolor{${v_color}}{\hat{e}_1}}, \mathbf{\textcolor{${n_color}}{\hat{e}_2}}`}.

` }34:T811,To build our ${spancolor(camera_color,"view frame")}, we need to create a three-dimensional basis from the two vectors ${texcolor(n_color,"\\mathbf{v}")} and ${texcolor(v_color,"\\mathbf{up}")}. Thus, we need *three vectors* which are linearly independent (which corresponds to being orthogonal in Cartesian space). Another desired (but not required) property is if the vectors are unit vectors (have a length of one); this makes the basis orthonormal. We do this in steps: 1. Normalize (make unit vectors) our previous vectors; to do this, divide by the length: ${tex.block`\begin{aligned} \textcolor{${n_color}}{\mathbf{v'}} &= \frac{\textcolor{${n_color}}{\mathbf{v}}}{\left\|\textcolor{${n_color}}{\mathbf{v}}\right\|}\\ \textcolor{${v_color}}{\mathbf{up'}} &= \frac{\textcolor{${v_color}}{\mathbf{up}}}{\left\|\textcolor{${v_color}}{\mathbf{up}}\right\|} \end{aligned}`} 2. Generate a vector orthogonal to both the ${spancolor(n_color,"view")} and ${spancolor(v_color,"up")} vectors: ${tex.block`\textcolor{${u_color}}{\mathbf{u}} = \textcolor{${n_color}}{\mathbf{v'}}\times\textcolor{${v_color}}{\mathbf{up'}}`} **Note:** The ${spancolor(n_color,"view vector")} points *from* the ${spancolor(camera_color,"focal point")} *to* whatever we are viewing. We assume our space is [right-handed](https://en.wikipedia.org/wiki/Right-hand_rule); if not, reverse the order of the cross product. 3. Finally, we have to make sure the ${spancolor(v_color,"up")} is orthogonal to our other vectors (it need not be originally): ${tex.block`\textcolor{${v_color}}{\mathbf{up''}} = \textcolor{${u_color}}{\mathbf{u}}\times\textcolor{${n_color}}{\mathbf{v'}}`} The final right-handed basis is then ${tex`\left(\textcolor{${u_color}}{\mathbf{u}}, \textcolor{${v_color}}{\mathbf{up''}}, -\textcolor{${n_color}}{\mathbf{v'}}\right)`}.35:T1639,v_up_demo = { // Can't use SVG to rotate (vanishes because flat!) // realy need shadows (LATER) const u_id = DOM.uid("u_arrowhead"); const v_id = DOM.uid("v_arrowhead"); const n_id = DOM.uid("n_arrowhead"); const u_rotation = rotate_u(); const v_rotation = rotate_v(); const n_rotation = rotate_n(); const fig_svg = html` `; let drag_quat = glm.quat.create(); let start_pt = undefined; function drag_start(event) { start_pt = glm.vec3.normalize(glm.vec3.create(), project_smooth_hemi([d3.event.x, d3.event.y])); } function dragging(event) { const current_pt = glm.vec3.normalize(glm.vec3.create(), project_smooth_hemi([d3.event.x, d3.event.y])); drag_quat = glm.quat.rotationTo(drag_quat, start_pt, current_pt); const tmp_quat = glm.quat.create(); let elements = undefined; let base = undefined; let other = undefined; let scale = 1; let input = undefined; let label = undefined; if(d3.select(this).classed("vvec")) { glm.quat.mul(tmp_quat, up_quat, drag_quat); elements = d3.select(fig_svg).selectAll(".vvec"); base = up; other = glm.vec3.transformQuat(glm.vec3.create(), v, v_quat); input = viewof upvec; scale = -1; label = d3.select(fig_svg).selectAll("#vtext"); } else { glm.quat.mul(tmp_quat, v_quat, drag_quat); elements = d3.select(fig_svg).selectAll(".nvec"); base = v; other = glm.vec3.transformQuat(glm.vec3.create(), up, up_quat); input = viewof vvec; label = d3.select(fig_svg).selectAll("#ntext"); } const rotated = glm.vec3.transformQuat(glm.vec3.create(), base, tmp_quat); input.value = `[${rotated[0].toFixed(4)}, ${rotated[1].toFixed(4)}, ${rotated[2].toFixed(4)}]`; const rotated_u = glm.vec3.normalize(glm.vec3.create(), glm.vec3.scale(glm.vec3.create(), glm.vec3.cross(glm.vec3.create(), rotated, other), scale)); viewof uvec.value = `[${rotated_u[0].toFixed(4)}, ${rotated_u[1].toFixed(4)}, ${rotated_u[2].toFixed(4)}]`; glm.vec3.transformQuat(rotated, rotated, isometric); elements.attr("x2", rotated[0]) .attr("y2", rotated[1]); glm.vec3.transformQuat(rotated_u, rotated_u, isometric); d3.select(fig_svg).selectAll(".uvec") .attr("x2", rotated_u[0]) .attr("y2", rotated_u[1]); label.attr("x", rotated[0] * 130) .attr("y", rotated[1]*-130); d3.select(fig_svg).selectAll("#utext") .attr("x", rotated_u[0]*130) .attr("y", rotated_u[1]*-130); } function drag_end(event) { if(d3.select(this).classed("vvec")) { glm.quat.mul(up_quat, up_quat, drag_quat); } else { glm.quat.mul(v_quat, v_quat, drag_quat); } start_pt = undefined; drag_quat = glm.quat.create(); } d3.select(fig_svg).selectAll(".drag").call(d3.drag() .on("start", drag_start) .on("drag", dragging) .on("end", drag_end)); return html`

${fig_svg}

The horizontal basis vector ${texcolor(u_color, "\\mathbf{u}")} is built from the given ${spancolor(camera_color, "camera")} ${spancolor(n_color, "view vector")} ${texcolor(n_color, "\\mathbf{v}")} and the ${spancolor(v_color, "up vector")} ${texcolor(v_color, "\\mathbf{up}")}. Drag those two vectrors to see the frame change.

`; }36:Te40,Placing the ${spancolor(camera_color, "camera")} is not enough to generate an ${spancolor(image_color,"image")}, we also need a ${spancolor(viewport_color,"viewport")}. The ${spancolor(viewport_color,"viewport")} defines the rectangular potion of space that is mapped to the ${spancolor(image_color,"image")}; we then shoot ${spancolor(ray_color,"rays")} or sample pixels based upon the ${spancolor(camera_color,"camera")}. To place the ${spancolor(viewport_color,"viewport")}, we need to know how far it is way from the ${spancolor(camera_color,"camera frame")} we just defined; this distance is called the ${spancolor(camera_color,"focus distance")} ${texcolor(camera_color, "f")}. The center of the ${spancolor(viewport_color,"viewport")} is then just this distance along the ${spancolor(n_color, "view")} direction: ${tex.block`\textcolor{${viewport_color}}{\bullet \mathrm{p_c}} = \textcolor{${camera_color}}{\bullet \mathrm{fp}} + \textcolor{${camera_color}}{f}\textcolor{${n_color}}{ \mathbf{v}}`} We sample pixels starting that the ${spancolor(viewport_color,"viewport origin")} ${texcolor(viewport_color,"\\bullet\\mathrm{p_o}")} and stepping along the in the ${spancolor(u_color, "local horizontal")} and ${spancolor(v_color, "vertical")} directions depending on which pixel ${texcolor(image_color, "\\left(i,j\\right)")} we are sampling; these two directions are the same as the ${spancolor(u_color, "horizontal")} and ${spancolor(v_color, "vertical")} directions we calculated for the ${spancolor(camera_color, "camera frame")} ${texcolor(u_color, "\\mathbf{u}")} and ${texcolor(v_color, "\\mathbf{up''}")}. To find the ${spancolor(viewport_color, "viewport origin")}, we then just need to step back half the ${spancolor(viewport_color, "viewport width")} ${texcolor(viewport_color, "w_v")} and ${spancolor(viewport_color, "height")} ${texcolor(viewport_color, "h_v")} and offset so that we are in the middle of the mapped ${spancolor(image_color,"pixel")}: ${tex.block`\textcolor{${viewport_color}}{\bullet\mathrm{p_o}} = \textcolor{${viewport_color}}{\bullet\mathrm{p_c}} - \frac{1}{2}\textcolor{${viewport_color}}{w_v}\textcolor{${u_color}}{\mathbf{u}} - \frac{1}{2}\textcolor{${viewport_color}}{h_v}\textcolor{${v_color}}{\mathbf{up''}} + \frac{1}{2}\left(\textcolor{${viewport_color}}{\Delta i}\textcolor{${u_color}}{\mathbf{u}}+\textcolor{${viewport_color}}{\Delta j}\textcolor{${v_color}}{\mathbf{up''}}\right)`} We can then find any ${spancolor(viewport_color, "pixel center")} ${texcolor(viewport_color, "\\bullet\\mathrm{p_{ij}}")} for pixel ${texcolor(image_color, "\\left(i,j\\right)")}: ${tex.block`\textcolor{${viewport_color}}{\bullet\mathrm{p_{ij}}} = \textcolor{${viewport_color}}{\bullet\mathrm{p_o}} + \textcolor{${image_color}}{i}\textcolor{${viewport_color}}{\Delta i}\textcolor{${u_color}}{\mathbf{u}} + \textcolor{${image_color}}{j}\textcolor{${viewport_color}}{\Delta j}\textcolor{${v_color}}{\mathbf{up''}}`} where ${texcolor(viewport_color, "\\Delta i")} is the ${spancolor(viewport_color,"width")} and ${texcolor(viewport_color, "\\Delta j ")} is the ${spancolor(viewport_color,"height")} of a pixel in our virtual space: ${tex.block`\begin{aligned}\textcolor{${viewport_color}}{\Delta i} &= \frac{\textcolor{${viewport_color}}{w_v}}{\textcolor{${image_color}}{n_i}}\\ \textcolor{${viewport_color}}{\Delta j} &= \frac{\textcolor{${viewport_color}}{h_v}}{\textcolor{${image_color}}{n_j}}\end{aligned}`} given the ${spancolor(image_color, "image horizontal & vertical resolution")} ${texcolor(image_color, "n_i")}, ${texcolor(image_color, "n_j")}.37:T1ecf,{ // A hack built upon a older hack. Could be made cleaner. const id = DOM.uid("arrowhead"); const id2 = DOM.uid("arrowhead_up"); const id3 = DOM.uid("arrowhead_v"); const w = Math.max(0.5* ewidth - 5, 300); const res = 10; const corners = {lb: [0.625*ewidth, 210], rb: [0.375*ewidth, 280], lt: [0.625*ewidth, 90], rt: [0.375*ewidth, 20]}; let ex = 0.25 * ewidth; const ex0 = ex; // Xform for the image plane const transform = ([i,j]) => [(0.625-0.250*i/res)*ewidth, 70*i/res+210+j/res*(-120-140*i/res)]; const invert = ([x,y]) => { const i = (0.625-x/ewidth)*res/0.250; const j = (y-210-70*i/res)*res/(-120-140*i/res); return [i,j]; }; let ij = [4.5, 5.5]; let grid = ''; for(let i = 1; i < res; ++i) { grid += ` −v up fp ${grid} ij

The view. Drag ${tex`\color{${camera_color}}\mathrm{fp}`} to modify the ${spancolor(camera_color, "camera's origin")}; click on the ${spancolor(viewport_color, "viewport")} to select a new ${spancolor(image_color,"pixel")} ${tex`\color{${image_color}}\mathrm{p}_{ij}`}

`; function dragged() { if(d3.event.x < 0 || d3.event.x >= 0.374 * ewidth || d3.event.y < 0 || d3.event.y >= 300) return; let new_ex = d3.event.x; d3.select(plane).selectAll(".x1").attr("x1", new_ex); d3.select(plane).selectAll(".cx").attr("cx", new_ex); d3.select(plane).selectAll(".x2").attr("x2", new_ex); d3.select(plane).selectAll(".x2v").attr("x2", new_ex-0.05*ewidth); d3.select(plane).selectAll(".xv").attr("x", new_ex-0.09*ewidth); d3.select(plane).selectAll(".xup").attr("x", new_ex+5); d3.select(plane).selectAll(".xe").attr("x", new_ex-5); d3.select(plane).selectAll(".transhalf").attr("transform", "translate(" + sub(transform([0.5, 0.5]),[new_ex,150]).join() + ")"); d3.select(plane).selectAll(".transj").attr("transform", "translate(" + sub(transform([0.5, res-0.5]),[new_ex,150]).join() + ")"); d3.select(plane).selectAll(".transi").attr("transform", "translate(" + sub(transform([res-0.5, 0.5]),[new_ex,150]).join() + ")"); d3.select(plane).selectAll(".transboth").attr("transform", "translate(" + sub(transform([res-0.5, res-0.5]),[new_ex,150]).join() + ")"); d3.select(plane).selectAll(".transij").attr("transform", "translate(" + sub(transform(ij),[new_ex,150]).join() + ")") .attr("x2", new_ex+50*(norm(sub(transform(ij),[new_ex,150]))[0])) .attr("y2", 150+50*(norm(sub(transform(ij),[new_ex,150]))[1])); ex = new_ex; mutable ex = ex; } d3.select(plane).selectAll("#eye").call(d3.drag() .on("drag", dragged)); function clicked(event) { ij = invert([d3.event.layerX, d3.event.layerY]).map(x=>Math.floor(x)+0.5); mutable ij = ij; d3.select(plane).selectAll(".ij").attr("x2", transform(ij)[0]) .attr("y2", transform(ij)[1]); d3.select(plane).selectAll(".cij").attr("cx", transform(ij)[0]) .attr("cy", transform(ij)[1]); d3.select(plane).selectAll(".ijtext").attr("x", transform(ij)[0]+5) .attr("y", transform(ij)[1]+15); d3.select(plane).selectAll(".transij").attr("transform", "translate(" + sub(transform(ij),[ex,150]).join() + ")") .attr("x2", ex+50*(norm(sub(transform(ij),[ex,150]))[0])) .attr("y2", 150+50*(norm(sub(transform(ij),[ex,150]))[1])); } d3.select(plane).selectAll("#image").on("click", clicked); return plane; }38:[] 31:{"id":"cd9559e1999b4d86","slug":"modelling-view-frame-ray-generation","title":"Modelling: View Frame & Ray Generation","thumbnail":"22427e2c949ffc13d3c9afbd6125eed2708cc39325aedc166402e1e5511bec19","access_level":"public","create_time":"$D2025-08-21T15:19:43.249Z","update_time":"$D2026-09-15T03:56:04.809Z","view_time":null,"first_public_time":"$D2025-08-31T01:58:36.980Z","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":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":1792,"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: View Frame & Ray Generation","cells":[{"id":0,"value":"# Modelling: View Frame & Ray Generation\n\nIn an affine space, the frame defines where we describe space from: The origin point with which we measure from and the coordinate basis which provides the orientation within space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"An important frame is the ${spancolor(camera_color,\"view frame\")} (also called the *${spancolor(camera_color,\"camera\")}* or *${spancolor(camera_color,\"eye\")}* frame): It determine where the rendering focal point is, our orientation, and where we are looking. Here, we discuss how to build that frame and to calculate the locations of our how pixel samples within our scene.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"## Building the View Frame\n\nTo orient our view, we need two pieces of information: the direction we are looking (the ${spancolor(n_color,\"view vector\")} ${texcolor(n_color,\"\\\\mathbf{v}\")} ,also called the ${spancolor(n_color,\"gaze\")}) and the vertical orientation (the ${spancolor(v_color,\"up vector\")} ${texcolor(v_color,\"\\\\mathbf{up}\")}). These two vectors are analogous to the ${texcolor(z_color,\"-\\\\hat{\\\\mathbf{z}}\")} and ${texcolor(y_color,\"\\\\hat{\\\\mathbf{y}}\")} Cartesian coordinate vectors. What we are missing is the ${texcolor(x_color,\"\\\\hat{\\\\mathbf{x}}\")} analog.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1173,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1163,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"viewof upvec = Inputs.text({label: html`Up`, value: `[${up[0].toFixed(4)}, ${up[1].toFixed(4)}, ${up[2].toFixed(4)}]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"viewof vvec = Inputs.text({label: html`Gaze`, value: `[${v[0].toFixed(4)}, ${v[1].toFixed(4)}, ${v[2].toFixed(4)}]`, disabled:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"viewof uvec = Inputs.text({label: html`u`, value: `[${u[0].toFixed(4)}, ${u[1].toFixed(4)}, ${u[2].toFixed(4)}]`, disabled: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"## Pixel Samples & Rays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1668,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"viewof fp = Inputs.text({label: html`${spancolor(camera_color,\"Focal Point\")}`, value: `[0,0,${0.25 * ewidth-ex}]`, disabled: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"viewof f = Inputs.number({label: html`${spancolor(camera_color,\"Focus Distance\")}`, value: 90+(0.25 * ewidth-ex), disabled: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"viewof p_ij = Inputs.text({label: html`${spancolor(image_color,\"Pixel\")}`, value: sub(ij,[0.5,0.5]), disabled: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"viewof r_o = Inputs.text({\n label: html`${spancolor(ray_color, \"Ray Origin\")}`,\n value: `[${add(mul(ij, 18), [-90, -90])},-90]`,\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"viewof r_d = Inputs.text({label: html`${spancolor(ray_color,\"Ray Direction\")}`, value: norm3(add(mul(ij,18),[-90,-90]),-91-ex).map(x => x.toFixed(4)), disabled: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"Now, to shoot ${spancolor(ray_color, \"rays\")} from the ${spancolor(camera_color,\"camera\")} ${texcolor(camera_color,\"\\\\bullet \\\\mathrm{fp}\")}, we use the ${spancolor(viewport_color, \"pixel center\")} ${texcolor(viewport_color,\"\\\\bullet \\\\mathrm{p_ij}\")} as the ${spancolor(ray_color, \"ray\")} starting point ${texcolor(ray_color,\"\\\\bullet \\\\mathrm{r_0}\")} and use the normalized direction ${tex`\\left\\|\\overrightarrow{\\textcolor{${camera_color}}{\\bullet\\mathrm{fp}}\\textcolor{${ray_color}}{\\bullet\\mathrm{r_0}}}\\right\\|`} as the ${spancolor(ray_color, \"ray orientation\")} ${texcolor(ray_color,\"\\\\mathbf{d}\")}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1008,"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":667,"value":"mutable eye = 0.25","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":1116,"value":"mul = ([x,y], s) => [x*s, y*s]","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":1132,"value":"len3 = ([x,y,z]) => Math.sqrt(x*x+y*y+z*z)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"norm3 = ([x,y],z) => [x/len3([x,y,z]), y/len3([x,y,z]),z/len3([x,y,z])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3-selection@1.4\", \"d3-drag@1.2\", \"d3-scale-chromatic\",\"d3-array\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"mutable ex = 0.25 * ewidth;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"start_ij = [4.5, 5.5]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"mutable ij = start_ij","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"glm = import(\"gl-matrix\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"isometric = glm.quat.rotateY(glm.quat.create(), glm.quat.rotateX(glm.quat.create(), glm.quat.create(), glm.glMatrix.toRadian(35.264)), glm.glMatrix.toRadian(-45-90));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"v = glm.vec3.fromValues(0,0,-1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"mutable v_quat = glm.quat.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"up = glm.vec3.fromValues(0,1,0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"mutable up_quat = glm.quat.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"u = glm.vec3.normalize(glm.vec3.create(), glm.vec3.cross(glm.vec3.create(), v, up))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"mutable u_quat = glm.quat.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"mutable current_quat = glm.quat.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"rotate_u = () => {\n return glm.vec3.transformQuat(glm.vec3.create(), u, isometric);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1354,"value":"rotate_v = () => {\n const v = glm.vec3.normalize(glm.vec3.create(), up);\n return glm.vec3.transformQuat(glm.vec3.create(), v, isometric);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"rotate_n = () => {\n const n = glm.vec3.normalize(glm.vec3.create(), v);\n return glm.vec3.transformQuat(glm.vec3.create(),n, isometric);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1585,"value":"project_smooth_hemi = (pt) => {\n const projection = glm.vec3.create();\n projection[0] = pt[0] / 100;\n projection[1] = pt[1] / 100;\n if(projection[0] * projection[0] + projection[1] * projection[1] <= 0.5)\n {\n projection[2] = Math.sqrt(1 - projection[0] * projection[0] - projection[1] * projection[1]);\n }\n else \n {\n projection[2] = 0.5 / (projection[0] * projection[0] + projection[1] * projection[1]);\n }\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"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":1012,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"