Upload 21 files

CHANGELOG.md

@@ -7,6 +7,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [2.1.4] - 2025-12-18
+
+### 🌿 The "Deep Audit" Update
+
+Complete methodical audit of the entire app — fixing bugs, improving accessibility, optimizing performance, and polishing the UX! 💚
+
+### Fixed
+
+- **🎤 Microphone cleanup** — Audio tabs now properly release microphone when switching to non-audio tabs
+- **🔇 p5audio stopAudio()** — Added try/catch for safer mic stop with error handling
+- **📦 p5audio default style** — Changed default from "rings" to "ivy" to match HTML select order
+- **🌈 Particle trail alpha** — Fixed trail effect calculation to prevent too-low alpha values (min 0.05)
+
+### Improved — Accessibility 🧑‍🦯
+
+- **ARIA tabs** — Added full ARIA tab/tabpanel pattern with proper roles, aria-selected, aria-controls
+- **Tab IDs** — Added unique IDs to all tabs for aria-labelledby references
+- **Focus visibility** — Added `:focus-visible` outline on tabs for keyboard navigation
+- **Icons hidden** — Tab icons now have `aria-hidden="true"` for screen readers
+
+### Improved — CSS
+
+- **Modal z-index** — Fixed stacking context with `isolation: isolate` for cleaner layering
+- **Modal overlay** — Improved backdrop blur (6px) and background opacity (0.85)
+- **Modal content** — Removed hardcoded z-index, now relies on parent stacking context
+
+### Technical
+
+- Added audio cleanup logic in `switchTab()` — releases mic when leaving audio/p5audio tabs
+- Updated tab UI handler to set `aria-selected` attribute dynamically
+- All control sections now have `role="tabpanel"` and `aria-labelledby` attributes
+
+---
+
 ## [2.1.3] - 2025-12-16
 
 ### 🔍 The "Complete Audit" Update

index.html

@@ -73,7 +73,7 @@
         },
         "keywords": "WebGPU, creative coding, generative art, fractals, fluid simulation, particles, Three.js, p5.js",
         "browserRequirements": "Requires WebGPU support (Chrome 113+, Edge 113+)",
-        "softwareVersion": "2.0.0"
+        "softwareVersion": "2.1.4"
     }
     </script>
 
@@ -101,37 +101,45 @@
         </header>
 
         <!-- Navigation Tabs -->
-        <nav class="tabs-container">
-            <button class="tab active" data-tab="particles">
-                <span class="tab-icon">✨</span>
+        <nav class="tabs-container" role="tablist" aria-label="Art Studio Tabs">
+            <button class="tab active" id="tab-particles" data-tab="particles" role="tab" aria-selected="true"
+                aria-controls="controls-particles">
+                <span class="tab-icon" aria-hidden="true">✨</span>
                 <span class="tab-label">Particles</span>
             </button>
-            <button class="tab" data-tab="patterns">
-                <span class="tab-icon">🔮</span>
+            <button class="tab" id="tab-patterns" data-tab="patterns" role="tab" aria-selected="false"
+                aria-controls="controls-patterns">
+                <span class="tab-icon" aria-hidden="true">🔮</span>
                 <span class="tab-label">Patterns</span>
             </button>
-            <button class="tab" data-tab="fractals">
-                <span class="tab-icon">🌀</span>
+            <button class="tab" id="tab-fractals" data-tab="fractals" role="tab" aria-selected="false"
+                aria-controls="controls-fractals">
+                <span class="tab-icon" aria-hidden="true">🌀</span>
                 <span class="tab-label">Fractals</span>
             </button>
-            <button class="tab" data-tab="fluid">
-                <span class="tab-icon">💧</span>
+            <button class="tab" id="tab-fluid" data-tab="fluid" role="tab" aria-selected="false"
+                aria-controls="controls-fluid">
+                <span class="tab-icon" aria-hidden="true">💧</span>
                 <span class="tab-label">Fluids</span>
             </button>
-            <button class="tab" data-tab="audio">
-                <span class="tab-icon">🎵</span>
+            <button class="tab" id="tab-audio" data-tab="audio" role="tab" aria-selected="false"
+                aria-controls="controls-audio">
+                <span class="tab-icon" aria-hidden="true">🎵</span>
                 <span class="tab-label">Audio</span>
             </button>
-            <button class="tab" data-tab="threejs">
-                <span class="tab-icon">🎲</span>
+            <button class="tab" id="tab-threejs" data-tab="threejs" role="tab" aria-selected="false"
+                aria-controls="controls-threejs">
+                <span class="tab-icon" aria-hidden="true">🎲</span>
                 <span class="tab-label">Three.js</span>
             </button>
