Use class to represent shapes

src/geometry/Shape2D.ts

@@ -0,0 +1,8 @@
+import Vector2D from "./Vector2D";
+
+export default class Shape2D {
+  constructor(
+    public position: Vector2D,
+    public vertices: Float32Array,
+  ) {}
+}

src/geometry/Triangle.ts

@@ -0,0 +1,10 @@
+import Shape2D from "./Shape2D";
+import Vector2D from "./Vector2D";
+
+export default class Triangle extends Shape2D {
+  constructor(
+    public position: Vector2D,
+  ) {
+    super(position, new Float32Array([0.0, -0.5, 0.3, 0.5, -0.3, 0.5]));
+  }
+}

src/geometry/Vector2D.ts

@@ -0,0 +1,11 @@
+export default class Vector2D {
+  constructor(
+    public x: number,
+    public y: number,
+  ) {}
+
+  add(other: Vector2D) {
+    this.x += other.x;
+    this.y += other.y;
+  }
+}

src/main.ts

@@ -5,7 +5,10 @@ import vsSource from "./shaders/basic.vert?raw";
 import fsSource from "./shaders/basic.frag?raw";
 import { drawVertex, loadBuffer, loadProgram, loadShader } from "./shaderUtils";
 
-import triangle from "./shapes/triangle.json";
+import Triangle from "./geometry/Triangle";
+import Vector2D from "./geometry/Vector2D";
+
+const triangle = new Triangle(new Vector2D(0, 0));
 
 function render() {
   const canvas = document.querySelector<HTMLCanvasElement>("#canvas");

src/shapes/triangle.json

@@ -1,8 +0,0 @@
-{
-    "name": "triangle",
-    "vertices": [
-        0.0, -0.5,
-        0.3, 0.5,
-        -0.3, 0.5
-    ]
-}