Moved Vec2 and Vec3 to common.ts file

2024-12-09 23:46:48 +01:00 · 2024-12-09 23:46:48 +01:00 · 690360c3f2
parent 88edb2af0a
commit 690360c3f2
6 changed files with 140 additions and 146 deletions
--- a/common.js
+++ b/common.js
@ -0,0 +1,59 @@
+class Vec2 {
+    x;
+    y;
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    add(other) {
+        this.x += other.x;
+        this.y += other.y;
+    }
+    addNew(other) {
+        return new Vec2(this.x + other.x, this.y + other.y);
+    }
+    sub(other) {
+        this.x -= other.x;
+        this.y -= other.y;
+    }
+    mult(scalar) {
+        this.x *= scalar;
+        this.y *= scalar;
+    }
+    splatToArray() {
+        return [this.x, this.y];
+    }
+    static angle(angle) {
+        const eps = 1e-6;
+        let x = Math.cos(angle);
+        let y = Math.sin(angle);
+        if ((x > 0 && x < eps)
+            || (x < 0 && x > -eps))
+            x = 0;
+        if ((y > 0 && y < eps)
+            || (y < 0 && y > -eps))
+            y = 0;
+        return new Vec2(x, y);
+    }
+}
+class Vec3 {
+    x;
+    y;
+    z;
+    constructor(x, y, z) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+    add(other) {
+        this.x += other.x;
+        this.y += other.y;
+        this.z += other.z;
+    }
+    sub(other) {
+        this.x -= other.x;
+        this.y -= other.y;
+        this.z -= other.z;
+    }
+}
+export { Vec2, Vec3 };
--- a/common.ts
+++ b/common.ts
@ -0,0 +1,74 @@
+class Vec2 {
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+
+    add(other: Vec2) {
+        this.x += other.x;
+        this.y += other.y;
+    }
+
+    addNew(other: Vec2): Vec2 {
+        return new Vec2(this.x + other.x, this.y + other.y);
+    }
+
+    sub(other: Vec2) {
+        this.x -= other.x;
+        this.y -= other.y;
+    }
+
+    mult(scalar: number) {
+        this.x *= scalar;
+        this.y *= scalar;
+    }
+
+    splatToArray(): Array<number> {
+        return [this.x, this.y];
+    }
+
+    static angle(angle: number): Vec2 {
+        const eps = 1e-6;
+        let x = Math.cos(angle);
+        let y = Math.sin(angle);
+
+        if ((x > 0 && x < eps)
+        ||  (x < 0 && x > -eps))
+            x = 0;
+
+        if ((y > 0 && y < eps)
+        ||  (y < 0 && y > -eps))
+            y = 0;
+
+        return new Vec2(x, y);
+    }
+}
+
+class Vec3 {
+    x: number;
+    y: number;
+    z: number;
+
+    constructor(x: number, y: number, z: number) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+
+    add(other: Vec3) {
+        this.x += other.x;
+        this.y += other.y;
+        this.z += other.z;
+    }
+
+    sub(other: Vec3) {
+        this.x -= other.x;
+        this.y -= other.y;
+        this.z -= other.z;
+    }
+}
+
+export {Vec2, Vec3};
--- a/index.html
+++ b/index.html
@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="style.css"></link>
-  <script src="script.js" defer></script>
+  <script type="module" src="script.js" defer> var exports = {}; </script>
 </head>
 <body>
  <canvas id="game"></canvas>
