Spaces:

Fabriwin
/

audio-dimension

Running

App Files Files Community

Fabriwin commited on Apr 9

Commit

0122e20

verified ·

1 Parent(s): 0fcc469

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1031 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Audio Dimension
-emoji: 🔥
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: audio-dimension
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1031 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Maximalist 3D Audio Visualization</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/EffectComposer.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/RenderPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/ShaderPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/UnrealBloomPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/shaders/CopyShader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/shaders/LuminosityHighPassShader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/SSAOPass.js"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #000;
+            color: white;
+            font-family: 'Arial', sans-serif;
+        }
+        #canvas-container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        #ui {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            z-index: 100;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 15px;
+            border-radius: 10px;
+            backdrop-filter: blur(5px);
+        }
+        #audio-controls {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        #file-input {
+            display: none;
+        }
+        .control-btn {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            padding: 8px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .control-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .slider-container {
+            margin-top: 10px;
+        }
+        .slider-container label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 12px;
+        }
+        .slider {
+            width: 100%;
+        }
+        #loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            flex-direction: column;
+        }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            border-top-color: #4f46e5;
+            animation: spin 1s ease-in-out infinite;
+            margin-bottom: 20px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        #visual-presets {
+            margin-top: 15px;
+        }
+        .preset-btn {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+            margin-right: 5px;
+            font-size: 12px;
+            transition: all 0.2s;
+        }
+        .preset-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .preset-btn.active {
+            background: #4f46e5;
+            border-color: #4f46e5;
+        }
+    </style>
+</head>
+<body>
+    <div id="loading">
+        <div class="spinner"></div>
+        <div>Loading 3D visualization engine...</div>
+    </div>
+    <div id="canvas-container"></div>
+    <div id="ui">
+        <div id="audio-controls">
+            <button id="play-btn" class="control-btn">Play</button>
+            <button id="pause-btn" class="control-btn">Pause</button>
+            <button id="file-btn" class="control-btn">Load Audio</button>
+            <input type="file" id="file-input" accept="audio/*">
+            <button id="mic-btn" class="control-btn">Use Microphone</button>
+        </div>
+        <div class="slider-container">
+            <label for="volume-slider">Volume</label>
+            <input type="range" id="volume-slider" class="slider" min="0" max="1" step="0.01" value="0.7">
+        </div>
+        <div class="slider-container">
+            <label for="bass-slider">Bass Intensity</label>
+            <input type="range" id="bass-slider" class="slider" min="0" max="2" step="0.1" value="1">
+        </div>
+        <div class="slider-container">
+            <label for="mid-slider">Mid Intensity</label>
+            <input type="range" id="mid-slider" class="slider" min="0" max="2" step="0.1" value="1">
+        </div>
+        <div class="slider-container">
+            <label for="high-slider">High Intensity</label>
+            <input type="range" id="high-slider" class="slider" min="0" max="2" step="0.1" value="1">
+        </div>
+        <div id="visual-presets">
+            <div style="margin-bottom: 5px; font-size: 12px;">Visual Presets:</div>
+            <button class="preset-btn active" data-preset="default">Neon Geometry</button>
+            <button class="preset-btn" data-preset="crystalline">Crystalline</button>
+            <button class="preset-btn" data-preset="organic">Organic</button>
+            <button class="preset-btn" data-preset="wireframe">Wireframe</button>
+        </div>
+    </div>
+    <script>
+        // Wait for everything to load
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(() => {
+                document.getElementById('loading').style.display = 'none';
+                init();
+            }, 1500);
+        });
+        let scene, camera, renderer, composer, bloomPass, audioContext, analyser, dataArray;
+        let bassGroup, midGroup, highGroup, particleSystem, wireframeStructures = [];
+        let audioSource, isPlaying = false, currentPreset = 'default';
+        let cameraTargets = [];
+        let currentCameraTarget = 0;
+        let lastCameraChange = 0;
+        let cameraControls;
+        let clock = new THREE.Clock();
+        // Frequency ranges
+        const BASS_RANGE = [20, 140];
+        const MID_RANGE = [140, 2000];
+        const HIGH_RANGE = [2000, 20000];
+        // Color palettes for different presets
+        const colorPalettes = {
+            default: {
+                bass: [0x4f46e5, 0x8b5cf6, 0xa78bfa],
+                mid: [0xec4899, 0xf472b6, 0xf9a8d4],
+                high: [0x10b981, 0x34d399, 0x6ee7b7],
+                particles: [0xffffff, 0xfacc15, 0xf472b6],
+                wireframe: 0x4f46e5,
+                ambient: 0x111827
+            },
+            crystalline: {
+                bass: [0x3b82f6, 0x60a5fa, 0x93c5fd],
+                mid: [0x06b6d4, 0x22d3ee, 0x67e8f9],
+                high: [0xa855f7, 0xc084fc, 0xd8b4fe],
+                particles: [0xffffff, 0xe0e7ff, 0xbfdbfe],
+                wireframe: 0x3b82f6,
+                ambient: 0x0c1a32
+            },
+            organic: {
+                bass: [0x10b981, 0x34d399, 0x6ee7b7],
+                mid: [0xf59e0b, 0xfbbf24, 0xfcd34d],
+                high: [0xef4444, 0xf87171, 0xfca5a5],
+                particles: [0xffffff, 0xfef3c7, 0xfecaca],
+                wireframe: 0x10b981,
+                ambient: 0x1c1917
+            },
+            wireframe: {
+                bass: [0xffffff, 0xe5e7eb, 0xd1d5db],
+                mid: [0xffffff, 0xe5e7eb, 0xd1d5db],
+                high: [0xffffff, 0xe5e7eb, 0xd1d5db],
+                particles: [0xffffff, 0xe5e7eb, 0xd1d5db],
+                wireframe: 0xffffff,
+                ambient: 0x000000
+            }
+        };
+        function init() {
+            // Create scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x000000);
+            scene.fog = new THREE.FogExp2(0x000000, 0.002);
+            // Create camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 0, 30);
+            // Create renderer with antialiasing
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 1.5;
+            document.getElementById('canvas-container').appendChild(renderer.domElement);
+            // Post-processing setup
+            composer = new THREE.EffectComposer(renderer);
+            const renderPass = new THREE.RenderPass(scene, camera);
+            composer.addPass(renderPass);
+            bloomPass = new THREE.UnrealBloomPass(
+                new THREE.Vector2(window.innerWidth, window.innerHeight),
+                1.5, 0.4, 0.85
+            );
+            composer.addPass(bloomPass);
+            // Camera controls
+            cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
+            cameraControls.enableDamping = true;
+            cameraControls.dampingFactor = 0.05;
+            cameraControls.screenSpacePanning = false;
+            cameraControls.maxPolarAngle = Math.PI;
+            cameraControls.minDistance = 10;
+            cameraControls.maxDistance = 100;
+            // Setup lights
+            setupLights();
+            // Create audio visualizer elements
+            createVisualizerElements();
+            // Setup camera targets
+            setupCameraTargets();
+            // Setup event listeners
+            setupEventListeners();
+            // Start animation loop
+            animate();
+            // Initialize Web Audio API
+            initAudio();
+        }
+        function setupLights() {
+            // Ambient light
+            const ambientLight = new THREE.AmbientLight(colorPalettes[currentPreset].ambient, 0.2);
+            scene.add(ambientLight);
+            // Directional light
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+            directionalLight.position.set(1, 1, 1);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 2048;
+            directionalLight.shadow.mapSize.height = 2048;
+            directionalLight.shadow.camera.near = 0.5;
+            directionalLight.shadow.camera.far = 500;
+            directionalLight.shadow.camera.left = -50;
+            directionalLight.shadow.camera.right = 50;
+            directionalLight.shadow.camera.top = 50;
+            directionalLight.shadow.camera.bottom = -50;
+            scene.add(directionalLight);
+            // Point lights
+            const pointLight1 = new THREE.PointLight(0xff00ff, 1, 50);
+            pointLight1.position.set(20, 20, 20);
+            scene.add(pointLight1);
+            const pointLight2 = new THREE.PointLight(0x00ffff, 1, 50);
+            pointLight2.position.set(-20, -20, 20);
+            scene.add(pointLight2);
+            // Hemisphere light
+            const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.5);
+            scene.add(hemisphereLight);
+        }
+        function createVisualizerElements() {
+            // Create groups for different frequency ranges
+            bassGroup = new THREE.Group();
+            midGroup = new THREE.Group();
+            highGroup = new THREE.Group();
+            scene.add(bassGroup, midGroup, highGroup);
+            // Create bass elements (large geometric forms)
+            createBassElements();
+            // Create mid elements (medium geometric forms)
+            createMidElements();
+            // Create high elements (small geometric forms and particles)
+            createHighElements();
+            // Create particle system
+            createParticleSystem();
+            // Create wireframe structures
+            createWireframeStructures();
+            // Create floating crystalline structures
+            createCrystallineStructures();
+            // Create organic morphing forms
+            createOrganicForms();
+        }
+        function createBassElements() {
+            // Large central dodecahedron
+            const geometry = new THREE.DodecahedronGeometry(5, 0);
+            const material = new THREE.MeshPhysicalMaterial({
+                color: colorPalettes[currentPreset].bass[0],
+                metalness: 0.8,
+                roughness: 0.2,
+                clearcoat: 1,
+                clearcoatRoughness: 0.1,
+                transmission: 0.5,
+                ior: 1.5,
+                envMapIntensity: 1,
+                emissive: colorPalettes[currentPreset].bass[0],
+                emissiveIntensity: 0.2
+            });
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+            bassGroup.add(mesh);
+            // Surrounding icosahedrons
+            for (let i = 0; i < 6; i++) {
+                const angle = (i / 6) * Math.PI * 2;
+                const radius = 8 + Math.random() * 2;
+                const x = Math.cos(angle) * radius;
+                const y = Math.sin(angle) * radius;
+                const geo = new THREE.IcosahedronGeometry(2 + Math.random(), 1);
+                const mat = new THREE.MeshPhysicalMaterial({
+                    color: colorPalettes[currentPreset].bass[1 + Math.floor(Math.random() * 2)],
+                    metalness: 0.7,
+                    roughness: 0.3,
+                    clearcoat: 0.5,
+                    emissive: colorPalettes[currentPreset].bass[1 + Math.floor(Math.random() * 2)],
+                    emissiveIntensity: 0.1
+                });
+                const icosa = new THREE.Mesh(geo, mat);
+                icosa.position.set(x, y, 0);
+                icosa.castShadow = true;
+                icosa.receiveShadow = true;
+                bassGroup.add(icosa);
+            }
+        }
+        function createMidElements() {
+            // Torus knots
+            for (let i = 0; i < 12; i++) {
+                const angle = (i / 12) * Math.PI * 2;
+                const radius = 12 + Math.random() * 3;
+                const x = Math.cos(angle) * radius;
+                const y = Math.sin(angle) * radius;
+                const z = (Math.random() - 0.5) * 10;
+                const geo = new THREE.TorusKnotGeometry(
+                    1 + Math.random() * 0.5,
+                    0.3 + Math.random() * 0.2,
+                    100, 16
+                );
+                const mat = new THREE.MeshPhysicalMaterial({
+                    color: colorPalettes[currentPreset].mid[i % colorPalettes[currentPreset].mid.length],
+                    metalness: 0.6,
+                    roughness: 0.4,
+                    clearcoat: 0.7,
+                    emissive: colorPalettes[currentPreset].mid[i % colorPalettes[currentPreset].mid.length],
+                    emissiveIntensity: 0.2
+                });
+                const torus = new THREE.Mesh(geo, mat);
+                torus.position.set(x, y, z);
+                torus.castShadow = true;
+                torus.receiveShadow = true;
+                midGroup.add(torus);
+            }
+        }
+        function createHighElements() {
+            // Small spheres
+            for (let i = 0; i < 24; i++) {
+                const angle = (i / 24) * Math.PI * 2;
+                const radius = 15 + Math.random() * 5;
+                const x = Math.cos(angle) * radius;
+                const y = Math.sin(angle) * radius;
+                const z = (Math.random() - 0.5) * 15;
+                const geo = new THREE.SphereGeometry(0.5 + Math.random() * 0.3, 16, 16);
+                const mat = new THREE.MeshPhysicalMaterial({
+                    color: colorPalettes[currentPreset].high[i % colorPalettes[currentPreset].high.length],
+                    metalness: 0.5,
+                    roughness: 0.5,
+                    clearcoat: 0.8,
+                    emissive: colorPalettes[currentPreset].high[i % colorPalettes[currentPreset].high.length],
+                    emissiveIntensity: 0.3
+                });
+                const sphere = new THREE.Mesh(geo, mat);
+                sphere.position.set(x, y, z);
+                sphere.castShadow = true;
+                sphere.receiveShadow = true;
+                highGroup.add(sphere);
+            }
+        }
+        function createParticleSystem() {
+            const particleCount = 2000;
+            const particles = new THREE.BufferGeometry();
+            const positions = new Float32Array(particleCount * 3);
+            const colors = new Float32Array(particleCount * 3);
+            const sizes = new Float32Array(particleCount);
+            for (let i = 0; i < particleCount; i++) {
+                // Positions
+                const radius = 5 + Math.random() * 20;
+                const theta = Math.random() * Math.PI * 2;
+                const phi = Math.acos(2 * Math.random() - 1);
+                positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
+                positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
+                positions[i * 3 + 2] = radius * Math.cos(phi);
+                // Colors
+                const colorIndex = Math.floor(Math.random() * colorPalettes[currentPreset].particles.length);
+                const color = new THREE.Color(colorPalettes[currentPreset].particles[colorIndex]);
+                colors[i * 3] = color.r;
+                colors[i * 3 + 1] = color.g;
+                colors[i * 3 + 2] = color.b;
+                // Sizes
+                sizes[i] = 0.1 + Math.random() * 0.5;
+            }
+            particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            particles.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+            const particleMaterial = new THREE.PointsMaterial({
+                size: 0.2,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending,
+                sizeAttenuation: true
+            });
+            particleSystem = new THREE.Points(particles, particleMaterial);
+            scene.add(particleSystem);
+        }
+        function createWireframeStructures() {
+            // Create several complex wireframe structures
+            for (let i = 0; i < 5; i++) {
+                const group = new THREE.Group();
+                // Create a base shape
+                let geometry;
+                switch (i % 3) {
+                    case 0:
+                        geometry = new THREE.OctahedronGeometry(3 + Math.random() * 2, 1);
+                        break;
+                    case 1:
+                        geometry = new THREE.TorusKnotGeometry(2 + Math.random(), 0.5, 100, 16);
+                        break;
+                    case 2:
+                        geometry = new THREE.IcosahedronGeometry(3 + Math.random(), 1);
+                        break;
+                }
+                // Convert to wireframe
+                const wireframe = new THREE.LineSegments(
+                    new THREE.WireframeGeometry(geometry),
+                    new THREE.LineBasicMaterial({
+                        color: colorPalettes[currentPreset].wireframe,
+                        transparent: true,
+                        opacity: 0.6,
+                        linewidth: 2
+                    })
+                );
+                // Position randomly
+                wireframe.position.x = (Math.random() - 0.5) * 30;
+                wireframe.position.y = (Math.random() - 0.5) * 30;
+                wireframe.position.z = (Math.random() - 0.5) * 30;
+                // Random rotation
+                wireframe.rotation.x = Math.random() * Math.PI;
+                wireframe.rotation.y = Math.random() * Math.PI;
+                group.add(wireframe);
+                scene.add(group);
+                wireframeStructures.push(group);
+            }
+        }
+        function createCrystallineStructures() {
+            // Create several crystalline structures
+            for (let i = 0; i < 8; i++) {
+                const group = new THREE.Group();
+                // Create a cluster of crystals
+                const crystalCount = 3 + Math.floor(Math.random() * 5);
+                for (let j = 0; j < crystalCount; j++) {
+                    const height = 1 + Math.random() * 2;
+                    const radius = 0.3 + Math.random() * 0.5;
+                    const sides = 4 + Math.floor(Math.random() * 3) * 2; // 4, 6 or 8 sides
+                    const geometry = new THREE.CylinderGeometry(
+                        0, radius, height, sides, 1, true
+                    );
+                    const material = new THREE.MeshPhysicalMaterial({
+                        color: 0xffffff,
+                        metalness: 0.1,
+                        roughness: 0.1,
+                        transmission: 0.9,
+                        ior: 1.5,
+                        thickness: 0.5,
+                        envMapIntensity: 1,
+                        emissive: colorPalettes[currentPreset].high[i % colorPalettes[currentPreset].high.length],
+                        emissiveIntensity: 0.3
+                    });
+                    const crystal = new THREE.Mesh(geometry, material);
+                    // Position within cluster
+                    crystal.position.x = (Math.random() - 0.5) * 3;
+                    crystal.position.y = (Math.random() - 0.5) * 3;
+                    crystal.position.z = (Math.random() - 0.5) * 3;
+                    // Rotate randomly
+                    crystal.rotation.x = Math.random() * Math.PI;
+                    crystal.rotation.y = Math.random() * Math.PI;
+                    crystal.rotation.z = Math.random() * Math.PI;
+                    group.add(crystal);
+                }
+                // Position cluster in scene
+                group.position.x = (Math.random() - 0.5) * 40;
+                group.position.y = (Math.random() - 0.5) * 40;
+                group.position.z = (Math.random() - 0.5) * 40;
+                scene.add(group);
+                wireframeStructures.push(group); // Reuse same array for simplicity
+            }
+        }
+        function createOrganicForms() {
+            // Create several organic-looking forms
+            for (let i = 0; i < 4; i++) {
+                const group = new THREE.Group();
+                // Create a blob-like shape
+                const geometry = new THREE.SphereGeometry(
+                    1.5 + Math.random(),
+                    32, 32
+                );
+                // Displace vertices to create organic shape
+                const positionAttribute = geometry.getAttribute('position');
+                const vertex = new THREE.Vector3();
+                for (let j = 0; j < positionAttribute.count; j++) {
+                    vertex.fromBufferAttribute(positionAttribute, j);
+                    vertex.normalize();
+                    const radius = 1 + Math.random() * 0.5;
+                    vertex.multiplyScalar(radius);
+                    positionAttribute.setXYZ(j, vertex.x, vertex.y, vertex.z);
+                }
+                geometry.computeVertexNormals();
+                const material = new THREE.MeshPhysicalMaterial({
+                    color: colorPalettes[currentPreset].mid[i % colorPalettes[currentPreset].mid.length],
+                    metalness: 0.3,
+                    roughness: 0.7,
+                    clearcoat: 0.5,
+                    transmission: 0.3,
+                    emissive: colorPalettes[currentPreset].mid[i % colorPalettes[currentPreset].mid.length],
+                    emissiveIntensity: 0.2
+                });
+                const blob = new THREE.Mesh(geometry, material);
+                // Position in scene
+                blob.position.x = (Math.random() - 0.5) * 30;
+                blob.position.y = (Math.random() - 0.5) * 30;
+                blob.position.z = (Math.random() - 0.5) * 30;
+                group.add(blob);
+                scene.add(group);
+                wireframeStructures.push(group); // Reuse same array for simplicity
+            }
+        }
+        function setupCameraTargets() {
+            // Create several interesting camera positions and look-at points
+            cameraTargets = [
+                { position: new THREE.Vector3(0, 0, 30), lookAt: new THREE.Vector3(0, 0, 0) },
+                { position: new THREE.Vector3(20, 10, 20), lookAt: new THREE.Vector3(0, 0, 0) },
+                { position: new THREE.Vector3(-15, 15, 25), lookAt: new THREE.Vector3(0, 5, 0) },
+                { position: new THREE.Vector3(0, 25, 15), lookAt: new THREE.Vector3(0, 0, 0) },
+                { position: new THREE.Vector3(30, 0, 0), lookAt: new THREE.Vector3(0, 0, 0) },
+                { position: new THREE.Vector3(-20, -10, 20), lookAt: new THREE.Vector3(0, 0, 0) }
+            ];
+        }
+        function setupEventListeners() {
+            // Window resize
+            window.addEventListener('resize', onWindowResize);
+            // Audio controls
+            document.getElementById('play-btn').addEventListener('click', playAudio);
+            document.getElementById('pause-btn').addEventListener('click', pauseAudio);
+            document.getElementById('file-btn').addEventListener('click', () => document.getElementById('file-input').click());
+            document.getElementById('mic-btn').addEventListener('click', useMicrophone);
+            document.getElementById('file-input').addEventListener('change', handleFileSelect);
+            // Sliders
+            document.getElementById('volume-slider').addEventListener('input', (e) => {
+                if (audioSource) audioSource.gain.value = e.target.value;
+            });
+            // Preset buttons
+            document.querySelectorAll('.preset-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    currentPreset = btn.dataset.preset;
+                    document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    updateMaterials();
+                });
+            });
+        }
+        function initAudio() {
+            audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            analyser = audioContext.createAnalyser();
+            analyser.fftSize = 2048;
+            dataArray = new Uint8Array(analyser.frequencyBinCount);
+        }
+        function playAudio() {
+            if (!isPlaying && audioSource) {
+                audioSource.connect(analyser);
+                analyser.connect(audioContext.destination);
+                isPlaying = true;
+            }
+        }
+        function pauseAudio() {
+            if (isPlaying && audioSource) {
+                audioSource.disconnect();
+                isPlaying = false;
+            }
+        }
+        function useMicrophone() {
+            navigator.mediaDevices.getUserMedia({ audio: true, video: false })
+                .then(stream => {
+                    if (audioSource) audioSource.disconnect();
+                    audioSource = audioContext.createMediaStreamSource(stream);
+                    audioSource.connect(analyser);
+                    analyser.connect(audioContext.destination);
+                    // Create gain node for volume control
+                    const gainNode = audioContext.createGain();
+                    audioSource.disconnect();
+                    audioSource.connect(gainNode);
+                    gainNode.connect(analyser);
+                    audioSource = gainNode;
+                    // Set initial volume
+                    gainNode.gain.value = document.getElementById('volume-slider').value;
+                    isPlaying = true;
+                })
+                .catch(err => {
+                    console.error('Error accessing microphone:', err);
+                    alert('Could not access microphone. Please check permissions.');
+                });
+        }
+        function handleFileSelect(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                audioContext.decodeAudioData(e.target.result)
+                    .then(buffer => {
+                        if (audioSource) audioSource.disconnect();
+                        audioSource = audioContext.createBufferSource();
+                        audioSource.buffer = buffer;
+                        // Create gain node for volume control
+                        const gainNode = audioContext.createGain();
+                        audioSource.connect(gainNode);
+                        gainNode.connect(analyser);
+                        audioSource = gainNode;
+                        // Set initial volume
+                        gainNode.gain.value = document.getElementById('volume-slider').value;
+                        audioSource.loop = true;
+                        audioSource.start();
+                        isPlaying = true;
+                    })
+                    .catch(err => {
+                        console.error('Error decoding audio file:', err);
+                        alert('Error loading audio file. Please try a different file.');
+                    });
+            };
+            reader.readAsArrayBuffer(file);
+        }
+        function updateMaterials() {
+            // Update all materials based on current preset
+            scene.traverse(obj => {
+                if (obj.isMesh) {
+                    if (obj.material instanceof THREE.MeshPhysicalMaterial) {
+                        // Determine which color palette to use based on which group the object is in
+                        let palette;
+                        if (bassGroup.children.includes(obj)) palette = colorPalettes[currentPreset].bass;
+                        else if (midGroup.children.includes(obj)) palette = colorPalettes[currentPreset].mid;
+                        else if (highGroup.children.includes(obj)) palette = colorPalettes[currentPreset].high;
+                        else palette = colorPalettes[currentPreset].mid; // Default
+                        // Select a color from the palette
+                        const colorIndex = Math.floor(Math.random() * palette.length);
+                        const color = palette[colorIndex];
+                        // Update material properties
+                        obj.material.color.setHex(color);
+                        obj.material.emissive.setHex(color);
+                    }
+                } else if (obj.isLine) {
+                    obj.material.color.setHex(colorPalettes[currentPreset].wireframe);
+                }
+            });
+            // Update particle colors
+            if (particleSystem) {
+                const colors = particleSystem.geometry.attributes.color;
+                for (let i = 0; i < colors.count; i++) {
+                    const colorIndex = Math.floor(Math.random() * colorPalettes[currentPreset].particles.length);
+                    const color = new THREE.Color(colorPalettes[currentPreset].particles[colorIndex]);
+                    colors.setXYZ(i, color.r, color.g, color.b);
+                }
+                colors.needsUpdate = true;
+            }
+            // Update ambient light
+            scene.traverse(obj => {
+                if (obj.isAmbientLight) {
+                    obj.color.setHex(colorPalettes[currentPreset].ambient);
+                }
+            });
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            composer.setSize(window.innerWidth, window.innerHeight);
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            const time = clock.getElapsedTime();
+            // Update audio analyzer data if playing
+            if (isPlaying && analyser) {
+                analyser.getByteFrequencyData(dataArray);
+                // Calculate frequency ranges
+                const bassData = getFrequencyRangeValue(dataArray, BASS_RANGE);
+                const midData = getFrequencyRangeValue(dataArray, MID_RANGE);
+                const highData = getFrequencyRangeValue(dataArray, HIGH_RANGE);
+                const overallVolume = getOverallVolume(dataArray);
+                // Apply intensity multipliers from sliders
+                const bassIntensity = document.getElementById('bass-slider').value;
+                const midIntensity = document.getElementById('mid-slider').value;
+                const highIntensity = document.getElementById('high-slider').value;
+                // Update visual elements based on audio data
+                updateBassElements(bassData * bassIntensity, time);
+                updateMidElements(midData * midIntensity, time);
+                updateHighElements(highData * highIntensity, time);
+                updateParticleSystem(highData * highIntensity, time);
+                updateWireframeStructures(overallVolume, time);
+                // Update bloom effect based on overall volume
+                bloomPass.strength = 1 + overallVolume * 2;
+            }
+            // Rotate groups slowly
+            bassGroup.rotation.y += 0.001;
+            midGroup.rotation.y -= 0.0005;
+            highGroup.rotation.x += 0.0003;
+            // Move camera between targets periodically
+            if (time - lastCameraChange > 8) {
+                lastCameraChange = time;
+                currentCameraTarget = (currentCameraTarget + 1) % cameraTargets.length;
+            }
+            // Smooth camera transition
+            const target = cameraTargets[currentCameraTarget];
+            camera.position.lerp(target.position, 0.01);
+            cameraControls.target.lerp(target.lookAt, 0.01);
+            // Update camera controls
+            cameraControls.update();
+            // Render scene with post-processing
+            composer.render();
+        }
+        function getFrequencyRangeValue(dataArray, [lowFreq, highFreq]) {
+            const sampleRate = audioContext.sampleRate;
+            const binCount = analyser.frequencyBinCount;
+            const lowIndex = Math.round(lowFreq / (sampleRate / 2) * binCount);
+            const highIndex = Math.round(highFreq / (sampleRate / 2) * binCount);
+            let total = 0;
+            let count = 0;
+            for (let i = lowIndex; i <= highIndex; i++) {
+                total += dataArray[i];
+                count++;
+            }
+            return count > 0 ? total / count / 255 : 0;
+        }
+        function getOverallVolume(dataArray) {
+            let total = 0;
+            for (let i = 0; i < dataArray.length; i++) {
+                total += dataArray[i];
+            }
+            return total / dataArray.length / 255;
+        }
+        function updateBassElements(intensity, time) {
+            bassGroup.children.forEach((child, i) => {
+                if (i === 0) {
+                    // Main central shape - scale with bass
+                    const scale = 1 + intensity * 0.5;
+                    child.scale.set(scale, scale, scale);
+                    // Pulsing emissive
+                    child.material.emissiveIntensity = 0.2 + intensity * 0.8;
+                } else {
+                    // Surrounding shapes - move outward with bass
+                    const angle = (i / (bassGroup.children.length - 1)) * Math.PI * 2;
+                    const baseRadius = 8;
+                    const radius = baseRadius + intensity * 5;
+                    child.position.x = Math.cos(angle + time * 0.2) * radius;
+                    child.position.y = Math.sin(angle + time * 0.2) * radius;
+                    // Rotate
+                    child.rotation.x += 0.01;
+                    child.rotation.y += 0.01;
+                    // Scale slightly
+                    const scale = 1 + intensity * 0.3;
+                    child.scale.set(scale, scale, scale);
+                }
+            });
+        }
+        function updateMidElements(intensity, time) {
+            midGroup.children.forEach((child, i) => {
+                // Move in circular patterns
+                const angle = (i / midGroup.children.length) * Math.PI * 2;
+                const baseRadius = 12;
+                const radius = baseRadius + intensity * 3;
+                child.position.x = Math.cos(angle + time * 0.3) * radius;
+                child.position.y = Math.sin(angle + time * 0.3) * radius;
+                // Rotate
+                child.rotation.x += 0.02;
+                child.rotation.z += 0.01;
+                // Scale
+                const scale = 1 + intensity * 0.2;
+                child.scale.set(scale, scale, scale);
+                // Pulsing emissive
+                child.material.emissiveIntensity = 0.2 + intensity * 0.6;
+            });
+        }
+        function updateHighElements(intensity, time) {
+            highGroup.children.forEach((child, i) => {
+                // Move in more complex patterns
+                const angle = (i / highGroup.children.length) * Math.PI * 2;
+                const baseRadius = 15;
+                const radius = baseRadius + intensity * 4;
+                const height = Math.sin(time * 0.5 + i) * 5;
+                child.position.x = Math.cos(angle + time * 0.4) * radius;
+                child.position.y = Math.sin(angle + time * 0.4) * radius;
+                child.position.z = height;
+                // Scale
+                const scale = 1 + intensity * 0.4;
+                child.scale.set(scale, scale, scale);
+                // Pulsing emissive
+                child.material.emissiveIntensity = 0.3 + intensity * 0.7;
+            });
+        }
+        function updateParticleSystem(intensity, time) {
+            const particles = particleSystem.geometry.attributes.position;
+            const originalPositions = particleSystem.geometry.attributes.originalPosition || particles;
+            // Store original positions if not already done
+            if (!particleSystem.geometry.attributes.originalPosition) {
+                const origPos = new Float32Array(particles.count * 3);
+                for (let i = 0; i < particles.count * 3; i++) {
+                    origPos[i] = particles.array[i];
+                }
+                particleSystem.geometry.setAttribute(
+                    'originalPosition',
+                    new THREE.BufferAttribute(origPos, 3)
+                );
+            }
+            // Update particle positions based on audio
+            for (let i = 0; i < particles.count; i++) {
+                const ix = i * 3;
+                const iy = i * 3 + 1;
+                const iz = i * 3 + 2;
+                // Get original position
+                const ox = originalPositions.array[ix];
+                const oy = originalPositions.array[iy];
+                const oz = originalPositions.array[iz];
+                // Calculate displacement based on audio
+                const displacement = intensity * 5;
+                const noise = Math.sin(time * 2 + i * 0.1) * displacement;
+                // Apply displacement
+                particles.array[ix] = ox + noise * 0.3;
+                particles.array[iy] = oy + noise * 0.3;
+                particles.array[iz] = oz + noise * 0.3;
+            }
+            particles.needsUpdate = true;
+            // Rotate particle system
+            particleSystem.rotation.y += 0.001;
+        }
+        function updateWireframeStructures(intensity, time) {
+            wireframeStructures.forEach((group, i) => {
+                // Float up and down slowly
+                group.position.y += Math.sin(time * 0.1 + i) * 0.02;
+                // Rotate
+                group.rotation.x += 0.005;
+                group.rotation.y += 0.007;
+                group.rotation.z += 0.003;
+                // Scale slightly with audio
+                const scale = 1 + intensity * 0.5;
+                group.scale.set(scale, scale, scale);
+                // Update line opacity based on audio
+                group.children.forEach(child => {
+                    if (child.isLine) {
+                        child.material.opacity = 0.4 + intensity * 0.6;
+                    }
+                });
+            });
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Fabriwin/audio-dimension" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>