From eebd09e303f730089a59fcf6ccc9c2caea047d33 Mon Sep 17 00:00:00 2001
From: Igor Costa <igorcosta@github.com>
Date: Fri, 10 May 2024 16:27:47 +1200
Subject: [PATCH] Update WebGL background animation for theme changes

---
 script.js          | 25 -------------------------
 theme-toggle.js    |  2 ++
 webgl-animation.js | 34 ++++++++++++++++------------------
 3 files changed, 18 insertions(+), 43 deletions(-)
 delete mode 100644 script.js

diff --git a/script.js b/script.js
deleted file mode 100644
index 859151b..0000000
--- a/script.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// Function to toggle between dark and light theme
-function toggleTheme() {
-    const body = document.body;
-    const currentTheme = localStorage.getItem('theme');
-    if (currentTheme === 'dark') {
-        body.classList.replace('dark-theme', 'light-theme');
-        localStorage.setItem('theme', 'light');
-    } else {
-        body.classList.replace('light-theme', 'dark-theme');
-        localStorage.setItem('theme', 'dark');
-    }
-}
-
-// Event listener for the theme toggle button
-document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
-
-// Check local storage for theme preference and apply it
-document.addEventListener('DOMContentLoaded', () => {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme === 'dark') {
-        document.body.classList.add('dark-theme');
-    } else {
-        document.body.classList.add('light-theme');
-    }
-});
diff --git a/theme-toggle.js b/theme-toggle.js
index 859151b..cbd613d 100644
--- a/theme-toggle.js
+++ b/theme-toggle.js
@@ -5,9 +5,11 @@ function toggleTheme() {
     if (currentTheme === 'dark') {
         body.classList.replace('dark-theme', 'light-theme');
         localStorage.setItem('theme', 'light');
+        document.dispatchEvent(new CustomEvent('themeChange', { detail: { theme: 'light' } }));
     } else {
         body.classList.replace('light-theme', 'dark-theme');
         localStorage.setItem('theme', 'dark');
+        document.dispatchEvent(new CustomEvent('themeChange', { detail: { theme: 'dark' } }));
     }
 }
 
diff --git a/webgl-animation.js b/webgl-animation.js
index c2b984e..1f7ec8b 100644
--- a/webgl-animation.js
+++ b/webgl-animation.js
@@ -2,34 +2,32 @@
 let theme = 'light'; // Default theme
 
 function setup() {
-  createCanvas(windowWidth, windowHeight, WEBGL);
-  noStroke();
+  createCanvas(windowWidth, windowHeight);
+  noFill();
+}
+
+function drawMorphicLines() {
+  stroke(theme === 'light' ? 0 : 255);
+  beginShape();
+  for (let i = 0; i < width; i += 10) {
+    let y = noise(i * 0.01, frameCount * 0.01) * height;
+    vertex(i, y);
+  }
+  endShape();
 }
 
 function draw() {
   background(theme === 'light' ? 255 : 0);
-  let dirX = (mouseX / width - 0.5) * 2;
-  let dirY = (mouseY / height - 0.5) * 2;
-  directionalLight(250, 250, 250, -dirX, -dirY, -1);
-  translate(-1.5 * width / 4, 0, 0);
-  for (let i = 0; i < 3; i++) {
-    push();
-    translate(i * width / 4, 0, 0);
-    rotateY(frameCount * 0.02);
-    box(100);
-    pop();
-  }
+  drawMorphicLines();
 }
 
 // Listen for theme changes
 document.addEventListener('themeChange', function(e) {
   theme = e.detail.theme;
+  draw(); // Redraw with the new theme
 });
 
-// Create a depression effect on mouse click
+// Remove the sphere effect on mouse click
 function mousePressed() {
-  push();
-  translate(mouseX - width / 2, mouseY - height / 2);
-  sphere(20);
-  pop();
+  // This function intentionally left blank
 }