Audio-Visualizer/index.html at main · BrainAV/Audio-Visualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Audio Visualizer</title>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0633259514526906"
     crossorigin="anonymous"></script>
  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WL1KSYBBD5"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-WL1KSYBBD5');
</script>

  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <canvas id="spiralCanvas"></canvas>
  <div id="controlsOverlay" class="controls-overlay">
    <button id="infoButton" class="info-btn" data-tooltip="Information & Help">?</button>
    <button id="toggleControls" class="toggle-controls">Hide Controls</button>
    <h2>Audio Visualizer</h2>
    <div class="controls">
      <div class="control-group">
        <h3>Presets</h3>
        <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()" 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 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 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 line width reactive to audio."><input type="checkbox" id="audioLineWidth"> Line Width</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" id="layerManager">
        <h3>Layers</h3>
        <select id="layerList" size="4" style="margin-bottom: 5px;">
        </select>
        <div style="display: flex; gap: 5px;">
          <button id="addSpiralLayerBtn" data-tooltip="Add a new Spiral Layer">+ Spiral</button>
          <button id="addFractalLayerBtn" data-tooltip="Add a new Fractal Layer">+ Fractal</button>
          <button id="removeLayerBtn" data-tooltip="Remove selected layer" style="margin-left:auto;">- Remove</button>
        </div>
      </div>

      <div class="control-group" id="layerTransform">
        <h3>Layer Transform</h3>
        <label data-tooltip="Sets the starting angle.">Rotation: <input type="range" id="rotation" min="0" max="360" value="0"> <span id="rotationValue">0</span></label>
        <label data-tooltip="Rotation speed and direction when Auto-Rotate is on.">Spin Speed: <input type="range" id="autoRotateSpeed" min="-10" max="10" step="0.1" value="1.0"> <span id="autoRotateSpeedValue">1</span></label>
      </div>

      <div id="spiralControlsContainer">
        <div class="control-group">
          <h3>Spiral Core Parameters</h3>
          <label data-tooltip="Controls the overall size of the visual.">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="300" value="12"> <span id="nodesValue">12</span></label>
          <label data-tooltip="The angle between each sequence point. 60=Hexagon, 90=Square, 137.5=Golden Angle.">Angle Step: <input type="range" id="angleStep" min="1" max="360" step="0.1" value="60"> <span id="angleStepValue">60</span></label>
        </div>

        <div class="control-group">
          <h3>Spiral Layer Controls</h3>
          <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)" 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>Spiral Mirror Effects</h3>
          <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>
            <label>Both Color: <input type="color" id="bothColor" value="#FFFFFF"></label>
          </div>
        </div>

        <div class="control-group">
          <h3>Spiral Style Options</h3>
          <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 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 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 id="fractalControlsContainer" style="display: none;">
        <div class="control-group">
          <h3>Fractal Type</h3>
          <label>Type:
            <select id="fractalType">
              <option value="mandelbrot">Mandelbrot</option>
              <option value="julia">Julia Set</option>
            </select>
          </label>
          <label data-tooltip="Detail level of the fractal">Iterations: <input type="range" id="iterations" min="10" max="1000" step="1" value="100"> <span id="iterationsValue">100</span></label>
          <label>Color Palette:
            <select id="colorPalette">
              <option value="ocean">Ocean</option>
              <option value="fire">Fire</option>
              <option value="psychedelic">Psychedelic</option>
            </select>
          </label>
        </div>

        <div class="control-group">
          <h3>Positioning</h3>
          <label data-tooltip="Zoom level">Zoom: <input type="range" id="zoom" min="0.1" max="10.0" step="0.01" value="1.0"> <span id="zoomValue">1.0</span></label>
          <label data-tooltip="X-Offset">Offset X: <input type="range" id="offsetX" min="-2.0" max="2.0" step="0.01" value="0.0"> <span id="offsetXValue">0.0</span></label>
          <label data-tooltip="Y-Offset">Offset Y: <input type="range" id="offsetY" min="-2.0" max="2.0" step="0.01" value="0.0"> <span id="offsetYValue">0.0</span></label>
        </div>

        <div class="control-group">
          <h3>Julia Settings</h3>
          <p style="font-size: 0.8em; color: #aaa; margin-top: 0;">Only visible in Julia Set mode.</p>
          <label>Julia C (X): <input type="range" id="juliaCx" min="-2.0" max="2.0" step="0.01" value="-0.4"> <span id="juliaCxValue">-0.4</span></label>
          <label>Julia C (Y): <input type="range" id="juliaCy" min="-2.0" max="2.0" step="0.01" value="0.6"> <span id="juliaCyValue">0.6</span></label>
        </div>

        <div class="control-group">
          <h3>Style Options</h3>
          <label data-tooltip="The transparency of the fractal layer">Opacity: <input type="range" id="fractalOpacity" min="0" max="1" step="0.1" value="1"> <span id="fractalOpacityValue">1</span></label>
        </div>
      </div>
    </div>

    <div class="download-container">
      <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>

  <div id="fullscreenOverlay" class="fullscreen-overlay">
    Press ESC to exit full screen
  </div>

  <!-- Info Modal -->
  <div id="infoModal" class="modal">
    <div class="modal-content">
      <span class="close-modal">&times;</span>
      <h2>Audio Visualizer</h2>
      <p>Interactive web-based visualizer for massive, hypnotic spiral patterns.</p>

      <h3>How To Use</h3>
      <ul>
        <li><strong>Presets:</strong> Use the dropdown to jump to a predefined setup.</li>
        <li><strong>Audio Reactivity:</strong> Toggle "Audio Reactive" and allow microphone access to make the visualizer pulse to the beat.</li>
        <li><strong>Controls:</strong> Tweak scale, nodes, layers, and coloring to your liking. Most sliders provide instant updates.</li>
        <li><strong>Download:</strong> Once you love your visual, generate a high-res 2160x2160 PNG snapshot.</li>
      </ul>

      <h3>Screensaver Mode</h3>
      <p>The UI will automatically fade out if you leave your mouse still for 4 seconds, creating an immersive full-screen experience.</p>

      <p style="margin-top: 30px; font-size: 0.9em; color: #888;">Built by the BrainAV team.</p>
    </div>
  </div>

  <script src="presets.js"></script>
  <script src="webgl-setup.js"></script>
  <script src="visualizers/spiral.js"></script>
  <script src="visualizers/fractal.js"></script>
  <script src="audio.js"></script>
  <script src="state.js"></script>
  <script src="script.js"></script>
  <script src="ui.js"></script>
</body>
</html>