🌈 fixed p5.Vector related bugs, modified some styles

[0xs1r4t]

A fix for the p5 and next window is not defined build error

I added a Point class to define the points that form the trail. Previously named PastelDreams.tsx, I renamed it to something more direct, so I settled for Trail.tsx. One point follows the mouse, and others follow right behind, with modified distances, velocities and linear interpolation to display a smooth trail across the canvas.

class Point {
      distance: Vector;
      velocity: Vector;
      ease: number;

      constructor(
        public points: Vector[],
        public num: number,
        public x: number,
        public y: number
      ) {
        this.points.length = num;
        this.distance = p.createVector(0, 0);
        this.velocity = p.createVector(0, 0);
        this.ease = 0.5;
      }

      // math to create the trail of points
      public createTrail(i: number, leader: Vector) {
        this.distance.x = leader.x - this.points[i].x;
        this.distance.y = leader.y - this.points[i].y;
        this.velocity = this.distance.mult(this.ease);
        this.points[i].add(this.velocity);
        // hue = value
        // saturation = (num - i + 5) / 3 or 28
        // brightness = 90
        // alpha = (num - i) * 1.25
        p.fill(value, (num - i + 5) / 3, 90, (num - i) * 1.25);
        p.ellipse(this.points[i].x, this.points[i].y, 25, 25);
        this.velocity.lerp(this.distance, this.ease);
      }
    }

The p5-wrapper package for react doesn't work well with Vectors since the P5CanvasInstance provided in the library doesn't recognise the methods used with p5.Vector. The best way to prevent this from causing issues was to use these methods via a constructor, as mentioned in #182. Once this PR is merged, the changes should fix that issue.

Enhancements

Trail.tsx

I changed some minor details in the trail's colours to:

1. Reverse the saturation
2. Reverse the alpha
3. Increase the brightness of each point

globals.css

1. Changed the colours from black and white to shades of pink and purple - This is a temporary change, and I'm not sure if I should eventually integrate other themes
2. Changed the pointer to an animated pointer - I used this on a previous iteration of my website and it looks cute

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sirat	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 19, 2024 9:01pm

[0xs1r4t]

Built successfully on Vercel.

I am receiving ERROR 5XX with the digital garden search since I changed the criteria for it and all my posts are private, so that still needs modification. All window related issues have been eliminated for now.