quant_Synth

Running

App Files Files Community

Joe-C-Wales commited on Oct 18, 2025

Commit

0540ef6

verified ·

1 Parent(s): 9bd30cb

Can you generate a funtion that can generate 3d viewable of the notes across distances or even a simplwe way to view the notes in this new position>

Browse files

Files changed (4) hide show

index.html +2 -1
quantum.html +2 -1
synthesizer.html +2 -1
visualization.html +324 -0

index.html CHANGED Viewed

@@ -52,9 +52,10 @@
                         <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
                         <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
                         <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
                     </ul>
                 </nav>
-            </div>
         </header>
         <!-- Hero Section -->

                         <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
                         <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
                         <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300">Visualization</a></li>
                     </ul>
                 </nav>
+</div>
         </header>
         <!-- Hero Section -->

quantum.html CHANGED Viewed

@@ -70,9 +70,10 @@
                         <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
                         <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
                         <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
                     </ul>
                 </nav>
-            </div>
         </header>
         <!-- Quantum Operations Section -->

                         <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
                         <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
                         <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300">Visualization</a></li>
                     </ul>
                 </nav>
+</div>
         </header>
         <!-- Quantum Operations Section -->

synthesizer.html CHANGED Viewed

@@ -60,9 +60,10 @@
                         <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
                         <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
                         <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
                     </ul>
                 </nav>
-            </div>
         </header>
         <!-- Synthesizer Section -->

                         <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
                         <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
                         <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300">Visualization</a></li>
                     </ul>
                 </nav>
+</div>
         </header>
         <!-- Synthesizer Section -->

