Implement Player

main.ts

@@ -1,15 +1,23 @@
 import p5 from 'p5';
+import { colors } from './src/colors';
 import { SCREEN_WIDTH, SCREEN_HEIGHT } from './src/constants';
+import { Player } from './src/Player';
 
 const sketch = (s) => {
+  let player;
+
   s.setup = () => {
     s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
+    s.noCursor();
+
+    player = new Player();
   };
+
   s.draw = () => {
-    s.background(220);
+    s.background(s.color(colors.greyLighter));
-    s.rect(200, 200, 200, 200);
+
-    s.print(s.mouseX, s.mouseY);
+    player.follow();
   };
 };
 
-const p5Instance = new p5(sketch);
+export const mp5 = new p5(sketch);

package.json

@@ -10,6 +10,7 @@
     "build": "parcel build index.html"
   },
   "devDependencies": {
+    "@types/p5": "^1.3.0",
     "parcel-bundler": "^1.12.5",
     "prettier": "^2.3.2",
     "sass": "^1.35.2",

src/Player.ts

@@ -1,13 +1,68 @@
+import { mp5 } from '../main';
+import { colors } from './colors';
+
 export class Player {
   x: number;
   y: number;
-  sketch: any;
+  r: number;
+  easing: number;
+  history: Array<{ x: number; y: number }> = [];
 
-  constructor(sketch: any, x: number, y: number) {
+  constructor() {
-    this.sketch = sketch;
+    this.x = mp5.height / 2;
-    this.x = x;
+    this.y = mp5.width / 2;
-    this.y = y;
+    this.r = 30;
+    this.easing = 0.06;
   }
 
-  draw() {}
+  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);
+    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.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);
+  }
 }

src/colors.ts

@@ -7,4 +7,5 @@ export const colors: { [key: string]: string } = {
   redLight: '#BF2431',
   red: '#A60303',
   redDark: '#590C13',
+  black: '#0D0D0D',
 };

yarn.lock

@@ -960,6 +960,11 @@
     "@parcel/utils" "^1.11.0"
     physical-cpu-count "^2.0.0"
 
+"@types/p5@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/p5/-/p5-1.3.0.tgz#7c3254961b176d7f87060c5352ec25ddb2478f9c"
+  integrity sha512-Bdaq60LErR9DD8083HpSFs7EoNcrsIZTp7xm7tCn4f7frT83gaeAR31tMFIdX02IS1oCKuKOHOadQvbYXHwZPg==
+
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"