2b:null 2c:["$","title",null,{"children":"Vectors and vector Algebra | Sumant Pattanaik | Observable"}] 31:T93a,function getPoint(index){ const v = (index===1)?[2,3]:[-3,2]; const svg = d3.select(DOM.svg(width, height)).attr("transform", `translate(${[margin.left, margin.top]})`); const origin = scale([0, 0]), p = scale(v); svg.property("value", p); const g = svg; drawAxes(g, xScale, yScale); const mainVector = g.append("polyline") .datum(p) .attr("points", [origin, p]) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("marker-end", "url(#arrow)"); const xComponent = g.append("polyline") .datum(p) .attr("points", [origin, [p[0],origin[1]]]) .attr("stroke", "magenta") .attr("stroke-width", 2) .attr("stroke-dasharray",4 ); const yComponent = g.append("polyline") .datum(p) .attr("points", [[p[0],origin[1]], p]) .attr("stroke", "magenta") .attr("stroke-width", 2) .attr("stroke-dasharray","4" ); const label = g.append("text") .datum(p) .attr("dx", v[0] >= 0 ? 3 : -3) .attr("transform", `translate(${p})`) .style("font-style", "italic") .style("font-size", 11) .style("text-anchor", v[0] >= 0 ? "start" : "end") .text(`(${oneDecimalMax(v[0])},${oneDecimalMax(v[1])})`); const point = g.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .append("circle") .datum(p) .attr("r", 2.5) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); update(); function dragged(d) { d[0] = d3.event.x; d[1] = d3.event.y; update(); g.dispatch("input"); } function update() { point .attr("cx", d => d[0]) .attr("cy", d => d[1]); label.attr("dx", d=>xScale.invert(d[0]) >= 0 ? 3 : -3) .attr("transform", d=>`translate(${d})`) .style("text-anchor", d=>xScale.invert(d[0]) >= 0 ? "start" : "end") .text(d=>`(${oneDecimalMax(xScale.invert(d[0]))},${oneDecimalMax(yScale.invert(d[1]))})`); mainVector .attr("points", d=>[origin, d]); xComponent .attr("points", d=>[origin, [d[0],origin[1]]]); yComponent .attr("points", d=>[[d[0],origin[1]], d]); } return svg.node(); }32:T40b,drawVectorWithComponents = (g, v, componentFlag, color, thickness) => { const origin = [0, 0]; g.append("polyline") .attr("points", [scale(origin), scale(v)]) .attr("stroke", color?color:"blue") .attr("stroke-width", thickness? thickness: 2) .attr("marker-end", "url(#arrow)"); if (componentFlag){ g.append("polyline") .attr("points", [scale(origin), scale([v[0],0])]) .attr("stroke", "magenta") .attr("stroke-width", 2) .attr("stroke-dasharray",4 ); g.append("polyline") .attr("points", [scale([v[0],0]), scale(v)]) .attr("stroke", "magenta") .attr("stroke-width", 2) .attr("stroke-dasharray","4" ); } g.append("text") .attr("dx", v[0] >= 0 ? 3 : -3) .attr("transform", `translate(${scale(v)})`) .style("font-style", "italic") .style("font-size", 11) .style("text-anchor", v[0] >= 0 ? "start" : "end") .text(`(${oneDecimalMax(v[0])},${oneDecimalMax(v[1])})`); }33:Tb36,drawAngle = (g,v,w) => { const origin = scale ([0, 0]); // Arc Transformation // Arcs are offset by 90 degrees with transform const arcTransform = `translate(${origin[0]}, ${origin[1]}), rotate(90)`; /* Helpers */ // Convert radians to arc units // @see https://github.com/d3/d3-shape#arc_endAngle const angle2Arc = (angle) => - angle; const vAngle = (w)?vec2_ccwAngle (v):0; const wAngle = (w)?vec2_ccwAngle (w):vec2_ccwAngle (v); const startAngle = Math.min(vAngle,wAngle); const endAngle = Math.max(vAngle,wAngle); const angle = endAngle-startAngle;// vec2_ccwAngle (v,w); /* Variables */ const arcStartAngle = angle2Arc(startAngle); const arcEndAngle = angle2Arc(endAngle); const thetaAngle = angle; const betaAngle = 2*pi-angle; // Arcs // Angle Arc Generator const arcGen = d3.arc() .outerRadius(39) .innerRadius(40) .startAngle(arcStartAngle) // Theta angle arc const thetaArc = g.append('path') .attr('class', 'arc arc-theta') .attr('fill', 'transparent') .attr('stroke', (angle > pi)?'red':'green') .attr('transform', arcTransform) .attr('d', arcGen.endAngle(arcEndAngle)); // Beta angle arc const betaArc = g.append('path') .attr('class', 'arc arc-beta') .attr('fill', 'transparent') .attr('stroke', (angle > pi)?'green':'red') .attr('transform', arcTransform) .attr('d', arcGen.endAngle(arcEndAngle + 2 * pi )); /* Annotations */ // Create Annotations Group const annotations = g.append('g') .attr('class', 'annotations') // Angle Labels const labelArcGen = d3.arc() .outerRadius(55) .innerRadius(55) .startAngle(arcStartAngle) // Theta label const thetaLabel = annotations.append("text") .attr('class', 'annotation annotation-theta') .attr('fill', (angle > pi)?'red':'green') .attr('dx','-4') .attr('dy','4') .text(((angle > pi)?'β=':'θ=')+rad2deg(thetaAngle).toFixed(0)); // Beta label const betaLabel = annotations.append("text") .attr('class', 'annotation annotation-beta') .attr('fill', (angle > pi)?'green':'red') .attr('dx','-4') .attr('dy','4') .text(((angle > pi)?'θ=':'β=')+rad2deg(betaAngle).toFixed(0)); // Theta Label const thetaLabelCentroid = labelArcGen.endAngle(arcEndAngle + pi).centroid(); const betaLabelCentroid = labelArcGen.endAngle(arcEndAngle + 3 * pi).centroid(); //const thetaLabelCentroid = labelArcGen.endAngle(angle2Arc(angle) + pi).centroid(); thetaLabel.attr('transform', `translate(${thetaLabelCentroid[0] + origin[0]}, ${thetaLabelCentroid[1] + origin[1]})`) // Beta Label //const betaLabelCentroid = labelArcGen.endAngle(angle2Arc(angle) + 3 * pi).centroid(); betaLabel.attr('transform', `translate(${betaLabelCentroid[0] + origin[0]}, ${betaLabelCentroid[1] + origin[1]})`) }34:T12b4,angleTool = function(width = 100, height = 400){ /* "Canvas" setup */ // Create the canvas const svg = DOM.svg(width, height); const canvas = d3.select(svg); // Style the canvas canvas.style('border', '1px solid rgba(0,0,0,0.05)') .style('font-family', 'monospace'); /* Constants */ // Center of the canvas const origin = {x: width/2, y: height/2} // Length of the ray const rayLength = width > height / 3 ? height / 3 : width / 3; // The x scale for the ray const scaleX = d3.scaleLinear() .domain([-1, 1]) .range([origin.x - rayLength, origin.x + rayLength]); // The y scale for the ray const scaleY = d3.scaleLinear() .domain([1, -1]) .range([origin.y - rayLength, origin.y + rayLength]); // Arc Transformation // Arcs are offset by 90 degrees with transform const arcTransform = `translate(${origin.x}, ${origin.y}), rotate(90)` /* Helpers */ // Convert radians to arc units // @see https://github.com/d3/d3-shape#arc_endAngle const angle2Arc = (angle) => - angle; // Calculate Radius (Ray) Endpoint Coordinates const radiusEndpoint = (angle) => [scaleX(Math.cos(angle)), scaleY(Math.sin(angle))]; // Calculate Radius (Ray) Coordinates const radiusCoords = (angle) => [[origin.x, origin.y ], radiusEndpoint(angle)]; /* Variables */ const initialAngle = θ || pi / 2, arcStartAngle = 0; /* Elements */ // Create the visualization group element const vis = canvas.append('g').attr('class', 'visualization'); // Draw the initial point / vertex const point = vis.append('circle') .style("fill", 'black') .attr("cx", origin.x) .attr("cy", origin.y) .attr("r", 2); // Arcs // Angle Arc Generator const arcGen = d3.arc() .outerRadius(39) .innerRadius(40) .startAngle(arcStartAngle) // Theta angle arc const thetaArc = vis.append('path') .attr('class', 'arc arc-theta') .attr('fill', 'transparent') .attr('stroke', '#7bc4e5') .attr('transform', arcTransform) // Rays const rayGen = d3.line(); // Static Ray const staticRay = vis.append('path') .attr('class', 'ray ray--static') .attr('stroke', 'black') .attr('marker-end', (d) => "url(#arrow)") .attr('d', rayGen(radiusCoords(arcStartAngle))); // Dynamic Ray const dynamicRay = vis.append('path') .attr('class', 'ray ray--dynamic') .attr("stroke", "black") .attr('marker-end', (d) => "url(#arrow)"); /* Annotations */ // Create Annotations Group const annotations = canvas.append('g') .attr('class', 'annotations') // Angle Labels const labelArcGen = d3.arc() .outerRadius(55) .innerRadius(55) .startAngle(arcStartAngle) // Theta label const thetaLabel = annotations.append("text") .attr('class', 'annotation annotation-theta') .attr('fill', '#7bc4e5') .attr('dx','-4') .attr('dy','4'); // Point label annotations.append('text') .attr('class', 'annotation annotation-point') .attr('dx', -5) .attr('dy', 20) .attr('transform', `translate(${origin.x}, ${origin.y})`) .text('O') .attr('fill','black') // Add an arrow-head marker to the ray canvas.append("svg:defs").append("svg:marker") .attr("id", "arrow") .attr("viewBox", "0 -5 10 10") //.attr('refX', 0) //Adjust the arrow head position along the line .attr("markerWidth", 5) .attr("markerHeight", 5) .attr("orient", "auto") .append("svg:path") .attr("d", "M0,-5L10,0L0,5"); /* Methods */ const updatePositions = (angle) => { // Arcs // Theta Arc thetaArc.attr('d', arcGen.endAngle(angle2Arc(angle))); // Ray dynamicRay.attr('d', rayGen(radiusCoords(angle))); // Labels // Theta Label const thetaLabelCentroid = labelArcGen.endAngle(angle2Arc(angle) + pi).centroid(); thetaLabel.attr('transform', `translate(${thetaLabelCentroid[0] + origin.x}, ${thetaLabelCentroid[1] + origin.y})`) .text(rad2deg(angle).toFixed(0)); } // END updatePositions const handleMouse = (x,y) => { // Get the current angle using the arctangent // Calculate the arctangent const a = Math.atan2( y - origin.y, x - origin.x); // Calculate the actual angle const angle = a > 0 ? 2 * pi - a : - a; // Set the external theta angle if (θ){ mutable θ = angle; } // Update the visualization updatePositions(angle); } // Mouse position listener canvas.on("mousemove", function() { const mouse = d3.mouse(this); // Update element positions handleMouse(mouse[0], mouse[1]); }); /* Initialization */ updatePositions(initialAngle); return svg; }35:[] 2f:{"id":"490a20c2484c8bd5","slug":"vectors-and-vector-algebra","title":"Vectors and vector Algebra","thumbnail":"164e40ff5f3e60dcbeac64e2e088922dab66bcc10a68901963293677c6165dc9","access_level":"public","create_time":"$D2020-08-21T16:57:43.244Z","update_time":"$D2022-09-26T17:27:25.648Z","view_time":null,"first_public_time":"$D2020-08-23T19:47:49.880Z","fork":{"id":"bebeb0cb3a67ff8a","slug":"visualizing-vector-addition","title":"Visualizing vector addition","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"stars":7,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024"},"version":2013,"publish_version":2013,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null}],"members":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":16,"collection":{"id":"ed59b19061f89bd5","slug":"class-4720","title":"Computer Graphics Fundamentals","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"type":"notebook","body":{"title":"Vectors and vector Algebra","cells":[{"id":0,"value":"md `# Vectors and vector Algebra`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1447,"value":"md`## Vector and its components.\nNote: Pull the Arrow head to change the value of vector. \nVector ${tex`${texBI(\"v\")}: ${texVec(\n v\n)}`} in left plot, and vector ${tex`${texBI(\"w\")}: ${texVec(\n w\n)}`} in right plot.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2011,"value":"texVec(w)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1443,"value":"html`

${viewof point_1}

${viewof point_2}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1229,"value":"md`## Magnitude and its unit direction of a Vector.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1245,"value":"md`Left: Vector ${tex`${texBI(\"v\")}=${texVec(v)}`}, has magnitude = ${oneDecimalMax(vec2.length(v))}, and a unit direction vector ${tex`${texVec(normalized_v)}`}.\n\nRight: Vector ${tex`${texBI(\"w\")}=${texVec(w)}`}, has magnitude = ${oneDecimalMax(vec2.length(w))}, and a unit direction vector ${tex`${texVec(normalized_w)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1232,"value":"html`

${showVectors([v,normalized_v],['blue', 'red'],[2,1])}

${showVectors([w,normalized_w],['blue', 'red'],[2,1])}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":773,"value":"md`## Vector Addition and Subtraction.\nLeft: ${tex`${texBI(\"v\")}+${texBI(\"w\")}=${texVec(v)} + ${texVec(w)} = ${texVec(v_plus_w)}`}.\n\n\nRight: ${tex`${texBI(\"v\")}-${texBI(\"w\")}=${texVec(v)} - ${texVec(w)} = ${texVec(v_minus_w)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":764,"value":"html`

${showVectors([v, w, v_plus_w], [\"#000\",\"#000\",\"#00f\"],[1,1,2])}

${showVectors([v, w, v_minus_w, minus_w], [\"#000\",\"#000\",\"#0ff\",\"#f00\"],[1,1,2,1])}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1268,"value":"md`## Vector Scaling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1298,"value":"md`Left: ${tex`${texBI(\"v\")}*scaleFactor=${texVec(v)} * ${scaleFactor} = ${texVec(vec2.scale(vec2.create(),v,scaleFactor))}`}. \n\nRight: ${tex`${texBI(\"w\")}*scaleFactor=${texVec(w)} * ${scaleFactor} = ${texVec(vec2.scale(vec2.create(),w,scaleFactor))}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1280,"value":"viewof scaleFactor = slider({\n min: -2,\n max: 2,\n value: 1,\n step: 0.25,\n description: \"Choose scale factor\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1283,"value":"html`

${showVectors(vec2.scale(vec2.create(),v,scaleFactor))}

${showVectors(vec2.scale(vec2.create(),w,scaleFactor))}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":958,"value":"md`# Dot Product and shortest angle.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1546,"value":"md`#### The shortest angle shown (in green) between two vectors:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1190,"value":"md`Left between ${tex`${texBI(\"v\")}`} and ${tex`${texBI(\"w\")}`}: ${showAngleCalculation(v,w)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"md`Right between ${tex`${texBI(\"v\")}`}+${tex`${texBI(\"w\")}`} and ${tex`${texBI(\"v\")}`}-${tex`${texBI(\"w\")}`}: ${showAngleCalculation(v_plus_w,v_minus_w)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":961,"value":"html`

${showAngleBetweenVectors(v,w)}

${showAngleBetweenVectors(v_plus_w,v_minus_w)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"md`#### The shortest angle (in green) a vector makes with the X-axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1218,"value":"md`Left : shortest angle for ${tex`${texBI(\"u\")}`} = ${showAngleCalculation(v,xAxis)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1222,"value":"md`Right : shortest angle for ${tex`${texBI(\"w\")}`} = ${showAngleCalculation(w,xAxis)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":836,"value":"html`

${showAngleBetweenVectors(v)}

${showAngleBetweenVectors(w)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1674,"value":"md`## Rotation Matrix\nRotation by Angle ${rad2deg(θ).toFixed(0)}${tex`\\degree`}: Left: Rotation of vector ${tex`${texVec(v)}`}, Right: Rotation of vector ${tex`${texVec(w)}`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1630,"value":"html`

${angleTool(100,100)}

${showVectors([v,vR],['blue','cyan'],[2,2])}

${showVectors([w,wR],['blue','cyan'],[2,2])}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1583,"value":"md`Rotate(${tex`${texBI(\"v\")}) = ${texMat([\"cosθ\",\"sinθ\",\"-sinθ\",\"cosθ\"])} * ${texBI(\"v\")}= ${texMat(rotationMatrix)}*${texVec(v)} = ${texVec(vR)}`}.\n\nRotate(${tex`${texBI(\"w\")}) = ${texMat([\"cosθ\",\"sinθ\",\"-sinθ\",\"cosθ\"])} * ${texBI(\"w\")}= ${texMat(rotationMatrix)}*${texVec(w)} = ${texVec(wR)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1715,"value":"md`## Scale Matrix\nNonuniform scaling applied to: Left: vector ${tex`${texVec(v)}`}, Right: vector ${tex`${texVec(w)}`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1726,"value":"viewof scaleFactors = columns({\n xS: slider({\n title: \"xFactor\",\n min: 0.1,\n max: 2,\n value: 1,\n step: 0.1\n }),\n yS: slider({\n title: \"yFactor\",\n min: 0.1,\n max: 2,\n value: 1,\n step: 0.1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1727,"value":"html`

${showVectors([v,vS],['blue','cyan'],[1,1])}

${showVectors([w,wS],['blue','cyan'],[1,1])}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1769,"value":"md`Scale(${tex`${texBI(\"v\")}) = ${texMat([\"xFactor\",\"0\",\"0\",\"yFactor\"])} * ${texBI(\"v\")}= ${texMat(scaleMatrix)}*${texVec(v)} = ${texVec(vS)}`}.\n\nScale(${tex`${texBI(\"w\")}) = ${texMat([\"xFactor\",\"0\",\"0\",\"yFactor\"])} * ${texBI(\"w\")}= ${texMat(scaleMatrix)}*${texVec(w)} = ${texVec(wS)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1987,"value":"xS = scaleFactors.xS","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1989,"value":"yS = scaleFactors.yS","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1717,"value":"vS = vec2.transformMat2(vec2.create(),v,scaleMatrix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1718,"value":"wS = vec2.transformMat2(vec2.create(),w,scaleMatrix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1745,"value":"scaleMatrix = mat2.fromValues(xS,0,0,yS)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1654,"value":"vR = vec2.transformMat2(vec2.create(),v,rotationMatrix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1669,"value":"wR = vec2.transformMat2(vec2.create(),w,rotationMatrix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1611,"value":"rotationMatrix= mat2.fromValues(Math.cos(θ),Math.sin(θ),-Math.sin(θ),Math.cos(θ))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1679,"value":"rotationMatrixFromGlMatrix = mat2.fromRotation(mat2.create(),θ)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1069,"value":"md`## Vectors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1506,"value":"md`${tex`${texBI(\"xAxis\")} = ${texVec(xAxis)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1513,"value":"md`${tex`${texBI(\"yAxis\")} = ${texVec(yAxis)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1082,"value":"md`${tex`${texBI(\"v\")} = ${texVec(v)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"md`${tex`${texBI(\"w\")} = ${texVec(w)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"md`${tex`-${texBI(\"w\")} = ${texVec(minus_w)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"md`${tex`${texBI(\"v\")} + ${texBI(\"w\")} = ${texVec(v_plus_w)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"md`${tex`${texBI(\"v\")} - ${texBI(\"w\")} = ${texVec(v_minus_w)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1500,"value":"xAxis = [1,0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1502,"value":"yAxis = [0, 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"v = inverseScale(point_1)//vec2.fromValues(v0, v1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"normalized_v = vec2.normalize(vec2.create(),v)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1465,"value":"viewof point_1 = getPoint(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1467,"value":"viewof point_2 = getPoint(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"w = inverseScale(point_2)//vec2.fromValues(w0, w1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1238,"value":"normalized_w = vec2.normalize(vec2.create(),w)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"minus_w = vec2.scale(vec2.create(),w,-1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"v_plus_w = vec2.add(vec2.create(),v,w)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"v_minus_w = vec2.sub(vec2.create(),v,w)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"/*\nviewof v0 = slider({\n title: tex`${texBI(\"v\")}_0`,\n min: min,\n max: max,\n value: 4,\n step: 0.1\n})\nviewof v1 = slider({\n title: tex`${texBI(\"v\")}_1`,\n min: min,\n max: max,\n value: 2,\n step: 0.1\n})\nviewof w0 = slider({\n title: tex`${texBI(\"w\")}_0`,\n min: min,\n max: max,\n value: -1,\n step: 0.1\n})\nviewof w1 = slider({\n title: tex`${texBI(\"w\")}_1`,\n min: min,\n max: max,\n value: 2,\n step: 0.1\n})\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"xScale = d3.scaleLinear()\n .domain([2*min,2*max])\n .range([0, width]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"yScale = d3.scaleLinear()\n .domain([2*min,2*max])\n .range([height, 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1334,"value":"scale = v => [xScale(v[0]), yScale(v[1])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1336,"value":"inverseScale = p => [xScale.invert(p[0]), yScale.invert(p[1])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":666,"value":"min = -3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"max = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"margin = ({left: 16, right: 16, top: 16, bottom: 16});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"base = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"width = base - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"height = base - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"md`## Definitions\nNote: \n- *texVec* and *drawVectorWithComponents* are adapted from https://observablehq.com/@harrystevens/linear-algebra\n- *texMat* is adapted from https://observablehq.com/@oberbichler/matrix-to-tex\n- *drawAngle* and *angleTool* are adapted from https://observablehq.com/@digitaltopo/angle\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"texVec = v => { \n const vec = Array.from(v);\n return `\\\\begin{bmatrix}\n ${vec.map(d => `${oneDecimalMax(d)}\\\\\\\\`).join(\"\")}\n\\\\end{bmatrix}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"texMat = (m) => {\n const n = m.length;\n const rows = Math.floor(Math.sqrt(n));\n const cols = Math.ceil(Math.sqrt(n));\n const rowSeq = Array.from(new Array(rows).keys());\n const colSeq = Array.from(new Array(cols).keys())\n return `\\\\begin{bmatrix} \n ${rowSeq.map(i=>colSeq.map(j=>m[i+j*rows])).map((row) => {\n return row.map((d) => ((typeof(d)==\"number\")?(Math.round(d * 1000) / 1000):d)).join(' & ')\n }).join(\" \\\\\\\\ \")+((cols == rows+1)?\"\\\\\\\\\"+colSeq.map(j=>(j==cols-1)?1:0).join(' & '):\"\")}\n \\\\end{bmatrix}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":838,"value":"showAngleBetweenVectors = function (v,w){\n const svg = d3.select(DOM.svg(base, base));\n const plot = svg.append(\"g\")\n .attr(\"transform\", `translate(${[margin.left, margin.top]})`) \n drawAxes(plot, xScale, yScale);\n if (w){\n drawVectorWithComponents(plot.append(\"g\"),v, false);\n drawVectorWithComponents(plot.append(\"g\"),w, false);\n drawAngle(plot.append(\"g\"),v,w)\n }\n else{\n drawVectorWithComponents(plot.append(\"g\"),v, true);\n drawAngle(plot.append(\"g\"),xAxis,v)\n }\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"showVectors = function (vectors, colors, thickness){\n //return vectors.map((d,i)=>({v:d,c:colors[i],t:thickness[i]}))\n const svg = d3.select(DOM.svg(base, base));\n const plot = svg.append(\"g\")\n .attr(\"transform\", `translate(${[margin.left, margin.top]})`) \n drawAxes(plot, xScale, yScale);\n if (Array.isArray(vectors[0]))\n vectors.forEach((v,i)=>drawVectorWithComponents(plot.append('g'),v,false,colors[i],thickness[i]));\n else \n drawVectorWithComponents(plot.append('g'),vectors,true);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1398,"value":"md`Choose ${tex`${texBI(\"v\")}: ${texVec(v)}`} vector.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1331,"value":"vec_2 = inverseScale(point_2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1417,"value":"//html`

\n//

${viewof v0}

\n//

${viewof w0}

\n//

`\n//html`

\n//

${viewof v1}

\n//

${viewof w1}

\n//

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":841,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1565,"value":"mutable θ = 90","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1561,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":909,"value":"vec2_ccwAngle = (v, w) => {\n const vNormalized = (w)?vec2.normalize(vec2.create(),v):xAxis;\n const wNormalized = (w)?vec2.normalize(vec2.create(),w):vec2.normalize(vec2.create(),v);\n const y = mat2.determinant(mat2.fromValues(vNormalized[0],wNormalized[0],vNormalized[1],wNormalized[1]));\n const x = vec2.dot(vNormalized,wNormalized);\n let angle = Math.atan2(y,x);\n if (angle < 0) angle += (2*pi);\n return angle;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"vec2 = glMatrix.vec2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"vec3 = glMatrix.vec3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"mat2 = glMatrix.mat2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":496,"value":"mat3 = glMatrix.mat3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"pi = Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1204,"value":"showAngleCalculation = (v, w) => {\n const rad = Math.acos(vec2.dot(v,w)/(vec2.length(v)*vec2.length(w)));\n const deg = rad2deg(rad);\n return tex`\\theta = \\cos^{-1}\\left( ${texVec(v)} \\cdotp ${texVec(w)}\\over \\left(\\|${texVec(v)}\\|*\\|${texVec(w)}\\|\\right)\\right) = ${oneDecimalMax(rad)} rad=${deg.toFixed(0)}\\degree.`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":891,"value":"rad2deg = rad=>rad*180/pi","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":893,"value":"deg2rad = deg=>deg*pi/180","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1102,"value":"function oneDecimalMax(num) {\n return Math.round(num*10)/10\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":885,"value":"arrowhead","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"import {texBI,arrowhead,drawAxes} from \"@harrystevens/linear-algebra\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1983,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"import { slider } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"glMatrix = require(\"https://bundle.run/gl-matrix@3.3.0\") //require(\"https://bundle.run/gl-matrix\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":368,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"