--- a/script.js
+++ b/script.js
@ -1,4 +1,4 @@
-"use strict";
+import { Vec2 } from "./common.js";
 var vertexShaderSource = `#version 300 es
     

@ -55,10 +55,6 @@ function createProgram(ctx, vertexShaderSource, fragmentShaderSource) {
    }
    return program;
 }
-function createUniform(ctx, program, name) {
-    const loc = ctx.getUniformLocation(program, name);
-    return loc;
-}
 function initializeContext(canvasId) {
    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext("webgl2", { antialias: false });
@ -192,64 +188,6 @@ class Graphics {
        return loc;
    }
 }
-class Vec2 {
-    x;
-    y;
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-    add(other) {
-        this.x += other.x;
-        this.y += other.y;
-    }
-    addNew(other) {
-        return new Vec2(this.x + other.x, this.y + other.y);
-    }
-    sub(other) {
-        this.x -= other.x;
-        this.y -= other.y;
-    }
-    mult(scalar) {
-        this.x *= scalar;
-        this.y *= scalar;
-    }
-    splatToArray() {
-        return [this.x, this.y];
-    }
-    static angle(angle) {
-        const eps = 1e-6;
-        let x = Math.cos(angle);
-        let y = Math.sin(angle);
-        if ((x > 0 && x < eps)
-            || (x < 0 && x > -eps))
-            x = 0;
-        if ((y > 0 && y < eps)
-            || (y < 0 && y > -eps))
-            y = 0;
-        return new Vec2(x, y);
-    }
-}
-class Vec3 {
-    x;
-    y;
-    z;
-    constructor(x, y, z) {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-    }
-    add(other) {
-        this.x += other.x;
-        this.y += other.y;
-        this.z += other.z;
-    }
-    sub(other) {
-        this.x -= other.x;
-        this.y -= other.y;
-        this.z -= other.z;
-    }
-}
 function fullscreenCanvas(id) {
    const canvas = document.getElementById(id);
    canvas.width = window.innerWidth;
@ -268,7 +206,7 @@ function draw() {
    const position = new Vec2(ctx.canvas.width / 2 - 100, ctx.canvas.height / 2 - 100);
    gfx.clear(0, 0, 0, 0);
    ctx.uniform2f(gfx.getUniform("u_resolution"), ctx.canvas.width, ctx.canvas.height);
-    ctx.uniform4f(gfx.getUniform("u_color"), 0.5, 0.2, 0.2, 1);
+    ctx.uniform4f(gfx.getUniform("u_color"), Math.random(), Math.random(), Math.random(), 1);
    drawRectangle(gfx, position, new Vec2(200, 200));
    drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
    drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
--- a/script.ts
+++ b/script.ts
@ -1,3 +1,5 @@
+import { Vec2 } from "./common.js";
+
 var vertexShaderSource = 
    `#version 300 es
     
@ -68,12 +70,6 @@ function createProgram(ctx: WebGL2RenderingContext, vertexShaderSource: string |
    return program;
 }

-function createUniform(ctx: WebGL2RenderingContext, program: WebGLProgram, name: string): WebGLUniformLocation | null {
-    const loc = ctx.getUniformLocation(program, name);
-
-    return loc;
-}
-
 function initializeContext(canvasId: string): WebGL2RenderingContext | null {
    const canvas  = document.getElementById(canvasId) as HTMLCanvasElement;
    const ctx = canvas.getContext("webgl2", {antialias: false});
@ -243,79 +239,6 @@ class Graphics {
    }
 }

-class Vec2 {
-    x;
-    y;
-
-    constructor(x: number, y: number) {
-        this.x = x;
-        this.y = y;
-    }
-
-    add(other: Vec2) {
-        this.x += other.x;
-        this.y += other.y;
-    }
-
-    addNew(other: Vec2): Vec2 {
-        return new Vec2(this.x + other.x, this.y + other.y);
-    }
-
-    sub(other: Vec2) {
-        this.x -= other.x;
-        this.y -= other.y;
-    }
-
-    mult(scalar: number) {
-        this.x *= scalar;
-        this.y *= scalar;
-    }
-
-    splatToArray(): Array<number> {
-        return [this.x, this.y];
-    }
-
-    static angle(angle: number): Vec2 {
-        const eps = 1e-6;
-        let x = Math.cos(angle);
-        let y = Math.sin(angle);
-
-        if ((x > 0 && x < eps)
-        ||  (x < 0 && x > -eps))
-            x = 0;
-
-        if ((y > 0 && y < eps)
-        ||  (y < 0 && y > -eps))
-            y = 0;
-
-        return new Vec2(x, y);
-    }
-}
-
-class Vec3 {
-    x;
-    y;
-    z;
-
-    constructor(x: number, y: number, z: number) {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-    }
-
-    add(other: Vec3) {
-        this.x += other.x;
-        this.y += other.y;
-        this.z += other.z;
-    }
-
-    sub(other: Vec3) {
-        this.x -= other.x;
-        this.y -= other.y;
-        this.z -= other.z;
-    }
-}
-
 function fullscreenCanvas(id: string) {
    const canvas  = document.getElementById(id) as HTMLCanvasElement;
    canvas.width  = window.innerWidth;
@ -338,7 +261,7 @@ function draw() {

    gfx.clear(0, 0, 0, 0);
    ctx.uniform2f(gfx.getUniform("u_resolution"), ctx.canvas.width, ctx.canvas.height);
-    ctx.uniform4f(gfx.getUniform("u_color"), 0.5, 0.2, 0.2, 1);
+    ctx.uniform4f(gfx.getUniform("u_color"), Math.random(), Math.random(), Math.random(), 1);
    drawRectangle(gfx, position, new Vec2(200, 200))
    drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
    drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
--- a/tsconfig.json
+++ b/tsconfig.json
@ -25,7 +25,7 @@
    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

    /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "es2022",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */