demo p5js core logic (WIP)

LOL2D · Oct 20, 2022 · c120502 · c120502
1 parent 061fdb9
commit c120502
Show file tree

Hide file tree

Showing 10 changed files with 298 additions and 0 deletions.
diff --git a/client-p5js/index.html b/client-p5js/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LOL2D</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
+</head>
+
+<body>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/client-p5js/main.js b/client-p5js/main.js
diff --git a/core/README.md b/core/README.md
@@ -0,0 +1 @@
+Core here
diff --git a/core/index.js b/core/index.js
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LOL2D</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
+    <style>
+        body,
+        html {
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    </style>
+</head>
+
+<body>
+    <script type="module" src="index.js"></script>
+</body>
+
+</html>
diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,5 @@
+import * as F from "./js/sketch.js";
+
+for (let key in F) {
+  window[key] = F[key];
+}
diff --git a/demo/js/GameObject/GameObject.js b/demo/js/GameObject/GameObject.js
@@ -0,0 +1,42 @@
+import { Vec2 } from "../utils/Vec2.js";
+
+export class GameObject {
+  constructor(
+    game,
+    position = new Vec2(),
+    collisionRadius = 40,
+    pathingRadius = 40,
+    visionRadius = 0,
+    team = null
+  ) {
+    this.game = game;
+    this.position = position;
+    this.direction = new Vec2();
+    this.collisionRadius = collisionRadius;
+    this.pathingRadius = pathingRadius;
+    this.visionRadius = visionRadius;
+    this.team = team;
+
+    this.#toRemove = false;
+  }
+
+  onAdded() {}
+
+  update() {}
+
+  lateUpdate() {}
+
+  isToRemove() {
+    return this.#toRemove;
+  }
+
+  setToRemove() {
+    this.#toRemove = true;
+  }
+
+  onRemoved() {}
+
+  setPosition(x, y) {
+    this.position.set(x, y);
+  }
+}
diff --git a/demo/js/sketch.js b/demo/js/sketch.js
@@ -0,0 +1,11 @@
+import { GameObject } from "./GameObject/GameObject.js";
+
+export function setup() {
+  createCanvas(600, 500);
+
+  let a = new GameObject();
+}
+
+export function draw() {
+  background(30);
+}
diff --git a/demo/js/utils/Vec2.js b/demo/js/utils/Vec2.js
@@ -0,0 +1,99 @@
+// https://gist.github.com/jjgrainger/808640fcb5764cf92c3cad960682c677
+
+export class Vec2 {
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+
+  set(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  // return the angle of the vector in radians
+  getDirection() {
+    return Math.atan2(this.y, this.x);
+  }
+
+  // set the direction of the vector in radians
+  setDirection(angle) {
+    var magnitude = this.getMagnitude();
+    this.x = Math.cos(angle) * magnitude;
+    this.y = Math.sin(angle) * magnitude;
+  }
+
+  // get the magnitude of the vector
+  getMagnitude() {
+    // use pythagoras theorem to work out the magnitude of the vector
+    return Math.sqrt(this.x * this.x + this.y * this.y);
+  }
+
+  // set the magnitude of the vector
+  setMagnitude(magnitude) {
+    var direction = this.getDirection();
+    this.x = Math.cos(direction) * magnitude;
+    this.y = Math.sin(direction) * magnitude;
+  }
+
+  // add two vectors together and return a new one
+  add(v2) {
+    return new Vec2(this.x + v2.x, this.y + v2.y);
+  }
+
+  // add a vector to this one
+  addTo(v2) {
+    this.x += v2.x;
+    this.y += v2.y;
+  }
+
+  // subtract two vectors and reutn a new one
+  subtract(v2) {
+    return new Vec2(this.x - v2.x, this.y - v2.y);
+  }
+
+  // subtract a vector from this one
+  subtractFrom(v2) {
+    this.x -= v2.x;
+    this.y -= v2.y;
+  }
+
+  // multiply this vector by a scalar and return a new one
+  multiply(scalar) {
+    return new Vec2(this.x * scalar, this.y * scalar);
+  }
+
+  // multiply this vector by the scalar
+  multiplyBy(scalar) {
+    this.x *= scalar;
+    this.y *= scalar;
+  }
+
+  // scale this vector by scalar and return a new vector
+  divide(scalar) {
+    return new Vec2(this.x / scalar, this.y / scalar);
+  }
+
+  // scale this vector by scalar
+  divideBy(scalar) {
+    this.x /= scalar;
+    this.y /= scalar;
+  }
+
+  copy() {
+    return new Vec2(this.x, this.y);
+  }
+
+  // dot product of two vectors
+  dotProduct(v2) {
+    return this.x * v2.x + this.y * v2.y;
+  }
+
+  // normalize a given vector
+  normalize() {
+    return new Vec2(
+      this.x / Math.sqrt(this.x * this.x + this.y * this.y),
+      this.y / Math.sqrt(this.x * this.x + this.y * this.y)
+    );
+  }
+}
diff --git a/demo/js/utils/Vector.js b/demo/js/utils/Vector.js
@@ -0,0 +1,96 @@
+// https://radzion.com/blog/linear-algebra/vectors
+
+export const toDegrees = (radians) => (radians * 180) / Math.PI;
+export const toRadians = (degrees) => (degrees * Math.PI) / 180;
+
+export class Vector {
+  constructor(...components) {
+    this.components = components;
+  }
+
+  add({ components }) {
+    return new Vector(
+      ...components.map(
+        (component, index) => this.components[index] + component
+      )
+    );
+  }
+
+  subtract({ components }) {
+    return new Vector(
+      ...components.map(
+        (component, index) => this.components[index] - component
+      )
+    );
+  }
+
+  scaleBy(number) {
+    return new Vector(
+      ...this.components.map((component) => component * number)
+    );
+  }
+
+  length() {
+    return Math.hypot(...this.components);
+  }
+
+  dotProduct({ components }) {
+    return components.reduce(
+      (acc, component, index) => acc + component * this.components[index],
+      0
+    );
+  }
+
+  normalize() {
+    return this.scaleBy(1 / this.length());
+  }
+
+  haveSameDirectionWith(other) {
+    const dotProduct = this.normalize().dotProduct(other.normalize());
+    return areEqual(dotProduct, 1);
+  }
+
+  haveOppositeDirectionTo(other) {
+    const dotProduct = this.normalize().dotProduct(other.normalize());
+    return areEqual(dotProduct, -1);
+  }
+
+  isPerpendicularTo(other) {
+    const dotProduct = this.normalize().dotProduct(other.normalize());
+    return areEqual(dotProduct, 0);
+  }
+
+  // 3D vectors only
+  crossProduct({ components }) {
+    return new Vector(
+      this.components[1] * components[2] - this.components[2] * components[1],
+      this.components[2] * components[0] - this.components[0] * components[2],
+      this.components[0] * components[1] - this.components[1] * components[0]
+    );
+  }
+
+  angleBetween(other) {
+    return toDegrees(
+      Math.acos(this.dotProduct(other) / (this.length() * other.length()))
+    );
+  }
+
+  negate() {
+    return this.scaleBy(-1);
+  }
+
+  projectOn(other) {
+    const normalized = other.normalize();
+    return normalized.scaleBy(this.dotProduct(normalized));
+  }
+
+  withLength(newLength) {
+    return this.normalize().scaleBy(newLength);
+  }
+
+  equalTo({ components }) {
+    return components.every((component, index) =>
+      areEqual(component, this.components[index])
+    );
+  }
+}