rewrite started

BurntWaffleCake · Oct 3, 2023 · 8592588 · 8592588
1 parent 054e4e4
commit 8592588
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 98 deletions.
diff --git a/javascript/PhysicsEngine/Polygon.js b/javascript/PhysicsEngine/Polygon.js
@@ -0,0 +1,30 @@
+import {Vector2} from "./Vector2.js"
+
+export class Face {
+    constructor(from, to) {
+        this.from = from.clone()
+        this.to = to.clone()
+
+        let delta = to.clone().subtract(from).normal()
+        this.normal = new Vector2(-delta.y, delta.x)
+    }
+
+    center() {
+        let delta = this.to.clone().subtract(this.from).normal()
+        return this.from.clone().add(delta.scale(delta.magnitude() / 2))
+    }
+}
+
+export class Polygon {
+    constructor(points) {
+        console.log(points)
+        this.points = points;
+        this.sides = [];
+        for (let i = 0; i < points.length - 1; i++) {
+            this.sides.push(new Face(points[i], points[i + 1]))
+            console.log(this.sides[i].center())
+            console.log(this.sides[i].from)
+        }
+        this.sides.push(new Face(points[points.length-1], points[0]))
+    }
+}
diff --git a/javascript/PhysicsEngine/Vector2.js b/javascript/PhysicsEngine/Vector2.js
@@ -0,0 +1,59 @@
+export class Vector2 {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    normal() {
+        let mag = this.magnitude()
+        return new Vector2(this.x / mag, this.y / mag);
+    }
+
+    magnitude() {
+        return Math.sqrt(this.x*this.x + this.y*this.y);
+    }
+
+    add(vector) {
+        this.x += vector.x;
+        this.y += vector.y;
+        return this;
+    }
+
+    subtract(vector) {
+        this.x -= vector.x;
+        this.y -= vector.y;
+        return this;
+    }
+
+    multiply(vector) {
+        this.x *= vector.x;
+        this.y *= vector.y;
+        return this;
+
+    }
+
+    divide(vector) {
+        this.x /= vector.x;
+        this.y /= vector.y;
+        return this;
+
+    }
+
+    scale(scalar) {
+        this.x *= scalar;
+        this.y *= scalar;
+        return this;
+    }
+
+    clone() {
+        return new Vector2(this.x, this.y)
+    }
+
+    dot(vector) {
+        return this.x*vector.x + this.y*vector.y
+    }
+
+    cross(vector) {
+        return this.x * vector.y - this.y * vector.x
+    }
+}
diff --git a/javascript/PhysicsEngine/index.html b/javascript/PhysicsEngine/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[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>
+</html>
diff --git a/javascript/PhysicsEngine/main.js b/javascript/PhysicsEngine/main.js
@@ -0,0 +1,14 @@
+import { Vector2 } from "./Vector2.js";
+import * as polyModule from "./Polygon.js"
+
+let newPoly = new polyModule.Polygon([
+    new Vector2(-1, 1),
+    new Vector2(1, 1),
+    new Vector2(1, -1),
+    new Vector2(-1, -1)
+])
+
+console.log(newPoly)
+
+let vector = new Vector2(1, 1);
+let vector2 = new Vector2(5, 3)
diff --git a/javascript/polygonCollision/script.js b/javascript/polygonCollision/script.js
@@ -127,17 +127,7 @@ class Box {
         let axis2Mag = Math.sqrt(axis2.x * axis2.x + axis2.y * axis2.y)
         axis2.x = axis2.x / axis2Mag
         axis2.y = axis2.y / axis2Mag
-
-        // let axis3 = { x: points[3].x - points[2].x, y: points[3].y - points[2].y }
-        // let axis3Mag = Math.sqrt(axis3.x * axis3.x + axis3.y * axis3.y)
-        // axis3.x = axis3.x / axis3Mag
-        // axis3.y = axis3.y / axis3Mag
-
-        // let axis4 = { x: points[0].x - points[3].x, y: points[0].y - points[3].y }
-        // let axis4Mag = Math.sqrt(axis4.x * axis4.x + axis4.y * axis4.y)
-        // axis4.x = axis4.x / axis4Mag
-        // axis4.y = axis4.y / axis4Mag
-        return [axis1, axis2]//, axis3, axis4]
+        return [axis1, axis2]
     }
 
     toWorldSpace(x, y) {
@@ -159,10 +149,22 @@ class Box {
         return [tl, tr, br, bl]
     }
 
+    getFaces() {
+        let faces = []
+        let coords = this.getWorldCoordinates()
+        coords.array.forEach(element, index, array => {
+            if (index < array.length - 1) {
+                faces.push({element - array[index + 1], 1})
+            } else {
+                faces.push()
+            }
+        });
+    }
+
     render(ctx) {
         ctx.fillStyle = this.color
         ctx.fillRect(this.x - 1.5, this.y - 1.5, 3, 3)
-
+ls``
         let coords = this.getWorldCoordinates()
 
         ctx.strokeStyle = this.color
@@ -196,6 +198,10 @@ function round(value, decimals) {
     return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
 }
 
+function getPointsBelow() {
+
+}
+
 function getCollidingPoint(box1, box2, normal) {
     let mag = Math.sqrt((box2.x - box1.x) ** 2 + (box2.y - box1.y) ** 2)
     let delta = { x: (box2.x - box1.x) / mag, y: (box2.y - box1.y) / mag }
@@ -268,46 +274,18 @@ function projectVectorToLine(x, y, lx, ly) {
     return { x: projX, y: projY }
 }
 
-function projectToAxis(axisX, axisY, box, color) {
-    let axis = { x: axisX, y: axisY }
-    let axisMag = Math.sqrt(axis.x * axis.x + axis.y * axis.y)
-    axis = { x: axis.x / axisMag, y: axis.y / axisMag }
-    let boxProj = box.getProjection(axis.x, axis.y)
-
-    if (color != undefined) {
-        // ctx.fillStyle = color
-        // ctx.fillRect(axis.x * boxProj.max - 2.5, axis.y * boxProj.max - 2.5, 5, 5)
-        // ctx.fillRect(axis.x * boxProj.min - 2.5, axis.y * boxProj.min - 2.5, 5, 5)
-        // ctx.strokeStyle = color
-        // ctx.beginPath()
-        // ctx.moveTo(axis.x * boxProj.max, axis.y * boxProj.max)
-        // ctx.lineTo(boxProj.maxPoint.x, boxProj.maxPoint.y)
-        // ctx.stroke()
-        // ctx.beginPath()
-        // ctx.moveTo(axis.x * boxProj.min, axis.y * boxProj.min)
-        // ctx.lineTo(boxProj.minPoint.x, boxProj.minPoint.y)
-        // ctx.stroke()
-    }
-    return boxProj
-}
-
 function testBoxCollision(box1, box2) {
-    let satAxis = box1.getCollisionAxis()
-    let satAxis2 = box2.getCollisionAxis()
-    satAxis = satAxis.concat(box2.getCollisionAxis())
+    let satAxisBox1 = box1.getCollisionAxis()
+    let satAxisBox2 = box2.getCollisionAxis()
 
     var colliding = true
     let mvt = Number.MAX_VALUE
     let normal = undefined
+    let satShape = undefined // true: box1, false: box2
 
-    // ctx.strokeStyle = "rgb(0,255,0)"
-
-    for (axis of satAxis) {
-        // ctx.moveTo(width / 2, height / 2)
-        // ctx.lineTo(width / 2 + 50 * axis.x, height / 2 + 50 * axis.y)
-
-        let box1Proj = projectToAxis(axis.x, axis.y, box1)
-        let box2Proj = projectToAxis(axis.x, axis.y, box2)
+    for (axis of satAxisBox1) {
+        let box1Proj = box1.getProjection(axis.x, axis.y)
+        let box2Proj = box2.getProjection(axis.x, axis.y)
 
         let overlap = testProjectionOverlap(box1Proj, box2Proj)
 
@@ -316,37 +294,39 @@ function testBoxCollision(box1, box2) {
         } else if (overlap < mvt) {
             mvt = overlap
             normal = axis
+            satShape = true
         }
+    }
 
-        // ctx.fillStyle = box1.color
-        // ctx.fillRect(box1Proj.max * axis.x / 2 + width / 2 - 1.5, box1Proj.max * axis.y / 2 + height / 2 - 1.5, 3, 3)
-        // ctx.fillRect(box1Proj.min * axis.x / 2 + width / 2 - 1.5, box1Proj.min * axis.y / 2 + height / 2 - 1.5, 3, 3)
+    for (axis of satAxisBox2) {
+        let box1Proj = box1.getProjection(axis.x, axis.y)
+        let box2Proj = box2.getProjection(axis.x, axis.y)
 
-        // ctx.fillStyle = box2.color
-        // ctx.fillRect(box2Proj.max * axis.x / 2 + width / 2 - 1.5, box2Proj.max * axis.y / 2 + height / 2 - 1.5, 3, 3)
-        // ctx.fillRect(box2Proj.min * axis.x / 2 + width / 2 - 1.5, box2Proj.min * axis.y / 2 + height / 2 - 1.5, 3, 3)
+        let overlap = testProjectionOverlap(box1Proj, box2Proj)
 
+        if (!overlap) {
+            colliding = false
+        } else if (overlap < mvt) {
+            mvt = overlap
+            normal = axis
+            satShape = false
+        }
     }
 
-    // ctx.stroke()
-
     if (colliding) {
-        // box2.color = "rgb(255,0,255)"
         let dot = normal.x * (box2.x - box1.x) + normal.y * (box2.y - box1.y)
 
-        // ctx.beginPath()
-        // ctx.strokeStyle = "rgb(0,0,255)"
-        // ctx.moveTo(width / 2, height / 2)
-        // ctx.lineTo(width / 2 + 50 * normal.x, height / 2 + 50 * normal.y)
-
-        // ctx.moveTo(box1.x, box1.y)
-        // ctx.lineTo(box1.x + normal.x * mvt, box1.y + normal.y * mvt)
-
         if (dot < 0) {
             normal.x = -normal.x
             normal.y = -normal.y
         }
 
+        if (satShape) { //axis is from box1
+            for 
+        } else { //axis is from box2
+
+        }
+
         ctx.beginPath()
         ctx.strokeStyle = "rgb(255,0,0)"
         ctx.moveTo(box1.x, box1.y)
@@ -365,7 +345,7 @@ function testBoxCollision(box1, box2) {
 
         // ctx.stroke()
 
-        return { colliding: true, mtx: mvt, normal: normal }
+        return { colliding: true, mtx: mvt, normal: normal, incidentFace: {} }
     } else {
         box2.color = "rgb(255,255,255)"
         return { colliding: false }
@@ -518,8 +498,8 @@ function loop(t) {
         closestBox.dy = mouseDelta.y * 50
     }
 
-    for (let c = 0; c < 8; c++) {
-        let cdt = dt / 8
+    for (let c = 0; c < 1; c++) {
+        let cdt = dt / 1
         calculatePhysics(cdt)
 
         for (let i = 0; i < boxes.length; i++) {
@@ -554,38 +534,38 @@ function loop(t) {
 function startup() {
     console.log("Starting simulation")
 
-    let newBox = new Box(
-        Math.random() * width,
-        Math.random() * height,
-        25 + Math.random() * 55,
-        25 + Math.random() * 55,
-        360 * Math.random(),
-        150 - Math.random() * 300,
-        150 - Math.random() * 300,
-        150 - Math.random() * 300)
-
-    newBox.m = 0
-    newBox.anchored = true
-
-    boxes.push(newBox)
-
-    for (let i = 0; i < 35; i++) {
-        boxes.push(new Box(
-            Math.random() * width,
-            Math.random() * height,
-            25 + Math.random() * 55,
-            25 + Math.random() * 55,
-            360 * Math.random(),
-            150 - Math.random() * 300,
-            150 - Math.random() * 300,
-            150 - Math.random() * 300))
-    }
-
-    // let boxa = new Box(width / 2, height / 2, 1000, 50, 0)
-    // boxa.anchored = true
-    // let boxb = new Box(width / 2, height / 2, 50, 50, 0)
-
-    // boxes.push(boxa, boxb)
+    // let newBox = new Box(
+    //     Math.random() * width,
+    //     Math.random() * height,
+    //     25 + Math.random() * 55,
+    //     25 + Math.random() * 55,
+    //     360 * Math.random(),
+    //     150 - Math.random() * 300,
+    //     150 - Math.random() * 300,
+    //     150 - Math.random() * 300)
+
+    // newBox.m = 0
+    // newBox.anchored = true
+
+    // boxes.push(newBox)
+
+    // for (let i = 0; i < 35; i++) {
+    //     boxes.push(new Box(
+    //         Math.random() * width,
+    //         Math.random() * height,
+    //         25 + Math.random() * 55,
+    //         25 + Math.random() * 55,
+    //         360 * Math.random(),
+    //         150 - Math.random() * 300,
+    //         150 - Math.random() * 300,
+    //         150 - Math.random() * 300))
+    // }
+
+    let boxa = new Box(width / 2, height / 2, 500, 50, 0)
+    boxa.anchored = true
+    let boxb = new Box(width / 2, height / 2, 50, 50, 0)
+
+    boxes.push(boxa, boxb)
     window.requestAnimationFrame(loop)
 }