From 4b99a1c26e5a9b377f5cb8abc5ff4db9ec39e32c Mon Sep 17 00:00:00 2001
From: Zakarya <zakarya@colormatic.org>
Date: Wed, 2 Apr 2025 19:49:37 -0700
Subject: [PATCH] Fix oversights in bg renderer

So it turns out the performance improvements were completelty neglected
because my code is bad. The buffer wasn't getting rendered to the canvas
in the best way, and there were too many particles for smaller screens.
I have now added a simple math equasion to the init function that
decides how many particles are needed based on the display size. It
still needs a lot of tweaking, and a more complex function is probably
necessary for good results. I'm still trying to get this background to
not suck and actually look good.
---
 src/component/bg.svelte | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/component/bg.svelte b/src/component/bg.svelte
index 0948b7b..abcd4b6 100644
--- a/src/component/bg.svelte
+++ b/src/component/bg.svelte
@@ -234,10 +234,10 @@
       // One-shot buffer adjustment
       this.renderingBuffer.width = this.radius * 2;
       this.renderingBuffer.height = this.radius * 2;
-      canvasDpiScaler(
-        this.renderingBuffer,
-        this.renderingBuffer.getContext("2d") as CanvasRenderingContext2D,
-      );
+      // canvasDpiScaler(
+      //   this.renderingBuffer,
+      //   this.renderingBuffer.getContext("2d") as CanvasRenderingContext2D,
+      // );
       this.prepareBuffer();
     }
 
@@ -276,17 +276,25 @@
     }
 
     draw() {
-      ctx.drawImage(
-        this.renderingBuffer,
-        this.x - this.radius,
-        this.y - this.radius,
-      );
+      ctx.save();
+      ctx.translate(this.x - this.radius, this.y - this.radius);
+      ctx.drawImage(this.renderingBuffer, 0, 0);
+      ctx.restore();
     }
   }
 
   function init() {
+    /*/
+     * Calculate the proper amount of particles
+     * 25920 is our constant, equal to x in (1080*1920)/x = 80
+     * Because the subjectively correct amount of particles for a 1080p
+     * display is 80, so to calculate the proper amount for any window size,
+     * just do (width * height) / 25920
+    /*/
+    let particleCount = (window.innerWidth * window.innerHeight) / 25920;
+
     particlesArray = [];
-    for (let i = 0; i < 50; i++) {
+    for (let i = 0; i < particleCount; i++) {
       particlesArray.push(new Particle());
     }
     gradientsArray = [];