vector2

BurntWaffleCake · Oct 3, 2023 · 6e051ed · 6e051ed
1 parent 8592588
commit 6e051ed
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 20 deletions.
diff --git a/javascript/PhysicsEngine/Polygon.js b/javascript/PhysicsEngine/Polygon.js
@@ -16,7 +16,7 @@ export class Face {
 }
 
 export class Polygon {
-    constructor(points) {
+    constructor(points, pos = new Vector2(0, 0)) {
         console.log(points)
         this.points = points;
         this.sides = [];
@@ -26,5 +26,44 @@ export class Polygon {
             console.log(this.sides[i].from)
         }
         this.sides.push(new Face(points[points.length-1], points[0]))
+
+        this.pos = pos
+        this.vel = new Vector2(0, 0);
+        this.rot = 0;
+
+        this.fillColor = "rgb(255, 255, 255)"
+        this.strokeColor = "rgb(255, 255, 255)"
+    }
+
+    toWorldSpace(vector) {
+        return new Vector2(
+            this.pos.x + vector.x * Math.cos(this.rot) - vector.y * Math.sin(this.rot),
+            this.pos.y + vector.x * Math.sin(this.rot) + vector.y * Math.cos(this.rot),
+        )
+    }
+
+    getWorldCoordinates() {
+        var worldPoints = [];
+        for (let point of this.points) {
+            worldPoints.push(this.toWorldSpace(point));
+        }
+        return worldPoints;
+    }
+
+    render(ctx = CanvasRenderingContext2D) {
+        ctx.strokeStyle = this.strokeColor;
+        ctx.fillStyle = this.fillColor;
+
+        let worldCoords = this.getWorldCoordinates();
+
+        ctx.beginPath();
+        ctx.moveTo(worldCoords[0].x, worldCoords[0].y);
+        for (let point of worldCoords) {
+            ctx.lineTo(point.x, point.y);
+        }
+        ctx.lineTo(worldCoords[0].x, worldCoords[0].y);
+
+        ctx.fill()
+        ctx.stroke()
     }
 }
diff --git a/javascript/PhysicsEngine/index.html b/javascript/PhysicsEngine/index.html
@@ -3,17 +3,42 @@
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+
 <html>
-    <head>
-        <base href=".">
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title></title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="">
-    </head>
-    <body>        
-        <script type="module" src="./main.js" async defer></script>
-    </body>
+
+<head>
+    <base href=".">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="">
+</head>
+
+<style>
+    html, body {
+        width: 100%;
+        height: 100%;
+
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+
+    #source {
+        box-sizing: border-box;
+        background-color: black;
+        border: 3px solid red;
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+
+<body>
+    <canvas id="source"></canvas>
+    <script type="module" src="./main.js" async defer></script>
+</body>
+
 </html>
diff --git a/javascript/PhysicsEngine/main.js b/javascript/PhysicsEngine/main.js
@@ -1,14 +1,47 @@
 import { Vector2 } from "./Vector2.js";
-import * as polyModule from "./Polygon.js"
+import * as polyModule from "./Polygon.js";
+
+let src = document.getElementById("source");
+let ctx = src.getContext("2d");
 
 let newPoly = new polyModule.Polygon([
-    new Vector2(-1, 1),
-    new Vector2(1, 1),
-    new Vector2(1, -1),
-    new Vector2(-1, -1)
+    new Vector2(-50, 50),
+    new Vector2(50, 50),
+    new Vector2(50, -50),
+    new Vector2(-50, -50)
 ])
 
-console.log(newPoly)
 
 let vector = new Vector2(1, 1);
-let vector2 = new Vector2(5, 3)
+let vector2 = new Vector2(5, 3);
+
+function render(dt) {
+    newPoly.render(ctx);
+}
+
+function calculate(dt, t) {
+
+}
+
+let time = 0;
+function loop(t) {
+    let dt = (t/1000) - time;
+
+    ctx.canvas.width = src.clientWidth;
+    ctx.canvas.height = src.clientHeight;
+
+    newPoly.pos.x = ctx.canvas.width / 2
+    newPoly.pos.y = ctx.canvas.height / 2
+
+    calculate(dt, t);
+    render(dt);
+
+    time += t / 1000;
+    window.requestAnimationFrame(loop);
+}
+
+function startup() {
+    loop();
+}
+
+startup();