From 1b68510ce00d41ee13e34a7e43b1bec0a2d16ace Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Fri, 30 Jul 2021 16:57:47 +0200 Subject: [PATCH] Implement package states (hidden, revealed, active) --- src/area.ts | 14 +++-- src/scenes/DetailScene.ts | 5 +- src/sketchObjects/Package.ts | 110 ++++++++++++++++++----------------- src/sketchObjects/Player.ts | 4 +- 4 files changed, 69 insertions(+), 64 deletions(-) diff --git a/src/area.ts b/src/area.ts index 1ca1563..fef4798 100644 --- a/src/area.ts +++ b/src/area.ts @@ -1,7 +1,7 @@ import { BehaviorSubject, Subject } from 'rxjs'; import { mp5 } from '../main'; -export const playerHeadPosition$ = new Subject<{ x: number; y: number }>(); +export const playerHead$ = new Subject<{ x: number; y: number; w: number }>(); export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: number }>({ x: 0, @@ -9,11 +9,13 @@ export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: numb w: 0, }); -export function pointIsRevealed( - point: { x: number; y: number }, - revealedArea: { x: number; y: number; w: number } +export function areasColliding( + areaOne: { x: number; y: number; w: number }, + areaTwo: { x: number; y: number; w: number }, + log?: boolean ): boolean { - const distanceBetweenPoints = mp5.dist(point.x, point.y, revealedArea.x, revealedArea.y); + const distanceBetweenPoints = mp5.dist(areaOne.x, areaOne.y, areaTwo.x, areaTwo.y); + const shapeArea = areaTwo.w / 2 + areaOne.w / 2; - return distanceBetweenPoints < revealedArea.w / 2; + return distanceBetweenPoints < shapeArea; } diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index 538862c..b75c99a 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -27,9 +27,9 @@ export class DetailScene { draw() { mp5.background(mp5.color(colors.greyLighter)); + this.player.drawOnReveal(); this.player.follow(); - this.player.move(); this.contributors.forEach((contributor) => { contributor.place(); @@ -38,9 +38,10 @@ export class DetailScene { legacyObj.place(); }); this.packages.forEach((packageObj) => { - packageObj.place(); packageObj.draw(); }); + + this.player.move(); } onSceneClick() { diff --git a/src/sketchObjects/Package.ts b/src/sketchObjects/Package.ts index b1568c2..dfe7255 100644 --- a/src/sketchObjects/Package.ts +++ b/src/sketchObjects/Package.ts @@ -1,80 +1,82 @@ import { combineLatest, map } from 'rxjs'; import { mp5 } from '../../main'; -import { playerHeadPosition$, pointIsRevealed, revealedArea$ } from '../area'; +import { playerHead$, areasColliding, revealedArea$ } from '../area'; import { colors } from '../constants/colors'; +enum PackageStates { + HIDDEN = 'HIDDEN', + REVEALED = 'REVEALED', + ACTIVE = 'ACTIVE', + INACTIVE = 'INACTIVE', +} + export class Package { x: number; y: number; size: number; name: string; - revealed: boolean; - active: boolean = false; + url: string; + corners: number = 10; startSize: number = 5; - currentSize: number = 5; + currentSize: number; + wasTouched: boolean = false; + packageState: PackageStates = PackageStates.HIDDEN; - constructor(x: number, y: number, size: number, name?: string, profileURL?: string) { + constructor(x: number, y: number, size: number, name?: string, packageURL?: string) { this.x = x; this.y = y; this.size = size; + this.name = name; + this.url = packageURL; + this.currentSize = this.startSize; - combineLatest([revealedArea$, playerHeadPosition$]).subscribe( - ([revealedArea, playerHeadPosition]) => { - const isRevealed = pointIsRevealed({ x: this.x, y: this.y }, revealedArea); - const isTouched = isRevealed - ? pointIsRevealed( - { x: this.x, y: this.y }, - { - x: playerHeadPosition.x, - y: playerHeadPosition.y, - w: 30, - } - ) - : false; + combineLatest([revealedArea$, playerHead$]).subscribe(([revealedArea, playerHead]) => { + const isRevealed = areasColliding( + { x: this.x, y: this.y, w: this.currentSize }, + revealedArea + ); + const isTouched = areasColliding({ x: this.x, y: this.y, w: this.size }, playerHead, true); - this.revealed = isRevealed; + if (this.wasTouched) { + this.packageState = PackageStates.ACTIVE; + } else if (isRevealed && !this.wasTouched) { + this.packageState = PackageStates.REVEALED; - if (this.active === false && isTouched) { - this.active = true; - console.log(this.active); + if (isTouched) { + this.wasTouched = true; } + } else { + this.packageState = PackageStates.HIDDEN; } - ); - } - public place() { - mp5.noStroke(); - mp5.rectMode('center'); - mp5.fill(mp5.color(colors.greyLight)); - mp5.rect(this.x, this.y, this.startSize, this.startSize); + // console.log(this.packageState); + }); } public draw() { - if (this.revealed && !this.active) { - this.drawRevealedShape(); - } else if ((this.active && this.revealed) || (!this.revealed && this.active)) { - this.drawActiveShape(); - } else { - this.drawUnrevealedShape(); + mp5.noStroke(); + + if (this.packageState === PackageStates.HIDDEN) { + // Scale down after it was revealed or active + if (this.currentSize > this.startSize) { + this.currentSize--; + } + + mp5.square(this.x, this.y, this.currentSize, this.corners); + } else if (this.packageState === PackageStates.REVEALED) { + // Scale up if not large enough + if (this.currentSize < this.size) { + this.currentSize++; + } + + mp5.square(this.x, this.y, this.currentSize, this.corners); + mp5.square(this.x - this.size - 10, this.y, this.currentSize, this.corners); + mp5.square(this.x, this.y - this.size - 10, this.currentSize, this.corners); + } else if (this.packageState === PackageStates.ACTIVE) { + mp5.fill(mp5.color(colors.redLight)); + mp5.square(this.x, this.y, this.currentSize, this.corners); + mp5.square(this.x - this.size - 10, this.y, this.currentSize, this.corners); + mp5.square(this.x, this.y - this.size - 10, this.currentSize, this.corners); } } - - private drawUnrevealedShape() { - mp5.rect(this.x, this.y, this.startSize, this.startSize); - } - - private drawRevealedShape() { - if (this.currentSize < this.size) { - this.currentSize++; - } else { - this.currentSize = this.size; - } - - mp5.rect(this.x, this.y, this.currentSize, this.currentSize); - } - - private drawActiveShape() { - mp5.fill(mp5.color(colors.redLight)); - mp5.rect(this.x, this.y, this.currentSize, this.currentSize); - } } diff --git a/src/sketchObjects/Player.ts b/src/sketchObjects/Player.ts index 1fbf983..79411ec 100644 --- a/src/sketchObjects/Player.ts +++ b/src/sketchObjects/Player.ts @@ -1,5 +1,5 @@ import { mp5 } from '../../main'; -import { playerHeadPosition$, revealedArea$ } from '../area'; +import { playerHead$, revealedArea$ } from '../area'; import { colors } from '../constants/colors'; export class Player { @@ -35,7 +35,7 @@ export class Player { this.drawPlayerTrail(); this.drawPlayerShape(this.x, this.y); - playerHeadPosition$.next({ x: this.x, y: this.y }); + playerHead$.next({ x: this.x, y: this.y, w: this.r }); } public move() {