basis

index.html

@@ -11,7 +11,9 @@
     <!--script type="module" src="/src/main.ts"></script>
     <script type="module" src="/src/cg/main.ts"></script>
     <script type="module" src="/src/cg/pgIntro.ts"></script>
-    <script type="module" src="/src/cg/vector.ts"></script-->
+    <script type="module" src="/src/cg/vector.ts"></script>
     <script type="module" src="/src/cg/perspectiveDivide.ts"></script>
+    <script type="module" src="/src/cg/walkToVec.ts"></script-->
+    <script type="module" src="/src/cg/basis.ts"></script>
   </body>
 </html>

src/cg/basis.ts

+import Playground from "./playground";
+import { vecAdd } from "./utils";
+import { vecMultiply } from "./utils";
+
+const pg = new Playground();
+pg.gridXZ();
+
+const initialVec = [1.5, 2, 0.3];
+
+let basis = [1, 2, 1];
+basis = vecMultiply(basis, 0.5);
+const iHat = [basis[0], 0, 0];
+const jHat = [0, basis[1], 0];
+const kHat = [0, 0, basis[2]];
+
+const vecAlongIHat = [initialVec[0] * iHat[0], initialVec[0] * iHat[1], initialVec[0] * iHat[2]];
+const vecAlongJHat = [initialVec[1] * jHat[0], initialVec[1] * jHat[1], initialVec[1] * jHat[2]];
+const vecAlongKHat = [initialVec[2] * kHat[0], initialVec[2] * kHat[1], initialVec[2] * kHat[2]];
+
+pg.visVector(initialVec, {color: 'purple', label: "initial vector"});
+pg.visVector(iHat, {color: 'red', label: "î"});
+pg.visVector(jHat, {color: 'green', label: "^j"});
+pg.visVector(kHat, {color: 'blue', label: "^k"});
+pg.visVector(vecAlongIHat, {color: 'pink', label: "along î"});
+pg.visVector(vecAlongJHat, {color: 'limegreen', label: "along ^j"});
+pg.visVector(vecAlongKHat, {color: 'lightblue', label: "along ^k"});
+
+let resultVec = vecAdd(vecAlongIHat, vecAlongJHat);
+resultVec = vecAdd(resultVec, vecAlongKHat);
+
+pg.visVector(resultVec, {color: 'yellow', label: "result"});
\ No newline at end of file

src/cg/walkToVec.ts

+import Playground from "./playground";
+
+const pg = new Playground();
+pg.gridXZ();
+const v = [1, 2, -2];
+
+pg.visVector(v, { color: "dodgerblue", label: "V" });
+
+const alongX = [v[0], 0, 0];
+const alongY = [0, v[1], 0];
+const alongZ = [0, 0, v[2]];
+pg.visVector(alongX, { color: 'red' });
+pg.visVector(alongY, { color: 'green', placeAt: alongX });
+pg.visVector(alongZ, { color: 'blue', placeAt: [alongX[0], alongY[1], 0] });
+