From f81fa98851825d4eb7b5ab0750979c638fcba829 Mon Sep 17 00:00:00 2001
From: Zakarya <zakarya@colormatic.org>
Date: Fri, 16 May 2025 19:40:36 -0700
Subject: [PATCH] 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   | 42 +++++++++++++++++++++++++++++----------
 src/routes/+layout.svelte |  2 +-
 src/script/cookie.ts      |  9 +++++++--
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/component/bg.svelte b/src/component/bg.svelte
index a325b29..a0df3a1 100644
--- a/src/component/bg.svelte
+++ b/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);
   }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 60677b0..a1dd8fc 100644
--- a/src/routes/+layout.svelte
+++ b/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
   /*/
diff --git a/src/script/cookie.ts b/src/script/cookie.ts
index 534d1f4..6afd0d9 100644
--- a/src/script/cookie.ts
+++ b/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