-
Notifications
You must be signed in to change notification settings - Fork 0
/
svgtest.html
136 lines (118 loc) · 4.96 KB
/
svgtest.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG + Three.js Visualizer</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
filter: url('#displacementFilter'); /* Apply CSS displacement filter */
mix-blend-mode: screen;
}
@keyframes colorShift {
0% { stop-color: rgb(0, 255, 153); }
25% { stop-color: rgb(51, 51, 255); }
50% { stop-color: rgb(255, 20, 147); }
75% { stop-color: rgb(255, 140, 0); }
100% { stop-color: rgb(0, 255, 153); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
}
</style>
</head>
<body>
<!-- The SVG element for the CSS displacement map -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
<defs>
<filter id="displacementFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.2" numOctaves="6" result="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="150" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
</svg>
<!-- Overlay for SVG filter application -->
<div id="overlay">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="200" fill="url(#grad1)" style="animation: pulse 6s infinite alternate ease-in-out; filter: blur(4px);" />
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1; animation: colorShift 8s infinite alternate;" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
</defs>
</svg>
</div>
<!-- Include Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.169.0/three.webgpu.min.js"></script>
<script>
// Set up the Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Load a simple displacement geometry
const geometry = new THREE.SphereGeometry(5, 64, 64);
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
roughness: 0.7,
metalness: 0.3,
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// Add lighting
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);
camera.position.z = 15;
// Handle window resize
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
// Set up audio context and analyzer
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
const audio = new Audio('path-to-your-audio-file.mp3');
audio.crossOrigin = "anonymous";
audio.loop = true;
const source = audioCtx.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
audio.play();
// Main animation loop
function animate() {
requestAnimationFrame(animate);
// Get audio data
analyser.getByteFrequencyData(dataArray);
// Modify sphere displacement scale based on audio frequency
const displacementScale = dataArray[0] / 128;
// Modify CSS displacement filter scale based on audio data
const filterElement = document.querySelector('#displacementFilter feDisplacementMap');
filterElement.setAttribute('scale', displacementScale * 100);
// Rotate the sphere for a more dynamic visual
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
// Render the Three.js scene
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>