dennis/codewanderer
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement reveal bubbles on click

Browse source
This commit is contained in:
Dennis Schoepf 2021-07-25 15:22:34 +02:00
parent db39a8cb42
commit 7e634917bf
3 changed files with 47 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/sketchObjects/Player.ts
View file

@ -7,6 +7,11 @@ export class Player {
r: number;
easing: number;
history: Array<{ x: number; y: number }> = [];
lastTrailEl: { x: number; y: number };
cursorOnRevealClick: { x: number; y: number };
showRevealEl: boolean;
revealElCoordinates: { x: number; y: number };
lastRevealClickTime: number;
constructor() {
this.x = mp5.height / 2;
@ -34,6 +39,37 @@ export class Player {
this.drawCursorIndicator(mp5.mouseX, mp5.mouseY, 4);
}
public reveal() {
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 };
this.lastRevealClickTime = mp5.millis();
}
}
public drawOnReveal() {
const timeElapsedSinceRevealClick = mp5.millis() - this.lastRevealClickTime;
if (this.showRevealEl) {
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
);
if (timeElapsedSinceRevealClick > 2000) {
this.showRevealEl = false;
}
}
}
private drawPlayerShape(x: number, y: number) {
mp5.fill(mp5.color(colors.grey));
mp5.noStroke();
@ -48,6 +84,11 @@ export class Player {
private drawPlayerTrail() {
const immediateHistory = this.history.slice(1).slice(-30);
const lastTrailElPosition = immediateHistory[0];
if (lastTrailElPosition) {
this.lastTrailEl = lastTrailElPosition;
}
immediateHistory.forEach((pointInHistory, i) => {
if (i % 5 === 0) {