2e:null 2f:["$","title",null,{"children":"Mathematical Foundations: Coordinates and Change of Frame | Introduction to Computer Graphics MSState | Observable"}] 34:T790,frame_demo = { const green_id = DOM.uid("green_arrowhead"); const fig_svg = svg``; return html`

${fig_svg}

A coordinate frame.

` }35:T557,Any vector ${tex`\mathbf{v}`} in the space is a linear combination of the basis vectors ${tex`\mathbf{v}=\sum_{i=0}^n \alpha_i \mathbf{e}_i,`} where ${tex`n`} is the dimension of the space and the ${tex`\mathbf{e}_i`} are the basis vectors. We then say the coordinate vector (or just coordinates) of the vector is then ${tex`\left[\alpha_1,\dots,\alpha_n\right]`}. Similarly, the coordinates of a point ${tex`\bullet \mathrm{p}`} in the space are the coordinates of its displacement vector from the origin ${tex`\overrightarrow{\bullet \mathrm{o} \bullet \mathrm{p}}`}.

Which Came First: The Coordinates or the Point?

If we are not in a metric space, the mapping of the frame onto points is arbitrary—one can set the coordinate of the first non-origin point and then try to reverse engineer the basis vectors or create the basis and measure the relative displacements. This mapping is not unique because if we scale everything uniformly, the coordinates will remain fixed. In a metric space, we can measure the absolute distance of everything via the inner product to establish our coordinates and basis; these coordinates are no longer scale invariant.

36:Tb27,coordinates_demo = { const green_id = DOM.uid("green_arrowhead"); const fig_svg = svg``; return html`

${fig_svg}

Computing the coordinates of ${tex`\textcolor{black}{\bullet \mathrm{p}}`} with respect to the coordinate frame. Moving the origin or changing the basis will change the coordinates; moving the point generates new coordinates. Drag the elements to update.

` }37:T774,## Changing Frames As said, no frame has special privilege; it is often beneficial to change from one frame to another. For example, a set of points for a model may be given in one coordinate system (provided by the model creator); when rendering, we will need to know where the model is with respect to the camera's frame. We will need to convert from one coordinate system into another. We will use the 2D systems from our examples to demonstrate. ### Convert from New Frame to Known Frame To begin this conversion, we first need to know how the second frame is expressed with respect to the first frame: We need to know where the second origin ${tex`\textcolor{${purple}}{\bullet \mathrm{o}_2}`} is with respect to the first ${tex`\textcolor{${green}}{\bullet \mathrm{o}_1}`} and how the second basis ${tex`\textcolor{${purple}}{\mathbf{u,v}}`} is expressed by the first basis ${tex`\textcolor{${green}}{\mathbf{i,j}}`}: ${tex.block`\begin{aligned} \textcolor{${purple}}{\bullet \mathrm{o}_2} &= \textcolor{${green}}{\bullet \mathrm{o}_1} + i_{o_2}\textcolor{${green}}{\mathbf{i}} + j_{o_2}\textcolor{${green}}{\mathbf{j}} \text{\ \ or}& \textcolor{${green}}{\left[i_{o_2}, j_{o_2}\right]}\\ &= \textcolor{${green}}{\bullet \mathrm{o}_2}\\ \textcolor{${purple}}{\mathbf{u}} &= i_{u}\textcolor{${green}}{\mathbf{i}} + j_{u}\textcolor{${green}}{\mathbf{j}}& \textcolor{${green}}{\left[i_{u}, j_{u}\right]}\\ &= \textcolor{${green}}{\mathbf{u}} \\ \textcolor{${purple}}{\mathbf{v}} &= i_{v}\textcolor{${green}}{\mathbf{i}} + j_{v}\textcolor{${green}}{\mathbf{j}} & \textcolor{${green}}{\left[i_{v}, j_{v}\right]}\\ &= \textcolor{${green}}{\mathbf{v}} \end{aligned}`}38:Tfbb,frames_demo = { const green_id = DOM.uid("green_arrowhead"); const purple_id = DOM.uid("purple_arrowhead"); const fig_svg = svg``; return html`