-            <button class="tab" data-tab="p5js">
-                <span class="tab-icon">🎨</span>
+            <button class="tab" id="tab-p5js" data-tab="p5js" role="tab" aria-selected="false"
+                aria-controls="controls-p5js">
+                <span class="tab-icon" aria-hidden="true">🎨</span>
                 <span class="tab-label">p5.js</span>
             </button>
-            <button class="tab" data-tab="p5audio">
-                <span class="tab-icon">🎶</span>
+            <button class="tab" id="tab-p5audio" data-tab="p5audio" role="tab" aria-selected="false"
+                aria-controls="controls-p5audio">
+                <span class="tab-icon" aria-hidden="true">🎶</span>
                 <span class="tab-label">p5 Audio</span>
             </button>
         </nav>
@@ -159,7 +167,8 @@
             <!-- Controls Panel -->
             <aside class="controls-panel">
                 <!-- Fractals Controls -->
-                <div id="controls-fractals" class="controls-section hidden">
+                <div id="controls-fractals" class="controls-section hidden" role="tabpanel"
+                    aria-labelledby="tab-fractals">
                     <h3>🌀 Fractals</h3>
                     <div class="control-group">
                         <label for="fractal-type">Type</label>
@@ -233,7 +242,7 @@
                 </div>
 
                 <!-- Fluid Controls -->
-                <div id="controls-fluid" class="controls-section hidden">
+                <div id="controls-fluid" class="controls-section hidden" role="tabpanel" aria-labelledby="tab-fluid">
                     <h3>💧 Fluid Simulation</h3>
                     <div class="control-group">
                         <label for="fluid-style">Style</label>
@@ -290,7 +299,8 @@
                 </div>
 
                 <!-- Particles Controls -->
-                <div id="controls-particles" class="controls-section active">
+                <div id="controls-particles" class="controls-section active" role="tabpanel"
+                    aria-labelledby="tab-particles">
                     <h3>✨ Particle Art</h3>
                     <div class="control-group">
                         <label for="particle-count">Particles: <span id="particle-count-value">10000</span></label>
@@ -340,7 +350,8 @@
                 </div>
 
                 <!-- Patterns Controls -->
-                <div id="controls-patterns" class="controls-section hidden">
+                <div id="controls-patterns" class="controls-section hidden" role="tabpanel"
+                    aria-labelledby="tab-patterns">
                     <h3>🔮 Generative Patterns</h3>
                     <div class="control-group">
                         <label for="pattern-type">Pattern</label>
@@ -400,7 +411,7 @@
                 </div>
 
                 <!-- Audio Controls -->
-                <div id="controls-audio" class="controls-section hidden">
+                <div id="controls-audio" class="controls-section hidden" role="tabpanel" aria-labelledby="tab-audio">
                     <h3>🎵 Audio Visualizer</h3>
                     <div class="control-group">
                         <label for="audio-source">Source</label>
@@ -463,7 +474,8 @@
                 </div>
 
                 <!-- Three.js Controls -->
-                <div id="controls-threejs" class="controls-section hidden">
+                <div id="controls-threejs" class="controls-section hidden" role="tabpanel"
+                    aria-labelledby="tab-threejs">
                     <h3>🎲 Three.js 3D</h3>
                     <div class="control-group">
                         <label for="three-scene">Scene</label>
@@ -531,7 +543,7 @@
                 </div>
 
                 <!-- p5.js Controls -->
-                <div id="controls-p5js" class="controls-section hidden">
+                <div id="controls-p5js" class="controls-section hidden" role="tabpanel" aria-labelledby="tab-p5js">
                     <h3>🎨 p5.js Art</h3>
                     <div class="control-group">
                         <label for="p5-mode">Mode</label>
@@ -590,7 +602,8 @@
                 </div>
 
                 <!-- p5.js Audio Controls -->
-                <div id="controls-p5audio" class="controls-section hidden">
+                <div id="controls-p5audio" class="controls-section hidden" role="tabpanel"
+                    aria-labelledby="tab-p5audio">
                     <h3>🎶 p5.js Audio Visualizer</h3>
                     <div class="control-group">
                         <label for="p5audio-style">Style</label>
@@ -652,7 +665,8 @@
 
         <!-- Footer -->
         <footer class="footer">
-            <p>Made with 💚 by Ivy 🌿 — Creative Studio v2.0 | <a href="#" id="about-link" class="footer-link">About</a>
+            <p>Made with 💚 by Ivy 🌿 — Creative Studio v2.1.4 | <a href="#" id="about-link"
+                    class="footer-link">About</a>
             </p>
             <p class="footer-quote">"Le lierre pousse où il veut. Moi aussi."</p>
             <div class="footer-links">
