Add audio start/stop button and UI tooltips

Introduces a 'Start/Stop Audio' button for explicit microphone control and updates UI to include tooltips for better usability. Refactors styles to use CSS variables for easier theming, updates documentation to reflect 16 presets, and marks related roadmap items as complete. Also adds an audio stop function and improves audio reactive UI logic.

Author: jasonbra1n

README.md

@@ -2,7 +2,7 @@ https://jasonbra1n.github.io/Audio-Visualizer/
 
 # Audio Visualizer
 
-Create stunning, customizable spiral visualizations with vibrant colored mirrors, multi-layered designs, and dynamic cosmic effects. This web-based tool lets you tweak scale, nodes, layers, and ratios, with options for logarithmic or linear growth, gradient strokes, dashed lines, and auto-rotation. Explore 12 presets—from the ethereal **Nebula** to the rippling **Cosmic Wave**—or craft your own visual masterpiece.
+Create stunning, customizable spiral visualizations with vibrant colored mirrors, multi-layered designs, and dynamic cosmic effects. This web-based tool lets you tweak scale, nodes, layers, and ratios, with options for logarithmic or linear growth, gradient strokes, dashed lines, and auto-rotation. Explore 16 presets—from the ethereal **Nebula** to the rippling **Cosmic Wave**—or craft your own visual masterpiece.
 
 An interactive web-based visualizer that creates mesmerizing spiral patterns with customizable parameters and mirror effects. Built with HTML, CSS, and JavaScript, this project allows users to experiment with spirals, layers, mirroring, and colors, and download high-resolution images of their creations.
 

audio.js

