Basic reveal mechanic

metadata/project.json

@@ -7,7 +7,11 @@
       "contents": {
         "contributors": [],
         "legacy": [],
-        "packages": []
+        "packages": [
+          {
+            "name": "react"
+          }
+        ]
       }
     }
   ]

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "animejs": "^3.2.1",
         "p5": "^1.4.0",
+        "rxjs": "^7.2.0",
         "zustand": "^3.5.7"
       },
       "devDependencies": {
@@ -7545,6 +7546,14 @@
         "inherits": "^2.0.1"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.2.0.tgz",
+      "integrity": "sha512-aX8w9OpKrQmiPKfT1bqETtUr9JygIz6GZ+gql8v7CijClsP0laoFUdKzxFAoWuRdSlOdU2+crss+cMf+cqMTnw==",
+      "dependencies": {
+        "tslib": "~2.1.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -8653,6 +8662,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+    },
     "node_modules/tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -15130,6 +15144,14 @@
         "inherits": "^2.0.1"
       }
     },
+    "rxjs": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.2.0.tgz",
+      "integrity": "sha512-aX8w9OpKrQmiPKfT1bqETtUr9JygIz6GZ+gql8v7CijClsP0laoFUdKzxFAoWuRdSlOdU2+crss+cMf+cqMTnw==",
+      "requires": {
+        "tslib": "~2.1.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -16032,6 +16054,11 @@
         }
       }
     },
+    "tslib": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "animejs": "^3.2.1",
     "p5": "^1.4.0",
+    "rxjs": "^7.2.0",
     "zustand": "^3.5.7"
   }
 }

src/area.ts

@@ -0,0 +1,7 @@
+import { BehaviorSubject } from 'rxjs';
+
+export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: number }>({
+  x: 0,
+  y: 0,
+  w: 0,
+});

src/helpers.ts

@@ -30,6 +30,13 @@ export function isColliding(
   );
 }
 
+export function shapeCollision(
+  firstShape: { x: number; y: number; w: number },
+  secondShape: { x: number; y: number; w: number }
+) {
+  return mp5.dist(firstShape.x, firstShape.y, secondShape.x, secondShape.y) < secondShape.w - 150;
+}
+
 export function generateEdgeCoords(existingEdges: Edge[]): Coordinates {
   let newCoords: Coordinates;
   const existingCoordinates = existingEdges.map(({ x, y }) => ({ x, y }));

src/scenes/DetailScene.ts

@@ -39,6 +39,7 @@ export class DetailScene {
     });
     this.packages.forEach((packageObj) => {
       packageObj.place();
+      packageObj.drawOnReveal();
     });
   }
 

src/sketchObjects/Package.ts

@@ -1,5 +1,8 @@
+import { asyncScheduler, distinct, distinctUntilKeyChanged, throttleTime } from 'rxjs';
 import { mp5 } from '../../main';
+import { revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
+import { shapeCollision } from '../helpers';
 
 export class Package {
   x: number;
@@ -12,10 +15,20 @@ export class Package {
     this.x = x;
     this.y = y;
     this.size = size;
+
+    revealedArea$.subscribe((revealedArea) => {
+      this.revealed = shapeCollision({ x: this.x, y: this.y, w: 10 }, revealedArea);
+    });
   }
 
   public place() {
     mp5.fill(mp5.color(colors.redDark));
+    mp5.ellipse(this.x, this.y, 10);
+  }
+
+  public drawOnReveal() {
+    if (this.revealed) {
       mp5.ellipse(this.x, this.y, this.size);
     }
   }
+}

src/sketchObjects/Player.ts

@@ -1,4 +1,5 @@
 import { mp5 } from '../../main';
+import { revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
 
 export class Player {
@@ -43,7 +44,6 @@ export class Player {
     const { x, y } = this.lastTrailEl;
 
     if (x && y) {
-      console.log('Drawing');
       this.showRevealEl = true;
       this.revealElCoordinates = { x, y };
       this.cursorOnRevealClick = { x: mp5.mouseX, y: mp5.mouseY };
@@ -55,17 +55,20 @@ export class Player {
     const timeElapsedSinceRevealClick = mp5.millis() - this.lastRevealClickTime;
 
     if (this.showRevealEl) {
+      const x = this.cursorOnRevealClick.x;
+      const y = this.cursorOnRevealClick.y;
+      const w = Math.floor(timeElapsedSinceRevealClick * 0.4);
+
       mp5.fill(mp5.color(colors.greyLighter));
       mp5.strokeWeight(5);
       mp5.stroke(mp5.color(255));
-      mp5.ellipse(
-        this.cursorOnRevealClick.x,
-        this.cursorOnRevealClick.y,
-        timeElapsedSinceRevealClick * 0.4
-      );
+      mp5.ellipse(x, y, w);
+
+      revealedArea$.next({ x, y, w });
 
       if (timeElapsedSinceRevealClick > 2000) {
         this.showRevealEl = false;
+        revealedArea$.next({ x: 0, y: 0, w: 0 });
       }
     }
   }