Update WebGL background animation for theme changes

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' } }));
     }
 }
 

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
 }