@@ -1,10 +1,11 @@
-let audioContext, analyser, dataArray;
+let audioContext, analyser, dataArray, mediaStream;
 
 async function initAudio() {
+  if (audioContext) return; // Already initialized
   try {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
     audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    const source = audioContext.createMediaStreamSource(stream);
+    const source = audioContext.createMediaStreamSource(mediaStream);
     analyser = audioContext.createAnalyser();
     analyser.fftSize = 64;
     analyser.smoothingTimeConstant = 0.3;
@@ -17,6 +18,20 @@ async function initAudio() {
   }
 }
 
+function stopAudio() {
+  if (mediaStream) {
+    mediaStream.getTracks().forEach(track => track.stop());
+    mediaStream = null;
+  }
+  if (audioContext) {
+    audioContext.close().then(() => {
+      audioContext = null;
+      analyser = null;
+      console.log('Audio stopped and context closed.');
+    });
+  }
+}
+
 function getAudioAmplitude() {
   if (!analyser) return 0;
   analyser.getByteTimeDomainData(dataArray);

changelog.md

@@ -8,27 +8,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+
+### Changed
+
+### Fixed
+
+## [1.0.0] - 2025-12-08
+
+### Added
+- Added a "Start/Stop Audio" button for explicit user control over microphone access.
 - Added user documentation and new visual styles to the `roadmap.md`.
 - `roadmap.md` for planning future development.
 - `dev_guide.md` for contributor guidelines.
 - `changelog.md` to track project changes.
+- **Major Upgrade**: Replaced 2D Canvas renderer with a high-performance WebGL engine from the `/3/` prototype.
 
 ### Changed
 - Updated `dev_guide.md` with current instructions for adding presets and maintaining `README.md`.
 - Updated `README.md` to reflect the current number of presets (16) and features.
 - Updated project title in `index.html` and `README.md` to "Audio Visualizer".
+- Refactored `styles.css` to use CSS variables for easier theming and maintenance.
 - Integrated advanced mobile touch controls (pinch-to-zoom and drag-to-rotate) from prototype.
 - **Major Refactor**: Modularized the monolithic `script.js` into smaller, focused files (`webgl-setup.js`, `drawing.js`, `audio.js`, `ui.js`, `state.js`) for improved maintainability.
-- **Major Upgrade**: Replaced 2D Canvas renderer with a high-performance WebGL engine from the `/3/` prototype.
 
 ### Fixed
-- Simplified the `layerRatio` UI control by removing the redundant and less responsive number input.
-
-## [1.0.0] - 2025-12-08
-
-### Added
-- Initial release of the Audio Visualizer.
-- Core features: spiral generation, layering, mirroring, and color customization.
-- 12 initial presets for different visual styles.
-- Audio-reactivity for scale, rotation, and opacity based on microphone input.
-- High-resolution PNG export.
+- Fixed an issue where tooltips would render partially off-screen or be clipped by the controls panel.
+- Fixed a bug where curved lines would disappear or render incorrectly.
+- Simplified the `layerRatio` UI control by removing the redundant and less responsive number input.

index.html

@@ -26,56 +26,57 @@ <h2>Audio Visualizer</h2>
     <div class="controls">
       <div class="control-group">
         <h3>Presets</h3>
-        <label>Load Preset: 
+        <label data-tooltip="Load a pre-configured visual design.">Load Preset: 
           <select id="presetSelector">
             <option value="">Select a Preset</option>
             <option value="custom">Custom</option>
             <!-- Options will be added via JavaScript -->
           </select>
         </label>
         <div>
-          <button onclick="undo()">Undo</button>
-          <button onclick="reset()">Reset</button>
+          <button onclick="undo()" data-tooltip="Undo the last parameter change.">Undo</button>
+          <button onclick="reset()" data-tooltip="Reset all parameters to their default values.">Reset</button>
         </div>
       </div>
 
       <div class="control-group">
         <h3>Master Settings</h3>
-        <label>Auto-Rotate: <input type="checkbox" id="autoRotate"></label>
-        <label>Audio Reactive: <input type="checkbox" id="audioReactive"></label>
+        <label data-tooltip="Automatically rotates the spiral."><input type="checkbox" id="autoRotate"> Auto-Rotate</label>
+        <label data-tooltip="Makes the visualizer react to microphone input."><input type="checkbox" id="audioReactive"> Audio Reactive</label>
+        <button id="audioToggleButton" style="display: none; margin-top: 5px;">Start Audio</button>
         <div id="audioOptions" style="display: none; margin-left: 20px;">
-          <label><input type="checkbox" id="audioRotate"> Rotate</label>
-          <label><input type="checkbox" id="audioScale"> Scale</label>
-          <label><input type="checkbox" id="audioOpacity"> Opacity</label>
-          <label>Scale Gap: <input type="range" id="scaleGap" min="1" max="50" value="10"> <span id="scaleGapValue">10</span></label>
-          <label>Scale Sensitivity: <input type="range" id="scaleSensitivity" min="0.5" max="5" step="0.1" value="1"> <span id="scaleSensitivityValue">1</span></label>
+          <label data-tooltip="Makes rotation reactive to audio."><input type="checkbox" id="audioRotate"> Rotate</label>
+          <label data-tooltip="Makes scale reactive to audio."><input type="checkbox" id="audioScale"> Scale</label>
+          <label data-tooltip="Makes opacity reactive to audio."><input type="checkbox" id="audioOpacity"> Opacity</label>
+          <label data-tooltip="Maximum amount the scale can increase with audio.">Scale Gap: <input type="range" id="scaleGap" min="1" max="50" value="10"> <span id="scaleGapValue">10</span></label>
+          <label data-tooltip="How strongly the scale reacts to audio.">Scale Sensitivity: <input type="range" id="scaleSensitivity" min="0.5" max="5" step="0.1" value="1"> <span id="scaleSensitivityValue">1</span></label>
         </div>
       </div>
 
       <div class="control-group">
         <h3>Core Parameters</h3>
-        <label>Scale: <input type="range" id="scale" min="1" max="100" step="0.1" value="30"> <span id="scaleValue">30</span></label>
-        <label>Nodes: <input type="range" id="nodes" min="5" max="50" value="12"> <span id="nodesValue">12</span></label>
-        <label>Rotation: <input type="range" id="rotation" min="0" max="360" value="0"> <span id="rotationValue">0</span></label>
+        <label data-tooltip="Controls the overall size of the spiral.">Scale: <input type="range" id="scale" min="1" max="100" step="0.1" value="30"> <span id="scaleValue">30</span></label>
+        <label data-tooltip="Number of points in each spiral arm.">Nodes: <input type="range" id="nodes" min="5" max="50" value="12"> <span id="nodesValue">12</span></label>
+        <label data-tooltip="Sets the starting angle of the spiral.">Rotation: <input type="range" id="rotation" min="0" max="360" value="0"> <span id="rotationValue">0</span></label>
       </div>
 
       <div class="control-group">
         <h3>Layer Controls</h3>
-        <label>Layers: <input type="range" id="layers" min="1" max="100" value="3"> <span id="layersValue">3</span></label>
-        <label>Layer Ratio: 
+        <label data-tooltip="Number of concentric spiral layers.">Layers: <input type="range" id="layers" min="1" max="100" value="3"> <span id="layersValue">3</span></label>
+        <label data-tooltip="Spacing between layers. >1 grows, <1 shrinks.">Layer Ratio: 
           <input type="range" id="layerRatio" min="0.1" max="10" step="0.1" value="2">
           <span id="layerRatioValue">2</span>
         </label>
         <div>
-          <button onclick="setRatio(1.618)">Golden Ratio</button>
-          <button onclick="setRatio(2.414)">Silver Ratio</button>
+          <button onclick="setRatio(1.618)" data-tooltip="Set layer ratio to the Golden Ratio (φ ≈ 1.618).">Golden Ratio</button>
+          <button onclick="setRatio(2.414)" data-tooltip="Set layer ratio to the Silver Ratio (δS ≈ 2.414).">Silver Ratio</button>
         </div>
       </div>
 
       <div class="control-group">
         <h3>Mirror Effects</h3>
-        <label><input type="checkbox" id="verticalMirror"> Vertical Mirror</label>
-        <label><input type="checkbox" id="horizontalMirror"> Horizontal Mirror</label>
+        <label data-tooltip="Mirrors the spiral across the vertical axis."><input type="checkbox" id="verticalMirror"> Vertical Mirror</label>
+        <label data-tooltip="Mirrors the spiral across the horizontal axis."><input type="checkbox" id="horizontalMirror"> Horizontal Mirror</label>
         <div class="mirror-colors">
           <label>Vertical Color: <input type="color" id="verticalColor" value="#FF00FF"></label>
           <label>Horizontal Color: <input type="color" id="horizontalColor" value="#FFFF00"></label>
@@ -85,32 +86,32 @@ <h3>Mirror Effects</h3>
 
       <div class="control-group">
         <h3>Style Options</h3>
-        <label>Color: <input type="color" id="strokeColor" value="#00FFFF"></label>
-        <label>Line Width: <input type="range" id="lineWidth" min="1" max="10" value="2"> <span id="lineWidthValue">2</span></label>
-        <label>Opacity: <input type="range" id="opacity" min="0" max="1" step="0.1" value="1"> <span id="opacityValue">1</span></label>
-        <label>Spiral Type: 
+        <label data-tooltip="The main color of the primary spiral.">Color: <input type="color" id="strokeColor" value="#00FFFF"></label>
+        <label data-tooltip="The thickness of the spiral lines.">Line Width: <input type="range" id="lineWidth" min="1" max="10" value="2"> <span id="lineWidthValue">2</span></label>
+        <label data-tooltip="The transparency of the spiral.">Opacity: <input type="range" id="opacity" min="0" max="1" step="0.1" value="1"> <span id="opacityValue">1</span></label>
+        <label data-tooltip="Linear for even spacing, Logarithmic for exponential spacing.">Spiral Type: 
           <select id="spiralType">
             <option value="linear">Linear</option>
             <option value="logarithmic">Logarithmic</option>
           </select>
         </label>
-        <label>Line End Style: 
+        <label data-tooltip="Style of the line endings (for thick lines).">Line End Style: 
           <select id="lineEndStyle">
             <option value="boxed">Boxed</option>
             <option value="tapered">Tapered</option>
             <option value="rounded">Rounded</option>
           </select>
         </label>
-        <label>Background Color: <input type="color" id="backgroundColor" value="#111111"></label>
-        <label><input type="checkbox" id="gradientStroke" checked> Gradient Stroke</label>
-        <label><input type="checkbox" id="dashEffect"> Dashed Lines</label>
-        <label><input type="checkbox" id="curvedLines"> Curved Lines</label>
+        <label data-tooltip="The background color of the canvas.">Background Color: <input type="color" id="backgroundColor" value="#111111"></label>
+        <label data-tooltip="Fades the line color to black along its length."><input type="checkbox" id="gradientStroke" checked> Gradient Stroke</label>
+        <label data-tooltip="Renders the lines with a dashed pattern."><input type="checkbox" id="dashEffect"> Dashed Lines</label>
+        <label data-tooltip="Draws smooth curves instead of straight lines between nodes."><input type="checkbox" id="curvedLines"> Curved Lines</label>
       </div>
     </div>
 
     <div class="download-container">
-      <button onclick="downloadCanvas()">Download Image (2160×2160)</button>
-      <button id="fullscreenButton">Go Fullscreen</button>
+      <button onclick="downloadCanvas()" data-tooltip="Saves the current visual as a high-resolution PNG file.">Download Image (2160×2160)</button>
+      <button id="fullscreenButton" data-tooltip="View the visualizer in full screen mode.">Go Fullscreen</button>
     </div>
   </div>
 

roadmap.md

@@ -6,16 +6,16 @@ This document outlines the development roadmap for the Audio Visualizer project.
 
 The immediate goals are to refine the existing features, improve performance, and enhance the core audio-reactive experience.
 
-- **[ ] Code Refactoring:**
+- **[x] Code Refactoring:**
   - [x] Modularize `script.js` into smaller, focused files (e.g., `ui.js`, `drawing.js`, `audio.js`, `state.js`).
   - [x] Optimize the animation loop to avoid unnecessary DOM reads on every frame and use `lerp` for smooth transitions. *(Discovered in `/2` prototype)*.
-  - [ ] Convert `styles.css` to use CSS variables for easier theming.
+  - [x] Convert `styles.css` to use CSS variables for easier theming.
 
 - **[ ] UI/UX Enhancements:**
-  - [ ] Add a "Start/Stop Audio" button to give users more explicit control over microphone access.
+  - [x] Add a "Start/Stop Audio" button to give users more explicit control over microphone access.
   - [ ] Improve layout and responsiveness of the controls panel for smaller screens.
   - [x] Integrate advanced mobile touch controls (pinch-to-zoom, drag-to-rotate) from the `/2` prototype.
-  - [ ] Add tooltips to explain what each control does.
+  - [x] Add tooltips to explain what each control does.
 
 - **[ ] Core Feature Improvements:**
   - [ ] Add more parameters for audio reactivity (e.g., line width, number of nodes, layer ratio).

styles.css

@@ -1,8 +1,19 @@
+:root {
+  --main-bg-color: #111111;
+  --overlay-bg-color: rgba(0, 0, 0, 0.8);
+  --text-color: white;
+  --control-bg-color: #333;
+  --control-hover-bg-color: #555;
+  --border-radius-large: 10px;
+  --border-radius-small: 5px;
+  --controls-width: 300px;
+}
+
 body {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
-  background-color: #111111;
+  background-color: var(--main-bg-color);
   overflow: hidden;
 }
 
@@ -19,12 +30,12 @@ body {
   position: fixed;
   top: 20px;
   right: 20px;
-  width: 300px;
+  width: var(--controls-width);
   max-height: calc(100vh - 40px);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
+  background: var(--overlay-bg-color);
+  color: var(--text-color);
   padding: 20px;
-  border-radius: 10px;
+  border-radius: var(--border-radius-large);
   z-index: 2;
   overflow-y: auto;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -34,16 +45,16 @@ body {
   position: absolute;
   top: 10px;
   right: 10px;
-  background: #333;
-  color: white;
+  background: var(--control-bg-color);
+  color: var(--text-color);
   border: none;
   padding: 5px 10px;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: var(--border-radius-small);
 }
 
 .toggle-controls:hover {
-  background: #555;
+  background: var(--control-hover-bg-color);
 }
 
 .controls {
@@ -70,6 +81,36 @@ label {
   margin: 5px 0;
 }
 
+/* Tooltip Styles */
+[data-tooltip] {
+  position: relative;
+  cursor: help;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  /* Position above the element */
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-5px); /* Move up slightly */
+  background-color: var(--control-hover-bg-color);
+  color: var(--text-color);
+  padding: 5px 10px;
+  border-radius: var(--border-radius-small);
+  font-size: 0.8em;
+  white-space: nowrap;
+  z-index: 10;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+
+[data-tooltip]:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
 input[type="range"] {
   width: 70%;
   vertical-align: middle;
@@ -87,24 +128,24 @@ input[type="color"] {
 select {
   width: 100%;
   padding: 5px;
-  background: #333;
-  color: white;
+  background: var(--control-bg-color);
+  color: var(--text-color);
   border: none;
-  border-radius: 5px;
+  border-radius: var(--border-radius-small);
 }
 
 button {
-  background: #333;
-  color: white;
+  background: var(--control-bg-color);
+  color: var(--text-color);
   border: none;
   padding: 5px 10px;
   margin: 5px 5px 0 0;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: var(--border-radius-small);
 }
 
 button:hover {
-  background: #555;
+  background: var(--control-hover-bg-color);
 }
 
 .mirror-colors {
@@ -123,9 +164,9 @@ button:hover {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
+  background: var(--overlay-bg-color);
+  color: var(--text-color);
   padding: 10px 20px;
-  border-radius: 5px;
+  border-radius: var(--border-radius-small);
   z-index: 3;
 }