${fig_svg}

Coordinate conversion. Drag the elements to update.

` }39:T46f,

The second frame expressed in the first frame's coordinates.
Item	Second Frame	First Frame
${tex`\textcolor{${purple}}{\bullet \mathrm{o_2}}`}	[0,0]	[${purple_origin_green.values().toArray().map(x=>x.toFixed(2)).join(",")}]
${tex`\textcolor{${purple}}{\mathbf{u}}`}	[1,0]	[${purple_u_green.values().toArray().map(x=>x.toFixed(2)).join(",")}]
${tex`\textcolor{${purple}}{\mathbf{v}}`}	[0,1]	[${purple_v_green.values().toArray().map(x=>x.toFixed(2)).join(",")}]

3a:T6c4,where ${tex`\textcolor{${green}}{\mathrm{C_{\textcolor{${purple}}{uv}\rightarrow ij}}}`} is the change of basis matrix that changes a vector expressed in the second basis into the first. To change a point ${tex`\textcolor{${purple}}{\bullet \mathrm{p}}`} in the second basis to the the first, we just have to offset by the second origin's displacement ${tex`\textcolor{${green}}{\bullet \mathrm{o_2}}`}: ${tex.block`\begin{aligned} \textcolor{${purple}}{\bullet\mathrm{p}} &= \textcolor{${purple}}{\bullet\mathrm{o_2}} + u\textcolor{${purple}}{\mathbf{u}} + v\textcolor{${purple}}{\mathbf{j}}\\ &= \textcolor{${green}}{\bullet\mathrm{o_1}} + \left(i_{o_2}+ui_u + vi_{v}\right)\textcolor{${green}}{\mathbf{i}} + \left(j_{o_2}+uj_u +vj_{v}\right)\textcolor{${green}}{\mathbf{j}}\\ &= \textcolor{${green}}{\bullet\mathrm{o_1}} + i_p\textcolor{${green}}{\mathbf{i}} + j_p\textcolor{${green}}{\mathbf{j}}\\ &= \textcolor{${green}}{\bullet\mathrm{p}} \end{aligned}`} which has a similar linear system ${tex.block`\begin{aligned}\textcolor{${green}}{\begin{bmatrix} i_u & i_v \\ j_u & j_v\end{bmatrix}} \textcolor{${purple}}{\begin{bmatrix}u\\v\end{bmatrix}} + \textcolor{${green}}{\begin{bmatrix}i_{o_2}\\j_{o_2}\end{bmatrix}} &= \textcolor{${green}}{\begin{bmatrix}i_p\\j_p\end{bmatrix}}\\ \textcolor{${green}}{\mathrm{C_{\textcolor{${purple}}{uv}\rightarrow ij}}}\textcolor{${purple}}{\mathrm{\bullet p}} + \textcolor{${green}}{\mathrm{\bullet o_2}} & = \textcolor{${green}}{\mathrm{\bullet p}} \end{aligned}`}3b:Tfe3,point_to_green_demo = { const green_id = DOM.uid("green_arrowhead"); const purple_id = DOM.uid("purple_arrowhead"); const fig_svg = svg``; return html`

${fig_svg}

Coordinate conversion. Drag the elements to update.

` }3c:T4d4,${tex.block`\begin{aligned} \textcolor{${green}}{\mathrm{C_{\textcolor{${purple}}{uv}\rightarrow ij}}}\textcolor{${purple}}{\mathbf{n}} & = \textcolor{${green}}{\mathbf{n}}\\ \textcolor{${purple}}{\mathbf{n}} & = \textcolor{${green}}{\mathrm{C^{-1}_{\textcolor{${purple}}{uv}\rightarrow ij}}}\textcolor{${green}}{\mathbf{n}}\\ \textcolor{${purple}}{\mathbf{n}} & = \textcolor{${purple}}{\mathrm{C_{\textcolor{${green}}{ij}\rightarrow uv}}}\textcolor{${green}}{\mathbf{n}}\end{aligned}`}

Ewww: Matrix Inverse

Matrix inversion is a bit complicated to calculate, though most vector math libraries provide such a function. The primary issue is making sure the matrix is invertible in the first place. However, the only case where this matrix is not invertible is when one of the basis vectors is not linearly independent of the others.

In metric spaces, we can make this inversion easier if we assume our basis is orthonormal; in this case, the inverse of ${tex`\mathrm{C}`} is just the transpose ${tex`\mathrm{C^T}`}.

3d:Tfde,change_frames_demo = { const green_id = DOM.uid("green_arrowhead"); const purple_id = DOM.uid("purple_arrowhead"); const fig_svg = svg``; return html`

