Hugging Face's logo

Spaces:
Fabriwin
/
audio-dimension
Running

App Files Community
audio-dimension / index.html
Fabriwin's picture
Fabriwin
Add 2 files
0122e20 verified
raw
history blame contribute delete
43.4 kB
 <!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>