css update

static/css/style.css

@@ -892,7 +892,7 @@ input[type="file"] {
 .viz-type-dropdown {
     position: fixed;
     top: 60px;
-    right: -200px;
+    right: -220px;
     background: var(--surface-color);
     backdrop-filter: blur(12px);
     border-radius: 8px;

static/js/main.js

@@ -30,6 +30,22 @@ let visualizers = {
 let isShuffleActive = false;
 let isRepeatActive = false;
 
+// Add visualization-specific camera positions
+const visualizerSettings = {
+    bars: {
+        cameraZ: 8,
+        baseRadius: 2
+    },
+    sphere: {
+        cameraZ: 5,
+        baseRadius: 1
+    },
+    particles: {
+        cameraZ: 20,
+        baseRadius: 8
+    }
+};
+
 // Theme button functionality
 const themeBtn = document.querySelector('.theme-btn');
 if (themeBtn) {
@@ -66,59 +82,107 @@ function initAudio() {
 // Visualization creation functions
 function createBarsVisualization() {
     const geometry = new THREE.BoxGeometry(0.1, 1, 0.1);
-    const material = new THREE.MeshPhongMaterial({ color: 0x4CAF50 });
-    const numBars = 64;
+    const numBars = 128;
+    const materials = [
+        new THREE.MeshPhongMaterial({ color: 0x4CAF50 }),
+        new THREE.MeshPhongMaterial({ color: 0x2196F3 }),
+        new THREE.MeshPhongMaterial({ color: 0xFF4081 })
+    ];
     
     for (let i = 0; i < numBars; i++) {
+        const material = materials[i % materials.length];
         const bar = new THREE.Mesh(geometry, material);
         const angle = (i / numBars) * Math.PI * 2;
-        bar.position.x = Math.cos(angle) * 2;
-        bar.position.z = Math.sin(angle) * 2;
+        const radius = 2;
+        bar.position.x = Math.cos(angle) * radius;
+        bar.position.z = Math.sin(angle) * radius;
+        bar.userData.initialY = bar.position.y;
+        bar.userData.phase = i * 0.1;
         scene.add(bar);
         visualizers.bars.push(bar);
     }
 
-    // Add lighting
-    const light = new THREE.PointLight(0xffffff, 1, 100);
+    // Enhanced lighting
+    const light = new THREE.PointLight(0xffffff, 1.5, 100);
     light.position.set(0, 5, 0);
     scene.add(light);
     
-    const ambientLight = new THREE.AmbientLight(0x404040);
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
     scene.add(ambientLight);
 }
 
 function createSphereVisualization() {
-    const geometry = new THREE.SphereGeometry(1, 32, 32);
+    const geometry = new THREE.IcosahedronGeometry(1, 4);
     const material = new THREE.MeshPhongMaterial({
         color: 0x4CAF50,
-        wireframe: true
+        wireframe: true,
+        emissive: 0x2196F3,
+        emissiveIntensity: 0.5,
+        shininess: 50
     });
     visualizers.sphere = new THREE.Mesh(geometry, material);
+    
+    // Store original vertex positions
+    visualizers.sphere.userData.originalPositions = 
+        geometry.attributes.position.array.slice();
+    
     scene.add(visualizers.sphere);
 
-    // Add lighting
-    const light = new THREE.PointLight(0xffffff, 1, 100);
-    light.position.set(0, 5, 0);
-    scene.add(light);
+    // Enhanced lighting
+    const light1 = new THREE.PointLight(0xFF4081, 1, 100);
+    light1.position.set(5, 5, 5);
+    scene.add(light1);
+
+    const light2 = new THREE.PointLight(0x2196F3, 1, 100);
+    light2.position.set(-5, -5, -5);
+    scene.add(light2);
 }
 
 function createParticlesVisualization() {
-    const particleCount = 1000;
+    const particleCount = 2000;
     const geometry = new THREE.BufferGeometry();
     const positions = new Float32Array(particleCount * 3);
+    const colors = new Float32Array(particleCount * 3);
+    const sizes = new Float32Array(particleCount);
+    
+    const color1 = new THREE.Color(0x4CAF50);
+    const color2 = new THREE.Color(0x2196F3);
+    const color3 = new THREE.Color(0xFF4081);
     
     for (let i = 0; i < particleCount * 3; i += 3) {
-        positions[i] = (Math.random() - 0.5) * 3;
-        positions[i + 1] = (Math.random() - 0.5) * 3;
-        positions[i + 2] = (Math.random() - 0.5) * 3;
+        // Create spiral pattern with larger radius
+        const angle = (i / particleCount) * Math.PI * 8;
+        const radius = (Math.random() * 4) + 2;
+        
+        positions[i] = Math.cos(angle) * radius;
+        positions[i + 1] = (Math.random() - 0.5) * 6;
+        positions[i + 2] = Math.sin(angle) * radius;
+        
+        // Interpolate between colors based on position
+        const colorMix = Math.abs(Math.sin(angle));
+        const finalColor = new THREE.Color().lerpColors(
+            color1,
+            colorMix > 0.5 ? color2 : color3,
+            colorMix
+        );
+        
+        colors[i] = finalColor.r;
+        colors[i + 1] = finalColor.g;
+        colors[i + 2] = finalColor.b;
+        
+        sizes[i / 3] = Math.random() * 0.1 + 0.05;
     }
     
     geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+    geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
     
     const material = new THREE.PointsMaterial({
-        color: 0x4CAF50,
-        size: 0.05,
-        transparent: true
+        size: 0.15,
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.8,
+        blending: THREE.AdditiveBlending
     });
     
     visualizers.particles = new THREE.Points(geometry, material);
@@ -127,44 +191,91 @@ function createParticlesVisualization() {
 
 // Visualization update functions
 function updateBarsVisualization(dataArray) {
-    const multiplier = 0.01;
+    const time = Date.now() * 0.001;
+    const multiplier = 0.015;
+    
     visualizers.bars.forEach((bar, i) => {
         const value = dataArray[i] * multiplier;
+        // Add wave effect
+        const wave = Math.sin(time * 2 + bar.userData.phase) * 0.1;
         bar.scale.y = value + 0.1;
-        bar.position.y = value / 2;
+        bar.position.y = (value / 2) + wave;
+        
+        // Rotate bars based on audio
+        bar.rotation.y = time * 0.1 + (value * 0.1);
+        
+        // Update bar color based on frequency
+        const hue = (i / visualizers.bars.length) + (time * 0.1);
+        bar.material.color.setHSL(hue, 0.7, 0.5);
     });
 }
 
 function updateSphereVisualization(dataArray) {
     if (!visualizers.sphere) return;
     
-    const averageFrequency = dataArray.reduce((a, b) => a + b) / dataArray.length;
-    const scale = 1 + (averageFrequency * 0.003);
-    visualizers.sphere.scale.set(scale, scale, scale);
+    const positions = visualizers.sphere.geometry.attributes.position.array;
+    const originalPositions = visualizers.sphere.userData.originalPositions;
+    const time = Date.now() * 0.001;
+    
+    for (let i = 0; i < positions.length; i += 3) {
+        const i3 = i / 3;
+        const value = dataArray[i3 % dataArray.length] / 255;
+        
+        // Create complex deformation
+        const deform = value * 0.5;
+        positions[i] = originalPositions[i] * (1 + deform * Math.sin(time + i3));
+        positions[i + 1] = originalPositions[i + 1] * (1 + deform * Math.cos(time + i3));
+        positions[i + 2] = originalPositions[i + 2] * (1 + deform * Math.sin(time * 0.5 + i3));
+    }
+    
+    visualizers.sphere.geometry.attributes.position.needsUpdate = true;
     visualizers.sphere.rotation.y += 0.01;
+    visualizers.sphere.rotation.x += 0.005;
+    
+    // Update material colors
+    const hue = (Math.sin(time * 0.1) + 1) * 0.5;
+    visualizers.sphere.material.color.setHSL(hue, 0.7, 0.5);
+    visualizers.sphere.material.emissive.setHSL((hue + 0.5) % 1, 0.7, 0.3);
 }
 
 function updateParticlesVisualization(dataArray) {
     if (!visualizers.particles) return;
     
     const positions = visualizers.particles.geometry.attributes.position.array;
-    const multiplier = 0.02;
+    const colors = visualizers.particles.geometry.attributes.color.array;
+    const sizes = visualizers.particles.geometry.attributes.size.array;
+    const time = Date.now() * 0.001;
     
     for (let i = 0; i < positions.length; i += 3) {
-        const value = dataArray[i / 3] * multiplier;
-        const distance = Math.sqrt(
-            positions[i] * positions[i] +
-            positions[i + 1] * positions[i + 1] +
-            positions[i + 2] * positions[i + 2]
-        );
+        const i3 = i / 3;
+        const value = dataArray[i3 % dataArray.length] / 255;
+        
+        // Keep consistent radius while rotating
+        const angle = (i3 / positions.length) * Math.PI * 8 + time;
+        const baseRadius = 8; // Fixed base radius
+        
+        positions[i] = Math.cos(angle) * baseRadius;
+        positions[i + 1] += (Math.random() - 0.5) * 0.15;
+        positions[i + 2] = Math.sin(angle) * baseRadius;
         
-        positions[i] *= 1 + (value / distance);
-        positions[i + 1] *= 1 + (value / distance);
-        positions[i + 2] *= 1 + (value / distance);
+        // Update colors based on audio and position
+        const hue = (angle / (Math.PI * 2)) + time * 0.1;
+        const color = new THREE.Color().setHSL(hue, 0.7, 0.5 + value * 0.5);
+        colors[i] = color.r;
+        colors[i + 1] = color.g;
+        colors[i + 2] = color.b;
+        
+        // Update particle sizes with audio reactivity
+        sizes[i3] = (value * 0.3 + 0.08) * (1 + Math.sin(time + i3) * 0.2);
     }
     
     visualizers.particles.geometry.attributes.position.needsUpdate = true;
+    visualizers.particles.geometry.attributes.color.needsUpdate = true;
+    visualizers.particles.geometry.attributes.size.needsUpdate = true;
+    
+    // Rotate the entire particle system
     visualizers.particles.rotation.y += 0.001;
+    visualizers.particles.rotation.x += 0.0005;
 }
 
 // Animation loop
@@ -210,8 +321,8 @@ function setupOrbitControls() {
     controls.dampingFactor = 0.05;
     controls.enableZoom = true;
     controls.autoRotate = true;
-    controls.autoRotateSpeed = 2.0;
-    camera.position.z = 5;
+    controls.autoRotateSpeed = 1.5;
+    // Camera position is now set in createVisualization
 }
 
 // Handle file uploads
@@ -473,6 +584,9 @@ function createVisualization() {
         particles: null
     };
 
+    // Set camera position based on visualization type
+    camera.position.z = visualizerSettings[visualizationType].cameraZ;
+
     switch(visualizationType) {
         case 'bars':
             createBarsVisualization();