Disable BG animation

I've made the tough decision to disable the BG animation by default.
It's just to heavy on performance and is somewhat distracting for some
people. I'm planning on making a toggle on it, but I'm not sure that
will be done by the next release.

src/component/bg.svelte

@@ -7,15 +7,22 @@
 
   let { darkTheme = $bindable() } = $props();
   let timeScale = 1;
+  let animated = false;
 
   $effect(() => {
     darkTheme;
 
     for (let i = 0; i < gradients.length; i++) {
+      // This re-renders each gradient so their new color will be correct
       let gradient = gradients[i];
       gradient.color = getRandomColor();
       gradient.prepareBuffer();
     }
+
+    if (!animated && ctx) {
+      // Don't try to render if ctx hasn't initialized yet
+      render();
+    }
   });
 
   let particleImages: { [key: string]: HTMLImageElement } = {};
@@ -58,8 +65,13 @@
         return {};
       });
 
+    Promise.all(Object.values(imagePromises)).then(() => {
+      render();
+    });
+
     resize();
     init();
+    render();
     animate();
 
     window.addEventListener("resize", resize);
@@ -70,6 +82,10 @@
     canvas.height = window.innerHeight;
 
     canvasDpiScaler(canvas, ctx);
+
+    if (!animated) {
+      render();
+    }
   }
 
   const clamp = (val: number, min: number, max: number) =>
@@ -190,7 +206,7 @@
       ctx.save();
       // The source images are black, so we are inverting them
       // different amounts to get different shades of gray
-      ctx.filter = darkTheme ? "invert(0.15)" : "invert(0.8)";
+      ctx.filter = darkTheme ? "invert(0.1)" : "invert(0.9)";
 
       // Draw center of rotation
       // ctx.beginPath();
@@ -286,14 +302,14 @@
   }
 
   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;
+    let isMobile = /Mobile|Android|iPhone/i.test(navigator.userAgent);
+    let particleCount: number;
+    if (isMobile) {
+      particleCount = 25;
+    }
+    else {
+      particleCount = 40;
+    }
 
     particles = [];
     for (let i = 0; i < particleCount; i++) {
@@ -305,7 +321,7 @@
     }
   }
 
-  function animate() {
+  function render() {
     ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
 
     for (let i_gradient = 0; i_gradient < gradients.length; i_gradient++) {
@@ -319,6 +335,12 @@
       particle.update();
       particle.draw();
     }
+  }
+
+  function animate() {
+    if (animated) {
+      render();
+    }
 
     requestAnimationFrame(animate);
   }

src/routes/+layout.svelte

@@ -17,7 +17,7 @@
   let darkTheme = $state(false);
 
   /*/
-   * This is necesarry for pages to read the theme,
+   * This is necessary for pages to read the theme,
    * sucks that we have to use an anonymous function
    * just to grab a variable
   /*/

src/script/cookie.ts

@@ -1,7 +1,12 @@
 // The magic cookie system is so stupid
 
-export function setCookie(cname: string, cvalue: string) {
-	document.cookie = cname + "=" + cvalue + ";";
+export function setCookie(
+	cname: string,
+	cvalue: string,
+	sameSite: string = "Lax",
+) {
+	document.cookie =
+		cname + "=" + cvalue + ";" + "SameSite" + "=" + sameSite + ";";
 }
 
 // Credit: https://www.w3schools.com/js/js_cookies.asp