visualization.html ADDED Viewed

	@@ -0,0 +1,324 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Visualization - Quantum Music</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        .quantum-bg {
+            background: linear-gradient(135deg, #6e45e2, #88d3ce);
+            background-size: 400% 400%;
+            animation: gradient 15s ease infinite;
+        }
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .hovered-element {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .hovered-element:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+        .stylized-font {
+            font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
+            letter-spacing: 1px;
+        }
+        #visualization-container {
+            width: 100%;
+            height: 500px;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 8px;
+            position: relative;
+            overflow: hidden;
+        }
+        .controls {
+            background: rgba(31, 41, 55, 0.7);
+            border-radius: 8px;
+            padding: 1rem;
+        }
+        .note-info {
+            background: rgba(31, 41, 55, 0.7);
+            border-radius: 8px;
+            padding: 1rem;
+            min-height: 100px;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="quantum-bg min-h-screen hovered-element">
+        <!-- Header -->
+        <header class="container mx-auto py-6 px-4 hovered-element">
+            <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold stylized-font">Quantum Music Synthesizer</h1>
+                <nav>
+                    <ul class="flex space-x-6">
+                        <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
+                        <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
+                        <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300">Visualization</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <!-- Visualization Section -->
+        <section class="container mx-auto py-16 px-4 hovered-element">
+            <h2 class="text-4xl font-bold text-center mb-12 stylized-font">3D Note Visualization</h2>
+            <div class="max-w-6xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-8 hovered-element">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+                    <div class="lg:col-span-2">
+                        <div id="visualization-container"></div>
+                    </div>
+                    <div class="space-y-6">
+                        <div class="controls">
+                            <h3 class="text-xl font-bold mb-4 stylized-font">Controls</h3>
+                            <div class="space-y-4">
+                                <div>
+                                    <label class="block mb-2">Rotation Speed</label>
+                                    <input type="range" id="rotation-speed" min="0" max="2" step="0.1" value="0.5" class="w-full">
+                                </div>
+                                <div>
+                                    <label class="block mb-2">Point Size</label>
+                                    <input type="range" id="point-size" min="1" max="10" step="0.5" value="3" class="w-full">
+                                </div>
+                                <div>
+                                    <button id="reset-view" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded w-full">
+                                        Reset View
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="note-info">
+                            <h3 class="text-xl font-bold mb-4 stylized-font">Selected Note</h3>
+                            <div id="note-details">
+                                <p>Click on a note to see details</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-8">
+                    <h3 class="text-2xl font-bold mb-4 stylized-font">Visualization Legend</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div class="bg-gray-700 p-4 rounded-lg">
+                            <h4 class="font-bold mb-2">X-Axis: Frequency</h4>
+                            <p>Position represents note frequency (Hz)</p>
+                        </div>
+                        <div class="bg-gray-700 p-4 rounded-lg">
+                            <h4 class="font-bold mb-2">Y-Axis: Amplitude</h4>
+                            <p>Height represents note volume</p>
+                        </div>
+                        <div class="bg-gray-700 p-4 rounded-lg">
+                            <h4 class="font-bold mb-2">Z-Axis: Time</h4>
+                            <p>Depth represents note sequence timing</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Footer -->
+        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-700">
+            <p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
+        </footer>
+    </div>
+    <script>
+        feather.replace();
+        // Initialize Three.js scene
+        let scene, camera, renderer, points;
+        let rotationSpeed = 0.5;
+        let pointSize = 3;
+        let noteData = [];
+        function init() {
+            // Create scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x1a202c);
+            // Create camera
+            camera = new THREE.PerspectiveCamera(75,
+                document.getElementById('visualization-container').clientWidth /
+                document.getElementById('visualization-container').clientHeight,
+                0.1, 1000);
+            camera.position.z = 30;
+            camera.position.y = 10;
+            // Create renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(
+                document.getElementById('visualization-container').clientWidth,
+                document.getElementById('visualization-container').clientHeight
+            );
+            document.getElementById('visualization-container').appendChild(renderer.domElement);
+            // Add lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(20, 20, 20);
+            scene.add(directionalLight);
+            // Generate sample note data
+            generateNoteData();
+            // Create 3D points
+            createPoints();
+            // Add axes helper
+            const axesHelper = new THREE.AxesHelper(20);
+            scene.add(axesHelper);
+            // Add event listeners
+            setupEventListeners();
+            // Start animation
+            animate();
+        }
+        function generateNoteData() {
+            // Generate sample musical sequence data
+            const baseNotes = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; // C4 to C5
+            const durations = [0.5, 1.0, 1.5, 2.0];
+            for (let i = 0; i < 50; i++) {
+                noteData.push({
+                    frequency: baseNotes[Math.floor(Math.random() * baseNotes.length)] + (Math.random() * 100),
+                    amplitude: Math.random(),
+                    duration: durations[Math.floor(Math.random() * durations.length)],
+                    time: i * 0.5,
+                    color: new THREE.Color(Math.random() * 0xffffff)
+                });
+            }
+        }
+        function createPoints() {
+            const positions = new Float32Array(noteData.length * 3);
+            const colors = new Float32Array(noteData.length * 3);
+            // Normalize data for visualization
+            const maxFreq = Math.max(...noteData.map(n => n.frequency));
+            const minFreq = Math.min(...noteData.map(n => n.frequency));
+            const maxTime = Math.max(...noteData.map(n => n.time));
+            for (let i = 0; i < noteData.length; i++) {
+                // Map frequency to X-axis (0-20)
+                positions[i * 3] = ((noteData[i].frequency - minFreq) / (maxFreq - minFreq)) * 20 - 10;
+                // Map amplitude to Y-axis (0-20)
+                positions[i * 3 + 1] = noteData[i].amplitude * 20;
+                // Map time to Z-axis (0-20)
+                positions[i * 3 + 2] = (noteData[i].time / maxTime) * 20 - 10;
+                // Set colors
+                colors[i * 3] = noteData[i].color.r;
+                colors[i * 3 + 1] = noteData[i].color.g;
+                colors[i * 3 + 2] = noteData[i].color.b;
+            }
+            // Create geometry
+            const geometry = new THREE.BufferGeometry();
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            // Create material
+            const material = new THREE.PointsMaterial({
+                size: pointSize,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.9
+            });
+            // Create points
+            points = new THREE.Points(geometry, material);
+            scene.add(points);
+        }
+        function setupEventListeners() {
+            // Rotation speed control
+            document.getElementById('rotation-speed').addEventListener('input', function() {
+                rotationSpeed = parseFloat(this.value);
+            });
+            // Point size control
+            document.getElementById('point-size').addEventListener('input', function() {
+                pointSize = parseFloat(this.value);
+                points.material.size = pointSize;
+            });
+            // Reset view button
+            document.getElementById('reset-view').addEventListener('click', function() {
+                camera.position.set(0, 10, 30);
+                camera.lookAt(0, 0, 0);
+            });
+            // Handle window resize
+            window.addEventListener('resize', function() {
+                camera.aspect = document.getElementById('visualization-container').clientWidth /
+                                document.getElementById('visualization-container').clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(
+                    document.getElementById('visualization-container').clientWidth,
+                    document.getElementById('visualization-container').clientHeight
+                );
+            });
+            // Mouse interaction for note selection
+            const raycaster = new THREE.Raycaster();
+            const mouse = new THREE.Vector2();
+            document.getElementById('visualization-container').addEventListener('click', function(event) {
+                // Calculate mouse position in normalized device coordinates
+                const rect = renderer.domElement.getBoundingClientRect();
+                mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+                mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+                // Update the picking ray with the camera and mouse position
+                raycaster.setFromCamera(mouse, camera);
+                // Calculate objects intersecting the picking ray
+                const intersects = raycaster.intersectObject(points);
+                if (intersects.length > 0) {
+                    const index = intersects[0].index;
+                    const note = noteData[index];
+                    document.getElementById('note-details').innerHTML = `
+                        <p><strong>Frequency:</strong> ${note.frequency.toFixed(2)} Hz</p>
+                        <p><strong>Amplitude:</strong> ${(note.amplitude * 100).toFixed(0)}%</p>
+                        <p><strong>Duration:</strong> ${note.duration} seconds</p>
+                        <p><strong>Time:</strong> ${note.time.toFixed(1)} seconds</p>
+                    `;
+                }
+            });
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            // Rotate the entire scene
+            if (points) {
+                points.rotation.y += 0.005 * rotationSpeed;
+            }
+            renderer.render(scene, camera);
+        }
+        // Initialize when page loads
+        window.addEventListener('load', init);
+    </script>
+</body>
+</html>