72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { mp5 } from '../../main';
|
|
import { colors } from '../constants/colors';
|
|
|
|
export class Player {
|
|
x: number;
|
|
y: number;
|
|
r: number;
|
|
easing: number;
|
|
history: Array<{ x: number; y: number }> = [];
|
|
|
|
constructor() {
|
|
this.x = mp5.height / 2;
|
|
this.y = mp5.width / 2;
|
|
this.r = 30;
|
|
this.easing = 0.06;
|
|
}
|
|
|
|
public follow() {
|
|
const targetX = mp5.mouseX;
|
|
const deltaX = targetX - this.x;
|
|
this.x += deltaX * this.easing;
|
|
|
|
const targetY = mp5.mouseY;
|
|
const deltaY = targetY - this.y;
|
|
this.y += deltaY * this.easing;
|
|
|
|
this.storeInHistory({ x: this.x, y: this.y });
|
|
|
|
this.drawPlayerTrail();
|
|
this.drawPlayerShape(this.x, this.y);
|
|
}
|
|
|
|
public move() {
|
|
this.drawCursorIndicator(mp5.mouseX, mp5.mouseY, 4);
|
|
}
|
|
|
|
private drawPlayerShape(x: number, y: number) {
|
|
mp5.fill(mp5.color(colors.grey));
|
|
mp5.noStroke();
|
|
mp5.ellipse(x, y, this.r);
|
|
}
|
|
|
|
private drawTrailElement(x: number, y: number, r: number) {
|
|
mp5.noStroke();
|
|
mp5.fill(mp5.color(colors.greyLight));
|
|
mp5.ellipse(x, y, r);
|
|
}
|
|
|
|
private drawPlayerTrail() {
|
|
const immediateHistory = this.history.slice(1).slice(-30);
|
|
|
|
immediateHistory.forEach((pointInHistory, i) => {
|
|
if (i % 5 === 0) {
|
|
this.drawTrailElement(pointInHistory.x, pointInHistory.y, 2 * i);
|
|
}
|
|
});
|
|
}
|
|
|
|
private drawCursorIndicator(x: number, y: number, size: number) {
|
|
mp5.strokeWeight(2);
|
|
mp5.stroke(mp5.color(colors.black));
|
|
mp5.line(x - size, y + size, x + size, y - size);
|
|
mp5.line(x + size, y - size, x - size, y + size);
|
|
mp5.line(x + size, y + size, x - size, y - size);
|
|
mp5.line(x - size, y - size, x + size, y + size);
|
|
}
|
|
|
|
private storeInHistory(coordinates: { x: number; y: number }) {
|
|
const lastPositionVector = mp5.createVector(coordinates.x, coordinates.y);
|
|
this.history.push(lastPositionVector);
|
|
}
|
|
}
|