space - wip

HoangTran0410 · Feb 26, 2023 · aa7422f · aa7422f
1 parent 3c2389a
commit aa7422f
Show file tree

Hide file tree

Showing 13 changed files with 917 additions and 10 deletions.
diff --git a/2022/gungame3/README.md b/2022/gungame3/README.md
@@ -1 +1,3 @@
-animejs-test
+# Gun game 3 (test)
+
+[Demo](https://hoangtran0410.github.io/p5js-playground/2022/gungame3/)
diff --git a/2023/space/README.md b/2023/space/README.md
@@ -0,0 +1,3 @@
+# Space simulator
+
+[Demo](https://hoangtran0410.github.io/p5js-playground/2023/space/)
diff --git a/2023/space/index.html b/2023/space/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <meta charset="utf-8" />
+
+  <title>Space</title>
+
+</head>
+
+<body>
+  <script type="module" src="index.js"></script>
+</body>
+
+</html>
diff --git a/2023/space/index.js b/2023/space/index.js
@@ -0,0 +1,121 @@
+import * as f from "./js/main.js";
+
+for (let key in f) {
+  window[key] = f[key];
+}
+
+// let cloud;
+
+// function setup() {
+//   createCanvas(400, 400);
+//   rectMode(CENTER);
+
+//   cloud = new Cloud(width / 2, height / 2, 200, 100);
+// }
+
+// function draw() {
+//   background(30);
+
+//   cloud.update();
+//   cloud.draw();
+// }
+
+// class Cloud {
+//   constructor(x, y, w, h) {
+//     this.x = x;
+//     this.y = y;
+//     this.w = w;
+//     this.h = h;
+
+//     this.bubbles = [];
+//     for (let i = 0; i < 20; i++) {
+//       let x = random(this.x - this.w / 2, this.x + this.w / 2);
+//       let y = random(this.y - this.h / 2, this.y + this.h / 2);
+//       let r = random(15, 30);
+//       this.bubbles.push({ x, y, r });
+//     }
+
+//     this.noise = [random(100), random(100)];
+//   }
+
+//   update() {
+//     // move bubbles using perlin noise, but still inside the cloud
+//     for (let bubble of this.bubbles) {
+//       let xoff = map(
+//         this.noise[0],
+//         this.x - this.w / 2,
+//         this.x + this.w / 2,
+//         0,
+//         10
+//       );
+//       let yoff = map(
+//         this.noise[1],
+//         this.y - this.h / 2,
+//         this.y + this.h / 2,
+//         0,
+//         10
+//       );
+//       let angle = noise(xoff, yoff) * TWO_PI * 4;
+//       bubble.x += cos(angle);
+//       bubble.y += sin(angle);
+
+//       // still inside the cloud, appear in center if outside
+//       if (bubble.x < this.x - this.w / 2 || bubble.x > this.x + this.w / 2) {
+//         bubble.x = this.x;
+//       }
+//       if (bubble.y < this.y - this.h / 2 || bubble.y > this.y + this.h / 2) {
+//         bubble.y = this.y;
+//       }
+//     }
+
+//     this.noise[0] += 0.01;
+//     this.noise[1] += 0.02;
+//   }
+
+//   draw() {
+//     stroke(200, 100);
+//     noFill();
+//     rect(this.x, this.y, this.w, this.h);
+
+//     noStroke();
+
+//     // color will more alpha when closer to the edge
+//     for (let bubble of this.bubbles) {
+//       let alpha = map(
+//         dist(this.x, this.y, bubble.x, bubble.y),
+//         0,
+//         sqrt(sq(this.w / 2) + sq(this.h / 2)),
+//         255,
+//         0
+//       );
+//       fill(255, alpha);
+//       ellipse(bubble.x, bubble.y, bubble.r * 2);
+//     }
+//   }
+// }
+
+// let xoff;
+
+// function setup() {
+//   createCanvas(500, 400);
+//   xoff = 0;
+// }
+
+// function draw() {
+//   background(30);
+
+//   noStroke();
+//   fill(255);
+//   for (let i = 0; i < 20; i++) {
+//     // calculate the new position using Perlin noise
+//     let noiseX = noise(xoff + i);
+//     let noiseY = noise(xoff + i + 100);
+//     let x = map(noiseX, 0, 1, 0, width);
+//     let y = map(noiseY, 0, 1, 0, height);
+
+//     // draw the circle
+//     ellipse(x, y, 100, 100);
+//   }
+//   // increment the xoff
+//   xoff += 0.005;
+// }
diff --git a/2023/space/js/camera.js b/2023/space/js/camera.js
@@ -0,0 +1,99 @@
+export default class Camera {
+  constructor({
+    position = createVector(width / 2, height / 2),
+    target = null, // target is a gameObject's position
+    isFollow = true,
+    followLerp = 0.1,
+    scale = 1,
+    scaleTo = 1,
+    scaleLerp = 0.07,
+    borderSize = 25,
+    borderSpeed = 30,
+  } = {}) {
+    // default value
+    this.position = position;
+    this.target = target;
+    this.isFollow = isFollow;
+    this.followLerp = followLerp;
+    this.scale = scale;
+    this.scaleTo = scaleTo;
+    this.scaleLerp = scaleLerp;
+    this.borderSize = borderSize;
+    this.borderSpeed = borderSpeed;
+  }
+
+  update() {
+    // update scale
+    this.scale = lerp(this.scale, this.scaleTo, this.scaleLerp);
+
+    // follow target
+    if (this.isFollow) {
+      this.position = p5.Vector.lerp(
+        this.position,
+        this.target,
+        this.followLerp
+      );
+    }
+
+    // move camera on edge
+    else if (this.isMouseOnEdge()) {
+      let vec = createVector(
+        mouseX - width * 0.5,
+        mouseY - height * 0.5
+      ).setMag(this.borderSpeed);
+      this.position.add(vec);
+    }
+  }
+
+  beginState() {
+    push();
+    translate(width * 0.5, height * 0.5);
+    scale(this.scale);
+    translate(-this.position.x, -this.position.y);
+  }
+
+  endState() {
+    pop();
+  }
+
+  follow(target, immediately) {
+    this.target = target;
+
+    if (immediately) this.position.set(target.x, target.y);
+  }
+
+  getViewport() {
+    let topLeftCanvas = this.canvasToWorld(0, 0);
+    let bottomRightCanvas = this.canvasToWorld(width, height);
+
+    return {
+      x: topLeftCanvas.x,
+      y: topLeftCanvas.y,
+      w: bottomRightCanvas.x - topLeftCanvas.x,
+      h: bottomRightCanvas.y - topLeftCanvas.y,
+    };
+  }
+
+  canvasToWorld(canvasX, canvasY) {
+    let worldX = (canvasX - width * 0.5) / this.scale + this.position.x;
+    let worldY = (canvasY - height * 0.5) / this.scale + this.position.y;
+
+    return createVector(worldX, worldY);
+  }
+
+  worldToCanvas(worldX, worldY) {
+    let canvasX = (worldX - this.position.x) * this.scale + width * 0.5;
+    let canvasY = (worldY - this.position.y) * this.scale + height * 0.5;
+
+    return createVector(canvasX, canvasY);
+  }
+
+  isMouseOnEdge() {
+    return (
+      mouseX > width - this.borderSize ||
+      mouseX < this.borderSize ||
+      mouseY > height - this.borderSize ||
+      mouseY < this.borderSize
+    );
+  }
+}
diff --git a/2023/space/js/main.js b/2023/space/js/main.js
@@ -0,0 +1,79 @@
+import StarField from "./starField.js";
+import Ship from "./ship.js";
+import Camera from "./camera.js";
+import Planet from "./planet.js";
+
+let starField,
+  ship,
+  cam,
+  planets = [];
+
+export function setup() {
+  createCanvas(windowWidth, windowHeight);
+
+  ship = new Ship();
+
+  cam = new Camera();
+  cam.follow(ship.position);
+
+  starField = new StarField(500, cam);
+
+  // create 10 planets, not overlapping
+  for (let i = 0; i < 10; i++) {
+    let x, y, r;
+    do {
+      x = random(-width * 3, width * 3);
+      y = random(-height * 3, height * 3);
+      r = random(100, 500);
+    } while (planets.some((p) => p.overlaps(x, y, r * 2)));
+    planets.push(new Planet(x, y, r));
+  }
+}
+
+export function draw() {
+  background(30);
+
+  starField.update();
+  starField.draw();
+
+  cam.update();
+  cam.beginState();
+
+  for (let planet of planets) {
+    let d = p5.Vector.dist(planet.position, ship.position);
+    if (d < planet.radius * 2) {
+      planet.gravity(ship);
+      ship.collide(planet);
+    }
+
+    planet.update();
+    planet.show();
+  }
+
+  ship.update();
+  ship.show();
+
+  cam.endState();
+
+  if (keyIsDown(UP_ARROW)) {
+    ship.boost(0.6);
+  }
+  if (keyIsDown(LEFT_ARROW)) {
+    ship.turn(-0.05);
+  }
+  if (keyIsDown(RIGHT_ARROW)) {
+    ship.turn(0.05);
+  }
+}
+
+export function keyPressed() {}
+
+export function keyReleased() {
+  if (keyCode == UP_ARROW) {
+    ship.boost(0);
+  }
+}
+
+export function windowResized() {
+  resizeCanvas(windowWidth, windowHeight, true);
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Space simulator

		[Demo](https://hoangtran0410.github.io/p5js-playground/2023/space/)