-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #227 from PRIME-TU-Delft/fix-diagonal-parrallelogram
Fix diagonal parrallelogram
- Loading branch information
Showing
8 changed files
with
9,844 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <!DOCTYPE html> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
122 changes: 102 additions & 20 deletions
122
src/routes/applet/dot_product/diagonal_parallelogram/+page.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,151 @@ | ||
| <script lang="ts"> | ||
| import { Arc2D, Canvas2D, Latex2D, Vector2D, Draggable2D } from '$lib/d3-components'; | ||
| import { Canvas2D, Latex2D, Vector2D, Draggable2D } from '$lib/d3-components'; | ||
| import { PrimeColor } from '$lib/utils/PrimeColors'; | ||
| import { Vector2 } from 'three'; | ||
| import { Vector2, Vector3 } from 'three'; | ||
| import { GridType } from '$lib/d3-components/grids/GridTypes'; | ||
| import { Formula } from '$lib/utils/Formulas'; | ||
| import RightAngle from '$lib/d3-components/RightAngle.svelte'; | ||
| import { snapPointToLine } from '$lib/utils/MathLib'; | ||
| import StaticImg from './staticImg.svelte'; | ||
| let w = new Vector2(2, 3); | ||
| let v = new Vector2(3, -2); | ||
| //[] todo consistant var naming -> camelcase or __ | ||
| $: vPlusW = w.clone().add(v); | ||
| const snap_distance = 0.5; | ||
| let formulas: Formula[] = []; | ||
| //vars for interactive section | ||
| let origin = new Vector2(1.5, 0); | ||
| let w_plus_o = new Vector2(2, 3); //vectors are calculated this way because a draggable takes a global position, not a vector relative to origin | ||
| $: w = w_plus_o.clone().sub(origin); | ||
| let v_plus_o = new Vector2(3.5, -2); | ||
| $: v = v_plus_o.clone().sub(origin); | ||
| $: orthV = new Vector2(v.y, v.clone().x * -1).multiplyScalar(20); //line orth to v | ||
| $: orthW = new Vector2(w.y, w.clone().x * -1).multiplyScalar(20); //line orth to v | ||
| function snap_v(_: Vector2) { | ||
| let snap_v = snapPointToLine(v, orthW.clone().multiplyScalar(-1), orthW, snap_distance); | ||
| if (snap_v != null) { | ||
| v = snap_v; | ||
| v_plus_o = v.clone().add(origin); | ||
| } | ||
| } | ||
| function snap_w(_: Vector2) { | ||
| let snap_w = snapPointToLine(w, orthV.clone().multiplyScalar(-1), orthV, snap_distance); | ||
| if (snap_w != null) { | ||
| w = snap_w; | ||
| w_plus_o = w.clone().add(origin); | ||
| } | ||
| } | ||
| function setFormulas(b: boolean) { | ||
| const plus = ' | \\mathbf{v + w} |'; | ||
| const min = '|\\mathbf{v - w}|'; | ||
| if (b) { | ||
| const f3 = new Formula('{\\$1} = \\$2') | ||
| .addParam(1, plus, PrimeColor.raspberry) | ||
| .addParam(2, min, PrimeColor.orange); | ||
| formulas = [f3]; | ||
| } else { | ||
| const f3 = new Formula('{\\$1} \\neq \\$2') | ||
| .addParam(1, plus, PrimeColor.raspberry) | ||
| .addParam(2, min, PrimeColor.orange); | ||
| formulas = [f3]; | ||
| } | ||
| } | ||
| $: snap_v(v); | ||
| $: snap_w(w); | ||
| $: vPlusW = v.clone().add(w); | ||
| $: vMinusW = v.clone().sub(w); | ||
| // keeps track of orthogonality | ||
| $: isOrthogonal = | ||
| Math.abs(w.clone().normalize().dot(v.clone().normalize())) <= 0.05 && !v.equals(w); | ||
| $: setFormulas(isOrthogonal); | ||
| </script> | ||
|
|
||
| <Canvas2D> | ||
| <Draggable2D snap id="b1" bind:position={w} color={PrimeColor.blue} /> | ||
| <Draggable2D snap id="b2" bind:position={v} color={PrimeColor.blue} /> | ||
| <Canvas2D gridType={GridType.None} {formulas}> | ||
| <!-- Imported static side --> | ||
| <StaticImg /> | ||
| <!-- Interactive side of image --> | ||
|
|
||
| <!-- Arcs --> | ||
| <Arc2D points={[v, w]} distance={0.75} color={PrimeColor.darkGreen} /> | ||
| <Draggable2D id="w+o" bind:position={w_plus_o} color={PrimeColor.darkGreen} /> | ||
| <Draggable2D id="v+o" bind:position={v_plus_o} color={PrimeColor.cyan} /> | ||
|
|
||
| <!-- Bases --> | ||
| <Vector2D direction={v} length={v.length()} color={PrimeColor.blue} let:endPoint> | ||
| <Latex2D position={endPoint} latex={'\\mathbf{v}'} offset={new Vector2(-0.2, 0.5)} /> | ||
| <Vector2D {origin} direction={v} length={v.length()} color={PrimeColor.cyan}> | ||
| <Latex2D | ||
| position={origin} | ||
| latex={'\\mathbf{v}'} | ||
| offset={v.clone().normalize().multiplyScalar(1.5).add(new Vector2(0, 0.2))} | ||
| color={PrimeColor.cyan} | ||
| /> | ||
| </Vector2D> | ||
| <Vector2D direction={w} length={w.length()} color={PrimeColor.darkGreen} let:endPoint> | ||
| <Latex2D position={endPoint} latex={'\\mathbf{w}'} offset={new Vector2(-0.2, 0.2)} /> | ||
| <Vector2D {origin} direction={w} length={w.length()} color={PrimeColor.darkGreen}> | ||
| <Latex2D | ||
| position={origin} | ||
| latex={'\\mathbf{w}'} | ||
| offset={w.clone().normalize().multiplyScalar(1.5).add(new Vector2(0.1, 0))} | ||
| color={PrimeColor.darkGreen} | ||
| /> | ||
| </Vector2D> | ||
|
|
||
| <!-- v+w --> | ||
| <Vector2D direction={vPlusW} length={vPlusW.length()} color={PrimeColor.raspberry} let:endPoint> | ||
| <Vector2D | ||
| {origin} | ||
| direction={vPlusW} | ||
| length={vPlusW.length()} | ||
| color={PrimeColor.raspberry} | ||
| let:endPoint | ||
| > | ||
| <Latex2D | ||
| position={endPoint} | ||
| latex={'\\mathbf{v} + \\mathbf{w}'} | ||
| latex={'\\mathbf{v + w}'} | ||
| offset={new Vector2(0.2, 0.2)} | ||
| color={PrimeColor.raspberry} | ||
| /> | ||
| </Vector2D> | ||
|
|
||
| <!-- v-w --> | ||
| <Vector2D | ||
| origin={w} | ||
| origin={w.clone().add(origin)} | ||
| direction={vMinusW} | ||
| length={vMinusW.length()} | ||
| color={PrimeColor.orange} | ||
| let:endPoint | ||
| > | ||
| <Latex2D | ||
| position={endPoint} | ||
| latex={'\\mathbf{v} - \\mathbf{w}'} | ||
| latex={'\\mathbf{v - w}'} | ||
| offset={new Vector2(-0.2, -0.2)} | ||
| color={PrimeColor.orange} | ||
| /> | ||
| </Vector2D> | ||
|
|
||
| <!-- Helper lins --> | ||
| <Vector2D | ||
| origin={w} | ||
| origin={w.clone().add(origin)} | ||
| direction={v} | ||
| length={v.length()} | ||
| color={PrimeColor.black} | ||
| isDashed | ||
| hideHead | ||
| /> | ||
| <Vector2D | ||
| origin={v} | ||
| origin={v.clone().add(origin)} | ||
| direction={w} | ||
| length={w.length()} | ||
| color={PrimeColor.black} | ||
| isDashed | ||
| hideHead | ||
| /> | ||
| <RightAngle {origin} vs={[v, w]} /> | ||
| </Canvas2D> |
99 changes: 99 additions & 0 deletions
99
src/routes/applet/dot_product/diagonal_parallelogram/staticImg.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <script lang="ts"> | ||
| import { Latex2D, Vector2D } from '$lib/d3-components'; | ||
| import { PrimeColor } from '$lib/utils/PrimeColors'; | ||
| import { Vector2 } from 'three'; | ||
| import RightAngle from '$lib/d3-components/RightAngle.svelte'; | ||
| //vars for static section | ||
| let o_static = new Vector2(-4, -1); | ||
| let w_static = new Vector2(1.5, 3); | ||
| let v_static = new Vector2(2, -1); | ||
| let vPlusW_static = v_static.clone().add(w_static); | ||
| let vMinusW_static = v_static.clone().sub(w_static); | ||
| </script> | ||
|
|
||
| <!-- Static part of image --> | ||
|
|
||
| <!-- static Bases --> | ||
| <Vector2D | ||
| origin={o_static} | ||
| direction={v_static} | ||
| length={v_static.length()} | ||
| color={PrimeColor.cyan} | ||
| let:endPoint | ||
| > | ||
| <Latex2D | ||
| position={endPoint} | ||
| latex={'\\mathbf{v}'} | ||
| offset={new Vector2(-0.4, 0.5)} | ||
| color={PrimeColor.cyan} | ||
| /> | ||
| </Vector2D> | ||
| <Vector2D | ||
| origin={o_static} | ||
| direction={w_static} | ||
| length={w_static.length()} | ||
| color={PrimeColor.darkGreen} | ||
| let:endPoint | ||
| > | ||
| <Latex2D | ||
| position={endPoint} | ||
| latex={'\\mathbf{w}'} | ||
| offset={new Vector2(-0.2, 0.2)} | ||
| color={PrimeColor.darkGreen} | ||
| /> | ||
| </Vector2D> | ||
|
|
||
| <!-- static v+w --> | ||
| <Vector2D | ||
| origin={o_static} | ||
| direction={vPlusW_static} | ||
| length={vPlusW_static.length()} | ||
| color={PrimeColor.raspberry} | ||
| let:endPoint | ||
| > | ||
| <Latex2D | ||
| position={endPoint} | ||
| latex={'\\mathbf{v + w}'} | ||
| offset={new Vector2(0.2, 0.2)} | ||
| color={PrimeColor.raspberry} | ||
| /> | ||
| </Vector2D> | ||
|
|
||
| <!-- static v-w --> | ||
| <Vector2D | ||
| origin={w_static.clone().add(o_static)} | ||
| direction={vMinusW_static} | ||
| length={vMinusW_static.length()} | ||
| color={PrimeColor.orange} | ||
| let:endPoint | ||
| > | ||
| <Latex2D | ||
| position={endPoint} | ||
| latex={'\\mathbf{v - w}'} | ||
| offset={new Vector2(-0.2, -0.2)} | ||
| color={PrimeColor.orange} | ||
| /> | ||
| </Vector2D> | ||
|
|
||
| <!-- Static Helper lines --> | ||
| <Vector2D | ||
| origin={w_static.clone().add(o_static)} | ||
| direction={v_static} | ||
| length={v_static.length()} | ||
| color={PrimeColor.black} | ||
| isDashed | ||
| hideHead | ||
| /> | ||
| <Vector2D | ||
| origin={v_static.clone().add(o_static)} | ||
| direction={w_static} | ||
| length={w_static.length()} | ||
| color={PrimeColor.black} | ||
| isDashed | ||
| hideHead | ||
| /> | ||
|
|
||
| <RightAngle origin={o_static} vs={[v_static, w_static]} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.