From 4ffbe45ab1818baf2ad71d09d8663006bb01f849 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Fri, 25 Aug 2023 21:54:26 +0200
Subject: [PATCH] Upgrade particle rendering (fix cos/sin being in wrong order)

---
 public/fishie.png                 | Bin 0 -> 314 bytes
 src/components/utils/Lightbar.tsx |  59 +++++++++++++++++++++---------
 2 files changed, 42 insertions(+), 17 deletions(-)
 create mode 100644 public/fishie.png

diff --git a/public/fishie.png b/public/fishie.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c528ba4e6948ae5a6b68a752a6e7207fbaa1e81
GIT binary patch
literal 314
zcmeAS@N?(olHy`uVBq!ia0vp^Qb5eZ!3HF2j;{3pQk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>m487srqa#=TP-d7BIbT-P6ClxP$zV7hxi
zw1nv~%LdLh57?|2a~PyA@SdyJoK@w;+xlVhbhWp4|C;T+HbKZ(UBWMc-)KVBY2FtH
zc<=NY%Cf3#6-fS?!sRt@S<ojppQ3;lCwaceED!s1we5A{+6(HPrj;w@U&Z{`eC>7y
zchQ6kHlB69jaJe{;`>{gW{WC&YkTxaMY(;Oe{trs`CgyOA4v5iUB9P$+;f-D_VU%c
z`$8O!UJm*6qgl5``SWRk!;CT~Ywc%lzcX?7W%d>O_Dye?_d#rC5%bo4`+;6#@O1Ta
JS?83{1OTtOc@qEt

literal 0
HcmV?d00001

diff --git a/src/components/utils/Lightbar.tsx b/src/components/utils/Lightbar.tsx
index a1ca0fe6..a01b725e 100644
--- a/src/components/utils/Lightbar.tsx
+++ b/src/components/utils/Lightbar.tsx
@@ -16,7 +16,14 @@ class Particle {
 
   ran = 0;
 
-  constructor(canvas: HTMLCanvasElement) {
+  image: null | HTMLImageElement = null;
+
+  constructor(canvas: HTMLCanvasElement, { doFish } = { doFish: false }) {
+    if (doFish) {
+      this.image = new Image();
+      if (this.image) this.image.src = "/fishie.png";
+    }
+
     this.reset(canvas);
     this.initialize(canvas);
   }
@@ -26,12 +33,17 @@ class Particle {
     this.y = Math.random() * 100 + 5;
 
     this.radius = 1 + Math.floor(Math.random() * 0.5);
-    this.direction = -((Math.random() * Math.PI) / 2) + Math.PI / 4;
+    this.direction = (Math.random() * Math.PI) / 2 + Math.PI / 4;
     this.speed = 0.02 + Math.random() * 0.08;
 
     const second = 60;
     this.lifetime = second * 3 + Math.random() * (second * 30);
 
+    if (this.image) {
+      this.direction = Math.random() <= 0.5 ? 0 : Math.PI;
+      this.lifetime = 30 * second;
+    }
+
     this.ran = 0;
   }
 
@@ -46,8 +58,8 @@ class Particle {
   update(canvas: HTMLCanvasElement) {
     this.ran += 1;
 
-    const addX = this.speed * Math.sin(this.direction);
-    const addY = this.speed * Math.cos(this.direction);
+    const addX = this.speed * Math.cos(this.direction);
+    const addY = this.speed * Math.sin(this.direction);
     this.x += addX;
     this.y += addY;
 
@@ -67,17 +79,25 @@ class Particle {
     const o = (x - x * x) * 4;
     ctx.globalAlpha = Math.max(0, o * 0.8);
 
-    ctx.ellipse(
-      this.x,
-      this.y,
-      this.radius,
-      this.radius * 1.5,
-      this.direction,
-      0,
-      Math.PI * 2
-    );
-    ctx.fillStyle = "white";
-    ctx.fill();
+    if (this.image) {
+      ctx.translate(this.x, this.y);
+      const w = 10;
+      const h = (this.image.naturalWidth / this.image.naturalHeight) * w;
+      ctx.rotate(this.direction - Math.PI);
+      ctx.drawImage(this.image, -w / 2, h, h, w);
+    } else {
+      ctx.ellipse(
+        this.x,
+        this.y,
+        this.radius,
+        this.radius * 1.5,
+        this.direction,
+        0,
+        Math.PI * 2
+      );
+      ctx.fillStyle = "white";
+      ctx.fill();
+    }
     ctx.restore();
   }
 }
@@ -93,8 +113,13 @@ function ParticlesCanvas() {
     canvas.width = canvas.scrollWidth;
     canvas.height = canvas.scrollHeight;
 
-    for (let i = 0; i < 20; i += 1) {
-      const particle = new Particle(canvas);
+    const shouldShowFishie = Math.floor(Math.random() * 600) === 1;
+    const particleCount = 20;
+
+    for (let i = 0; i < particleCount; i += 1) {
+      const particle = new Particle(canvas, {
+        doFish: shouldShowFishie && i <= particleCount / 2,
+      });
       particles.push(particle);
     }