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 }