diff --git a/index.html b/index.html index b75ebe30b127f78a4a40f5a4bbcf8413817df847..71ec3b221483010927b9e6490d839e6d0c73c58b 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,10 @@ </head> <body> <div id="app"></div> - <script type="module" src="/src/main.ts"></script> + <!--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/perspectiveDivide.ts"></script> </body> </html> diff --git a/src/cg/perspectiveDivide.ts b/src/cg/perspectiveDivide.ts new file mode 100644 index 0000000000000000000000000000000000000000..48a9d49965af71364cd88ab0677ac34e7a46459f --- /dev/null +++ b/src/cg/perspectiveDivide.ts @@ -0,0 +1,25 @@ +//import { perspDivide } from "./_helper"; +import Playground from "./playground"; + +const pg = new Playground(); + +const point = [1.5, 0.6, -10]; +const pointa = [point[0], point[1], -3]; +const distImagePlane = -1; + +// Creates a basic camera visualization +pg.visCamera(distImagePlane); + +pg.visVector(point, { color: "orange", label: "P", triangles: true }) +pg.visVector(pointa, { color: "red", label: "Pa", triangles: true }) + +// Add your function "perspDivide". +// IMPORTANT: Our camera points along -Z. +function perspDivide(p: Array<number>, dist: number) { + + return [dist * p[0] / p[2], dist * p[1] / p[2], dist ] ; +} + +let pProjected = perspDivide(point, distImagePlane); +pg.visVector(pProjected, { color: "blue", label: "P'", triangles: true }); +pg.visVector(perspDivide(pointa, distImagePlane), { color: "green", label: "Pa'", triangles: true }); \ No newline at end of file diff --git a/src/cg/vector.ts b/src/cg/vector.ts new file mode 100644 index 0000000000000000000000000000000000000000..a7ffb5b87e064873515f887122ed9e728791489b --- /dev/null +++ b/src/cg/vector.ts @@ -0,0 +1,18 @@ +import Playground from "./playground"; + +const pg = new Playground(); + +// Some vectors +const v = [2,2,3] +const w = [1,2,3] + +// Do some math +const sub = [v[0] - w[0], v[1] - w[1], v[2] - w[2]] + + +// Visualize +pg.gridXZ(); // Grid + +pg.visVector(v,{color:"orange",label:"V"}); +pg.visVector(w,{color:"dodgerblue",label:"W"}); +pg.visVector(sub,{color:"green",placeAt:w}); \ No newline at end of file