30:T698,{ const { w, h } = { w: 600, h: 600 }; const ticks = scaleFactor; const plane = cartesianPlane(w, h, { axes: { x: { domain: [-ticks, ticks] }, y: { domain: [-ticks, ticks] } } }); const a = convertToVector(inputA); const b = convertToVector(inputB); const aUnit = a.normalize(); const bUnit = b.normalize(); const startingPoint = [0, 0]; circle(plane, { point: startingPoint, radius: 1 }); drawVector(plane, { vector: a.toArray(), point: startingPoint, name: "a" }); drawVector(plane, { vector: b.toArray(), point: startingPoint, name: "b" }); drawVector(plane, { vector: aUnit.toArray(), point: startingPoint, name: "na" }); drawVector(plane, { vector: bUnit.toArray(), point: startingPoint, name: "nb" }); const angleBetween = aUnit.dotProduct(bUnit); const aArray = a.toArray(); const aAngle = Math.atan2(aArray[1], aArray[0]); const ka = convertToVector([toDegrees(aAngle), b.length() * angleBetween]); const kaUnit = convertToVector([ toDegrees(aAngle), bUnit.length() * angleBetween ]); const c = b.substract(ka); const cUnit = bUnit.substract(kaUnit); drawVector(plane, { vector: c.toArray(), point: ka.toArray(), name: "c", type: "d" }); drawVector(plane, { vector: ka.toArray(), point: startingPoint, name: "ka", type: "d" }); drawVector(plane, { vector: cUnit.toArray(), point: kaUnit.toArray(), name: "cn", type: "d" }); drawVector(plane, { vector: kaUnit.toArray(), point: startingPoint, name: "nka", type: "d" }); return plane.svg.node(); }31:T416,class Vector { constructor(...elements) { this.elements = elements; } add({ elements }) { return new Vector(...elements.map((e, i) => this.elements[i] + e)); } substract({ elements }) { return new Vector(...elements.map((e, i) => this.elements[i] - e)); } invert() { return new Vector(...this.elements.map((e) => -1 * e)); } scaleBy(k) { return new Vector(...this.elements.map((e) => e * k)); } normalize() { return this.scaleBy(1 / this.length()); } dotProduct({ elements }) { return elements.reduce( (acc, e, index) => acc + e * this.elements[index], 0 ); } length() { return Math.hypot(...this.elements); } toArray() { return this.elements; } formatToColumnMatrix() { return tex`\begin{bmatrix} ${this.elements .map((e) => Math.round(e * 100) / 100) .join("\\\\")} \end{bmatrix}`; } toString() { return this.formatToColumnMatrix(); } toAngle() { const [x, y] = this.toArray(); return Math.atan2(y, x); } }32:[] 2e:{"title":"Vector maths","cells":[{"id":0,"value":"# Vector maths","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"geometrical objects\n- **Point** is a location in space (one property location)\n- **Vector** is a geometrical object that has length and direction (two properties length, direction)\n\nBoth are represented with a math object **column matrix** using some **coordinate frame**.\nIf coordinate frame change the representation (column matrix) changed, but the point or vector is the same.","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"#### Input ","pinned":false,"hidden":false,"mode":"md"},{"id":896,"value":"viewof inputVector = {\n const inputs = [\n Inputs.range([0,360], {value: 0, step: 1, label:'Direction (degrees)'}),\n Inputs.range([0.1,5], {value: 4, step:0.1, label:\"Length\"}), \n ];\n const view = html`

${inputs}

`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"#### Column matrix","pinned":false,"hidden":false,"mode":"md"},{"id":1101,"value":"convertToVector(inputVector).formatToColumnMatrix()","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"#### Vector length","pinned":false,"hidden":false,"mode":"md"},{"id":897,"value":"html`u = ${convertToVector(inputVector).formatToColumnMatrix()}, |u| = ${Math.round(convertToVector(inputVector).length() * 100/ 100)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"#### Vector negative","pinned":false,"hidden":false,"mode":"md"},{"id":924,"value":"html`u = ${convertToVector(inputVector).formatToColumnMatrix()}, -u = ${convertToVector(inputVector).invert().formatToColumnMatrix()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"#### Vector scale","pinned":false,"hidden":false,"mode":"md"},{"id":979,"value":"viewof k = Inputs.range([-10,10], {value:2,step:0.1, label:'k'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"html`u = ${convertToVector(inputVector).formatToColumnMatrix()}, k * u = ${convertToVector(inputVector).scaleBy(k).formatToColumnMatrix()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"{\n const { w, h } = { w: width - 64, h: 200 };\n const plane = cartesianPlane(w, h, {\n axes: {\n x: { domain: [-15, 15], ticks:30 },\n y: { domain: [-5, 5] }\n }\n });\n \n const startingPoint = [0, 0];\n const a = convertToVector(inputVector);\n const result = a.scaleBy(k);\n\n drawVector(plane, {\n vector: a.toArray(),\n point: startingPoint,\n name: \"a\"\n });\n\n drawVector(plane, {\n vector: result.toArray(),\n point: startingPoint,\n name: \"ka\",\n type:\"d\"\n });\n\n return plane.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"#### Normalized vector","pinned":false,"hidden":false,"mode":"md"},{"id":1246,"value":"{\n const a = convertToVector(inputVector);\n const normA = a.normalize();\n return html`${a.toString()} - normalized ${normA.toString()}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"{\n const { w, h } = { w: 200, h: 200 };\n const plane = cartesianPlane(w, h, {\n axes: {\n x: { domain: [-4, 4], ticks: 10 },\n y: { domain: [-4, 4], ticks: 10}\n }\n });\n const startingPoint = [0, 0];\n const a = convertToVector(inputVector);\n const normA = a.normalize();\n\n drawVector(plane, {\n point: startingPoint,\n vector: a.toArray(),\n name: \"a\"\n });\n\n drawVector(plane, {\n point: startingPoint,\n vector: normA.toArray(),\n name: \"nA\",\n type: \"d\"\n });\n\n\n\n return plane.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"#### Vector operation","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"viewof inputA = {\n const inputs = [\n Inputs.range([0, 360], { value: 0, step: 1, label: \"Direction (degrees)\" }),\n Inputs.range([0, 5], { value: 4, step: 1, label: \"Length\" })\n ];\n const view = html`

${inputs}

`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"viewof inputB = {\n const inputs = [\n Inputs.range([0,360], {value:45, step: 1, label:'Direction (degrees)'}),\n Inputs.range([0,5], {value: 4, step:1, label:\"Length\"}), \n ];\n const view = html`

${inputs}

`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"{\n const { w, h } = { w: 350, h: 300 };\n const chartSize = 8\n const plane = () =>\n cartesianPlane(w, h, {\n axes: {\n x: { domain: [-chartSize, chartSize] },\n y: { domain: [-chartSize, chartSize] }\n }\n });\n\n return html`

Addition

${formatVectorAdd(\n convertToVector(inputA),\n convertToVector(inputB)\n )}

${vectorAddAsNode(plane())}

Substraction

${formatVectorSubstract(\n convertToVector(inputA),\n convertToVector(inputB)\n )}

${vectorSubstractAsNode(plane())}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"#### Vector dot product\n","pinned":false,"hidden":false,"mode":"md"},{"id":1814,"value":"viewof scaleFactor = Inputs.range([1,5], {value:3, step: 1, label:'Zoom'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"Vector dot product is scalar number that is based on the vectors length and angle between them\n- length - dot product of vector with itself = |v|.|v|\n- angle - cos of angle between two vectors = dot product of two unit vectors\n- orthogonal vectors = dot product of two perpendicular vectors = 0","pinned":false,"hidden":false,"mode":"md"},{"id":2012,"value":"{\n const a = convertToVector(inputA);\n const b = convertToVector(inputB);\n\n const normA = a.normalize(a);\n const normB = b.normalize(b);\n \n const result = a.dotProduct(b);\n const normResult = normA.dotProduct(normB);\n \n\n return html`${a.toString()} . ${b.toString()} = ${roundTo(result)}, norm ${normA.toString()} . ${normB.toString()} = ${roundTo(normResult)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1942,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1870,"value":"#### Vector visualizations functions","pinned":false,"hidden":false,"mode":"md"},{"id":842,"value":"vectorAddAsNode = (plane) => { \n const a = convertToVector(inputA);\n const b = convertToVector(inputB);\n const c = a.add(b);\n\n drawVectors(plane, a, b, c);\n\n return plane.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"vectorSubstractAsNode = (plane) => {\n const a = convertToVector(inputA);\n const b = convertToVector(inputB);\n const c = a.substract(b);\n\n drawVectors(plane, a, b, c, true);\n\n return plane.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"drawVectors = (plane, a, b, c, substract = false) => {\n const startingPoint = [0, 0];\n\n drawVector(plane, {\n vector: a.toArray(),\n point: startingPoint,\n name: \"a\"\n });\n\n drawVector(plane, {\n vector: b.toArray(),\n point: a.toArray(),\n name: \"b\"\n });\n\n if (substract) {\n drawVector(plane, {\n vector: b.invert().toArray(),\n point: a.toArray(),\n name: \"-b\",\n type: \"d\"\n });\n }\n\n drawVector(plane, {\n vector: c.toArray(),\n point: startingPoint,\n name: \"c\",\n type: \"d\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2033,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"convertTo2DVectorPlacement = ({vector, point, type}) => ({\n length: Math.sqrt(vector.reduce((out, e) => (out += Math.pow(e, 2)), 0)),\n angle: Math.atan2(vector[1], vector[0]),\n point,\n type\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"convertToVector = ([angle, length]) => {\n const angleInRad = toRadians(angle);\n return new Vector(\n Math.cos(angleInRad) * length,\n Math.sin(angleInRad) * length\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"drawVector = (plane, { vector: vect, point, name, type }) => {\n \n const data = convertTo2DVectorPlacement({vector:vect, point, type});\n vector(plane, [data]);\n\n const scale = data.length / 2;\n const endPoint = [\n Math.cos(data.angle) * scale,\n Math.sin(data.angle) * scale\n ]\n const middlePoint = point.map((e,i) => e + endPoint[i]);\n annotation(plane, [{ point: middlePoint, text: name }]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"formatVectorSubstract = (a,b) => html`${a.formatToColumnMatrix()} - ${b.formatToColumnMatrix()} = ${a.substract(b).formatToColumnMatrix()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"formatVectorAdd = (a,b) => html`${a.formatToColumnMatrix()} + ${b.formatToColumnMatrix()} = ${a.add(b).formatToColumnMatrix()}` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"roundTo = (e) => {\n return Math.round(e * 100)/100;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"toDegrees= (radians) => (radians * 180) / Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"toRadians = (degrees) => (degrees * Math.PI) /180","pinned":false,"hidden":false,"mode":"ojs"},{"id":1991,"value":"solidArrow()","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"import {mergeInputs} from \"@mootari/observablehq-inputs-feature-73\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"import { cartesianPlane, vector, circle, solidArrow , annotation} from \"@fengyfei/math-visualization\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"import {horizontalStack, verticalStack} from \"@rsamec/stacks\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}