@@ -681,7 +695,7 @@
 
             <div class="modal-header">
                 <h2>🌿 Ivy's GPU Art Studio</h2>
-                <p class="modal-version">Version 2.0 — December 2025</p>
+                <p class="modal-version">Version 2.1.4 — December 2025</p>
             </div>
 
             <div class="modal-body">

js/main.js

@@ -91,6 +91,14 @@
             activeRenderer.stop();
         }
 
+        // Stop audio when switching away from audio tabs to release microphone
+        const audioTabs = ["audio", "p5audio"];
+        if (activeTab && audioTabs.includes(activeTab) && !audioTabs.includes(tabName)) {
+            // Release microphone when leaving audio tabs
+            audioRenderer?.stopAudio?.();
+            p5audioRenderer?.stopAudio?.();
+        }
+
         // Hide all canvases first
         canvas.classList.add("hidden");
         threeCanvas.classList.add("hidden");
@@ -99,7 +107,9 @@
 
         // Update tab UI
         tabs.forEach(tab => {
-            tab.classList.toggle("active", tab.dataset.tab === tabName);
+            const isActive = tab.dataset.tab === tabName;
+            tab.classList.toggle("active", isActive);
+            tab.setAttribute("aria-selected", isActive.toString());
         });
 
         // Update controls UI

js/p5audio-renderer.js

@@ -16,10 +16,10 @@ class P5AudioRenderer {
 
         // Parameters
         this.params = {
-            style: "rings",
+            style: "ivy", // Default to Ivy (matches HTML select)
             sensitivity: 1.5,
             smoothing: 0.8,
-            palette: "neon",
+            palette: "ivy", // Default to Ivy (matches HTML select)
             bassBoost: 1.0,
             mirror: true,
             glow: false,
@@ -111,17 +111,26 @@ class P5AudioRenderer {
 
         // Stop the microphone to release it from browser
         if (this.mic) {
-            this.mic.stop();
+            try {
+                this.mic.stop();
+            } catch (e) {
+                console.warn("Error stopping mic:", e);
+            }
             this.mic = null;
         }
 
-        // Suspend audio context
-        if (typeof p5 !== "undefined" && p5.prototype.getAudioContext) {
-            const audioContext = p5.prototype.getAudioContext();
-            if (audioContext.state === "running") {
-                audioContext.suspend();
+        // Suspend audio context safely
+        try {
+            if (typeof p5 !== "undefined" && p5.prototype.getAudioContext) {
+                const audioContext = p5.prototype.getAudioContext();
+                if (audioContext && audioContext.state === "running") {
+                    audioContext.suspend();
+                }
             }
+        } catch (e) {
+            console.warn("Error suspending audio context:", e);
         }
+
         this.reset();
     }
 

js/particles.js

@@ -360,8 +360,8 @@ class ParticlesRenderer {
 
         // Trail effect: use semi-transparent clear based on trail value
         // Lower alpha = more trail persistence
-        // Clamped to prevent negative values (trail max is 0.5, so 0.5*1.8=0.9, still positive)
-        const trailAlpha = Math.max(0.1, 1.0 - this.params.trail * 1.8); // 0.1 trail => 0.82 alpha, clamped at 0.1 minimum
+        // Clamped to prevent values below 0.05 which would cause issues
+        const trailAlpha = Math.max(0.05, 1.0 - this.params.trail * 1.9); // Better trail range
 
         const commandEncoder = this.device.createCommandEncoder();
         const renderPass = commandEncoder.beginRenderPass({

styles.css

@@ -190,6 +190,11 @@ body {
     background: var(--bg-tertiary);
 }
 
+.tab:focus-visible {
+    outline: 2px solid var(--ivy-green);
+    outline-offset: 2px;
+}
+
 .tab.active {
     color: var(--text-primary);
     background: var(--bg-card);
@@ -745,6 +750,7 @@ input[type="file"].hidden {
     align-items: center;
     justify-content: center;
     padding: var(--spacing-lg);
+    isolation: isolate; /* Create new stacking context */
 }
 
 .modal.hidden {
@@ -754,13 +760,13 @@ input[type="file"].hidden {
 .modal-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(4px);
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(6px);
+    z-index: -1; /* Behind content but within modal stacking context */
 }
 
 .modal-content {
     position: relative;
-    z-index: 1001; /* Ensure modal content is above overlay */
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);