${fig_svg}

Coordinate conversion. Drag the elements to update.

` }3e:T87e,

Frame conversion.
Item	First Frame	Second Frame
${tex`\textcolor{${green}}{\bullet \mathrm{o_1}}`}	[0.00,0.00]	[${green_origin_purple.values().toArray().map(x=>x.toFixed(2)).join(",")}]
${tex`\textcolor{${green}}{\mathbf{i}}`}	[1.00,0.00]	[${green_u_purple.values().toArray().map(x=>x.toFixed(2)).join(",")}]
${tex`\textcolor{${green}}{\mathbf{j}}`}	[0.00,1.00]	[${green_v_purple.values().toArray().map(x=>x.toFixed(2)).join(",")}]
${tex`\textcolor{${purple}}{\bullet \mathrm{o_2}}`}	[${purple_origin_green.values().toArray().map(x=>x.toFixed(2)).join(",")}]	[0.00,0.00]
${tex`\textcolor{${purple}}{\mathbf{u}}`}	[${purple_u_green.values().toArray().map(x=>x.toFixed(2)).join(",")}]	[1.00,0.00]
${tex`\textcolor{${purple}}{\mathbf{v}}`}	[${purple_v_green.values().toArray().map(x=>x.toFixed(2)).join(",")}]	[0.00,0.00]
${tex`\textcolor{black}{\bullet \mathrm{p}}`}	[${point_green.values().toArray().map(x=>x.toFixed(2)).join(",")}]	[${point_purple.values().toArray().map(x=>x.toFixed(2)).join(",")}]

3f:Tf75,{ // Setup let svg_element = d3.select(coordinates_demo); svg_element.selectAll(".axis.green_u") .call(d3.drag().subject((e) => Object({target:"green_u", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".axis.green_v") .call(d3.drag().subject((e) => Object({target:"green_v", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".origin.green") .call(d3.drag().subject((e) => Object({target:"green_origin", x:e.x, y:e.y})) .on("drag", drag_origin)); svg_element.selectAll(".origin.green") .call(d3.drag().subject((e) => Object({target:"green_origin", x:e.x, y:e.y})) .on("drag", drag_origin)); svg_element.selectAll(".drag.point") .call(d3.drag() .on("drag", drag_point)); svg_element = d3.select(frames_demo); svg_element.selectAll(".axis.green_u") .call(d3.drag().subject((e) => Object({target:"green_u", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".axis.green_v") .call(d3.drag().subject((e) => Object({target:"green_v", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".origin.green") .call(d3.drag().subject((e) => Object({target:"green_origin", x:e.x, y:e.y})) .on("drag", drag_origin)); svg_element.selectAll(".axis.purple_u") .call(d3.drag().subject((e) => Object({target:"purple_u", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".axis.purple_v") .call(d3.drag().subject((e) => Object({target:"purple_v", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".origin.purple") .call(d3.drag().subject((e) => Object({target:"purple_origin", x:e.x, y:e.y})) .on("drag", drag_origin)); svg_element = d3.select(point_to_green_demo); svg_element.selectAll(".axis.green_u") .call(d3.drag().subject((e) => Object({target:"green_u", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".axis.green_v") .call(d3.drag().subject((e) => Object({target:"green_v", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".origin.green") .call(d3.drag().subject((e) => Object({target:"green_origin", x:e.x, y:e.y})) .on("drag", drag_origin)); svg_element.selectAll(".axis.purple_u") .call(d3.drag().subject((e) => Object({target:"purple_u", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".axis.purple_v") .call(d3.drag().subject((e) => Object({target:"purple_v", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".origin.purple") .call(d3.drag().subject((e) => Object({target:"purple_origin", x:e.x, y:e.y})) .on("drag", drag_origin)); svg_element.selectAll(".drag.point") .call(d3.drag() .on("drag", drag_point)); svg_element = d3.select(change_frames_demo); svg_element.selectAll(".axis.green_u") .call(d3.drag().subject((e) => Object({target:"green_u", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".axis.green_v") .call(d3.drag().subject((e) => Object({target:"green_v", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".origin.green") .call(d3.drag().subject((e) => Object({target:"green_origin", x:e.x, y:e.y})) .on("drag", drag_origin)); svg_element.selectAll(".axis.purple_u") .call(d3.drag().subject((e) => Object({target:"purple_u", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".axis.purple_v") .call(d3.drag().subject((e) => Object({target:"purple_v", x:e.x, y:e.y})) .on("drag", drag_line)); svg_element.selectAll(".origin.purple") .call(d3.drag().subject((e) => Object({target:"purple_origin", x:e.x, y:e.y})) .on("drag", drag_origin)); svg_element.selectAll(".drag.point") .call(d3.drag() .on("drag", drag_point)); return md`Setup complete.`; }40:T53c,drag_line = (e) => { const start = vec2.create(); switch(e.subject.target) { case "green_u": case "green_v": vec2.copy(start, green_origin); break; case "purple_u": case "purple_v": vec2.copy(start, purple_origin); break; } const end = vec2.fromValues(e.x, e.y); const dir = vec2.sub(vec2.create(), end, start); vec2.normalize(dir, dir); console.log(dir); vec2.scale(dir,dir,scale); vec2.add(dir,dir,start); d3.select(frame_demo).selectAll(`.${e.subject.target}`) .attr("x2", dir[0]) .attr("y2", dir[1]); d3.select(coordinates_demo).selectAll(`.${e.subject.target}`) .attr("x2", dir[0]) .attr("y2", dir[1]); d3.select(frames_demo).selectAll(`.${e.subject.target}`) .attr("x2", dir[0]) .attr("y2", dir[1]); d3.select(point_to_green_demo).selectAll(`.${e.subject.target}`) .attr("x2", dir[0]) .attr("y2", dir[1]); d3.select(change_frames_demo).selectAll(`.${e.subject.target}`) .attr("x2", dir[0]) .attr("y2", dir[1]); vec2.sub(dir,dir,start); vec2.scale(dir,dir,1/scale); vec2.normalize(dir,dir); switch(e.subject.target) { case "green_u": mutable green_u = dir; break; case "green_v": mutable green_v = dir; break; case "purple_u": mutable purple_u = dir; break; case "purple_v": mutable purple_v = dir; break; } }41:Tf38,drag_origin = (e) => { if(e.x < scale/15 || e.y < scale/15 || e.x > (width - scale/15) || e.y > (width/3 - scale/15)) return; const axis_u = vec2.create(); const axis_v = vec2.create() let color = ""; switch(e.subject.target) { case "green_origin": color = "green"; vec2.copy(axis_u, mutable green_u); vec2.copy(axis_v, mutable green_v); break; case "purple_origin": color = "purple"; vec2.copy(axis_u, mutable purple_u); vec2.copy(axis_v, mutable purple_v); break; } const start = vec2.fromValues(e.x, e.y); d3.select(coordinates_demo).selectAll(`.${e.subject.target}`) .attr("cx", start[0]) .attr("cy", start[1]); d3.select(frame_demo).selectAll(`.${e.subject.target}`) .attr("cx", start[0]) .attr("cy", start[1]); d3.select(frames_demo).selectAll(`.${e.subject.target}`) .attr("cx", start[0]) .attr("cy", start[1]); d3.select(point_to_green_demo).selectAll(`.${e.subject.target}`) .attr("cx", start[0]) .attr("cy", start[1]); d3.select(change_frames_demo).selectAll(`.${e.subject.target}`) .attr("cx", start[0]) .attr("cy", start[1]); d3.select(coordinates_demo).selectAll(`.point_offset.${color}`) .attr("x1", start[0]) .attr("y1", start[1]); d3.select(frame_demo).selectAll(`line.${color}`) .attr("x1", start[0]) .attr("y1", start[1]); d3.select(frame_demo).selectAll(`.offset`) .attr("x1", start[0]) .attr("y1", start[1]); d3.select(frame_demo).selectAll(`line.${color}_u`) .attr("x2", start[0] + scale * axis_u[0]) .attr("y2", start[1] + scale * axis_u[1]); d3.select(frame_demo).selectAll(`line.${color}_v`) .attr("x2", start[0] + scale * axis_v[0]) .attr("y2", start[1] + scale * axis_v[1]); d3.select(coordinates_demo).selectAll(`line.${color}`) .attr("x1", start[0]) .attr("y1", start[1]); d3.select(coordinates_demo).selectAll(`.offset`) .attr("x1", start[0]) .attr("y1", start[1]); d3.select(coordinates_demo).selectAll(`line.${color}_u`) .attr("x2", start[0] + scale * axis_u[0]) .attr("y2", start[1] + scale * axis_u[1]); d3.select(coordinates_demo).selectAll(`line.${color}_v`) .attr("x2", start[0] + scale * axis_v[0]) .attr("y2", start[1] + scale * axis_v[1]); d3.select(frames_demo).selectAll(`line.${color}`) .attr("x1", start[0]) .attr("y1", start[1]); d3.select(frames_demo).selectAll(`.offset`) .attr(color == "purple"? "x2" : "x1", start[0]) .attr(color == "purple"? "y2" : "y1", start[1]); d3.select(frames_demo).selectAll(`line.${color}_u`) .attr("x2", start[0] + scale * axis_u[0]) .attr("y2", start[1] + scale * axis_u[1]); d3.select(frames_demo).selectAll(`line.${color}_v`) .attr("x2", start[0] + scale * axis_v[0]) .attr("y2", start[1] + scale * axis_v[1] ); d3.select(point_to_green_demo).selectAll(`line.${color}`) .attr("x1", start[0]) .attr("y1", start[1]); d3.select(point_to_green_demo).selectAll(`line.${color}_u`) .attr("x2", start[0] + scale * axis_u[0]) .attr("y2", start[1] + scale * axis_u[1] ); d3.select(point_to_green_demo).selectAll(`line.${color}_v`) .attr("x2", start[0] + scale * axis_v[0]) .attr("y2", start[1] + scale * axis_v[1]); d3.select(change_frames_demo).selectAll(`line.${color}`) .attr("x1", start[0]) .attr("y1", start[1]); d3.select(change_frames_demo).selectAll(`line.${color}_u`) .attr("x2", start[0] + scale * axis_u[0]) .attr("y2", start[1] + scale * axis_u[1]); d3.select(change_frames_demo).selectAll(`line.${color}_v`) .attr("x2", start[0] + scale * axis_v[0]) .attr("y2", start[1] + scale * axis_v[1]); switch(e.subject.target) { case "green_origin": mutable green_origin = start; break; case "purple_origin": mutable purple_origin = start; break; } }42:[] 32:{"id":"5af819dc79c890a1","slug":"mathematical-foundations-coordinates-and-change-of","title":"Mathematical Foundations: Coordinates and Change of Frame","thumbnail":"dc398076dada0731fb252e1bae05b6b0e71e2903a0cfc70dd8c77fb7cd77b6ae","access_level":"public","create_time":"$D2025-08-29T21:22:59.173Z","update_time":"$D2025-08-31T02:11:45.704Z","view_time":null,"first_public_time":"$D2025-08-31T01:58:20.456Z","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":880,"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":true,"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":"Mathematical Foundations: Coordinates and Change of Frame","cells":[{"id":0,"value":"# Mathematical Foundations: Coordinates and Change of Frame\n\nIn an affine space, we can describe every point with respect to a coordinate frame. There is no unique or preferred frame, and it is often required to switch between frames. In this note, we discuss what these frame are and how to switch between them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Affine Frames & Coordinates\n\nAn affine frame consists of a basis ${tex`\\mathbf{e}_i`} and a designated point ${tex`\\bullet\\mathrm{o}`} which becomes the coordinate origin. As we do not move from the origin to be at the origin, its coordinates are always ${tex`[0,0]`}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"\n \n \n \n \n

The point in the first frame's coordinate sytstem.
${tex`\\textcolor{black}{\\bullet \\mathrm{p}}`}	[${point_green.values().toArray().map(x=>x.toFixed(2)).join(\",\")}]

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"$39","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"We note that in the second coordinate system that ${tex`\\textcolor{${purple}}{\\mathbf{u, v}}`} have coordinates [1,0] and [0,1] respectively; thus any vector ${tex`\\textcolor{${purple}}{\\mathbf{n}}=\\textcolor{${purple}}{\\left[u,v\\right]}`} in the second coordinate system can be expressed as\n\n${tex.block`\\begin{aligned}\n \\textcolor{${purple}}{\\mathbf{n}} &= u\\textcolor{${purple}}{\\mathbf{u}} + v\\textcolor{${purple}}{\\mathbf{j}}\\\\\n &= \\left(ui_u + vi_{v}\\right)\\textcolor{${green}}{\\mathbf{i}} + \\left(uj_u +vj_{v}\\right)\\textcolor{${green}}{\\mathbf{j}}\\\\\n &= i_n\\textcolor{${green}}{\\mathbf{i}} + j_n\\textcolor{${green}}{\\mathbf{j}}\\\\\n &= \\textcolor{${green}}{\\mathbf{n}}\n \\end{aligned}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"or as a linear system","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"$${tex.block`\\begin{aligned}\\textcolor{${green}}{\\begin{bmatrix}\n i_u & i_v \\\\ j_u & j_v\\end{bmatrix}}\n \\textcolor{${purple}}{\\begin{bmatrix}u\\\\v\\end{bmatrix}}\n &= \\textcolor{${green}}{\\begin{bmatrix}i_n\\\\j_n\\end{bmatrix}}\\\\\n \\textcolor{${green}}{\\mathrm{C_{\\textcolor{${purple}}{uv}\\rightarrow ij}}}\\textcolor{${purple}}{\\mathbf{n}} & = \\textcolor{${green}}{\\mathbf{n}}\n \\end{aligned}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"\n \n \n \n \n \n \n \n \n \n \n

The point in second frame coordinates converted to the first frame's coordinates.
Item	Second Frame	First Frame
${tex`\\textcolor{${purple}}{\\bullet \\mathrm{p}}`}	[${point_purple.values().toArray().map(x=>x.toFixed(2)).join(\",\")}]	[${point_green.values().toArray().map(x=>x.toFixed(2)).join(\",\")}]

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"### Convert from Known Frame to New Frame\n\nWhile this conversion is useful, we often want to perform the opposite change of frame. For example, if we place a camera frame within a scene, we want to convert to the camera coordinates for rendering. Given our linear system, solving for coordinates in the new frame from the known frame just involves a matrix inversion:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":369,"value":"We do the same for points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"$${tex.block`\\begin{aligned}\n \\textcolor{${green}}{\\mathrm{C_{\\textcolor{${purple}}{uv}\\rightarrow ij}}}\\textcolor{${purple}}{\\mathrm{\\bullet p}} + \\textcolor{${green}}{\\mathrm{\\bullet o_2}} & = \\textcolor{${green}}{\\mathrm{\\bullet p}}\\\\\n \\textcolor{${green}}{\\mathrm{C_{\\textcolor{${purple}}{uv}\\rightarrow ij}}}\\textcolor{${purple}}{\\mathrm{\\bullet p}} & = \\textcolor{${green}}{\\mathrm{\\bullet p}} - \\textcolor{${green}}{\\mathrm{\\bullet o_2}}\\\\\n \\textcolor{${purple}}{\\mathrm{\\bullet p}} & = \\textcolor{${green}}{\\mathrm{C^{-1}_{\\textcolor{${purple}}{uv}\\rightarrow ij}}}\\left(\\textcolor{${green}}{\\mathrm{\\bullet p}} - \\textcolor{${green}}{\\mathrm{\\bullet o_2}}\\right)\\\\\n & = \\textcolor{${purple}}{\\mathrm{C_{\\textcolor{${green}}{ij}\\rightarrow uv}}}\\left(\\textcolor{${green}}{\\mathrm{\\bullet p}} - \\textcolor{${green}}{\\mathrm{\\bullet o_2}}\\right)\\\\\n\\end{aligned}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"$3e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"## Implementation\n\nAs a note, I am changing frames all the time in this implementation! The two frames are expressed in terms of the SVG global frame and I have to switch between it and those two (and each other) at different times for the demos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"drag_point = (e) =>{\n if(e.x < scale/15 || e.y < scale/15 || e.x > (width - scale/15) || e.y > (width/3 - scale/15))\n return;\n \n const start = vec2.fromValues(e.x, e.y);\n d3.select(coordinates_demo).selectAll(\".point\")\n .attr(\"cx\", start[0])\n .attr(\"cy\", start[1]);\n d3.select(point_to_green_demo).selectAll(\".point\")\n .attr(\"cx\", start[0])\n .attr(\"cy\", start[1]);\n d3.select(change_frames_demo).selectAll(\".point\")\n .attr(\"cx\", start[0])\n .attr(\"cy\", start[1]);\n \n d3.select(coordinates_demo).selectAll(\".point_offset\")\n .attr(\"x2\", start[0])\n .attr(\"y2\", start[1]);\n\n mutable point = start;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"scale = width / 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"mutable point = vec2.fromValues(width/2, width/6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"green = \"#1b9e77\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mutable green_origin = vec2.fromValues(width/5,width/12)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"mutable green_u = vec2.normalize(vec2.create(), vec2.fromValues(1,0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"mutable green_v = vec2.fromValues(0,1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"to_green = (v) => {\n const diff = vec2.sub(vec2.create(), v, green_origin);\n return to_green_vec(diff);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"to_green_vec = v => \n vec2.transformMat2d(vec2.create(), \n v,\n mat2d.invert(mat2d.create(), mat2d.fromValues(green_u[0], green_u[1], green_v[0], green_v[1], 0, 0)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"point_green = to_green(point)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"purple_origin_green = to_green(purple_origin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"purple_u_green = to_green_vec(purple_u)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"purple_v_green = to_green_vec(purple_v)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"purple = \"#7670b3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"mutable purple_origin = vec2.fromValues(width*4/5,width*1/4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"mutable purple_u = vec2.fromValues(-1,0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"mutable purple_v = vec2.fromValues(0,-1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"to_purple = (v) => {\n const diff = vec2.sub(vec2.create(), v, purple_origin);\n return to_purple_vec(diff);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"to_purple_vec = v => vec2.transformMat2d(vec2.create(), \n v,\n mat2d.invert(mat2d.create(), mat2d.fromValues(purple_u[0], purple_u[1], purple_v[0], purple_v[1], 0, 0)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"point_purple = to_purple(point)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"green_origin_purple = to_purple(green_origin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"green_u_purple = to_purple_vec(green_u)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"green_v_purple = to_purple_vec(green_v)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"glm = import(\"gl-matrix\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"mat2d = glm.mat2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"vec2 = glm.vec2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"vec3 = glm.vec3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"d3 = require(\"d3-selection\", \"d3-drag\", \"d3-scale-chromatic\",\"d3-array\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 33:"$32:body"