Hugging Face's logo

Spaces:
WebashalarForML
/
data_flow_static
Running

App Files Community
WebashalarForML commited on
Commit
8545876
·
verified ·
1 Parent(s): 4a43254

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +30 -19
  2. main.js +198 -0
index.html CHANGED
@@ -1,19 +1,30 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Fluid Dotted Mesh Bubble</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ overflow: hidden;
11
+ background: radial-gradient(circle at center, #0d0d2b, #000000);
12
+ }
13
+ canvas {
14
+ display: block;
15
+ }
16
+ </style>
17
+ <script type="importmap">
18
+ {
19
+ "imports": {
20
+ "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
21
+ "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
22
+ }
23
+ }
24
+ </script>
25
+ </head>
26
+ <body>
27
+ <canvas id="webgl"></canvas>
28
+ <script type="module" src="./main.js"></script>
29
+ </body>
30
+ </html>
main.js ADDED
@@ -0,0 +1,198 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as THREE from 'three';
2
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3
+
4
+ const config = {
5
+ pointCount: 800,
6
+ radius: 2,
7
+ pulseSpeed: 1.2,
8
+ amplitude: 0.5,
9
+ color: {
10
+ primary: [0.5, 0.3, 1.0], // Purple
11
+ secondary: [0.8, 0.2, 1.0], // Pink
12
+ accent: [0.3, 0.5, 1.0] // Blue
13
+ }
14
+ };
15
+
16
+ let scene, camera, renderer, controls;
17
+ let pointCloud, particles;
18
+ let clock;
19
+
20
+ init();
21
+ animate();
22
+
23
+ function init() {
24
+ scene = new THREE.Scene();
25
+ scene.background = new THREE.Color(0x0d0d2b);
26
+
27
+ const canvas = document.querySelector('#webgl');
28
+ renderer = new THREE.WebGLRenderer({
29
+ canvas,
30
+ antialias: true,
31
+ alpha: true
32
+ });
33
+ renderer.setSize(window.innerWidth, window.innerHeight);
34
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
35
+
36
+ camera = new THREE.PerspectiveCamera(
37
+ 75,
38
+ window.innerWidth / window.innerHeight,
39
+ 0.1,
40
+ 50
41
+ );
42
+ camera.position.set(0, 0, 5);
43
+
44
+ controls = new OrbitControls(camera, canvas);
45
+ controls.enableDamping = true;
46
+ controls.dampingFactor = 0.05;
47
+ controls.rotateSpeed = 0.5;
48
+
49
+ createParticles();
50
+ setupLighting();
51
+ setupEventListeners();
52
+ }
53
+
54
+ function createParticles() {
55
+ const positions = new Float32Array(config.pointCount * 3);
56
+ const colors = new Float32Array(config.pointCount * 3);
57
+ const sizes = new Float32Array(config.pointCount);
58
+
59
+ particles = {
60
+ positions: new Float32Array(config.pointCount),
61
+ targetPositions: new Float32Array(config.pointCount),
62
+ speeds: new Float32Array(config.pointCount),
63
+ phases: new Float32Array(config.pointCount)
64
+ };
65
+
66
+ for (let i = 0; i < config.pointCount; i++) {
67
+ const index = i * 3;
68
+ const phi = Math.acos(-1 + (2 * i) / config.pointCount);
69
+ const theta = Math.sqrt(config.pointCount * Math.PI) * phi;
70
+
71
+ const x = config.radius * Math.sin(phi) * Math.cos(theta);
72
+ const y = config.radius * Math.sin(phi) * Math.sin(theta);
73
+ const z = config.radius * Math.cos(phi);
74
+
75
+ positions[index] = x;
76
+ positions[index + 1] = y;
77
+ positions[index + 2] = z;
78
+
79
+ const dist = Math.sqrt(x * x + y * y + z * z) / config.radius;
80
+ const r = THREE.MathUtils.lerp(config.color.primary[0], config.color.accent[0], dist);
81
+ const g = THREE.MathUtils.lerp(config.color.primary[1], config.color.secondary[1], dist);
82
+ const b = THREE.MathUtils.lerp(config.color.primary[2], 1.0, dist);
83
+
84
+ colors[index] = r;
85
+ colors[index + 1] = g;
86
+ colors[index + 2] = b;
87
+
88
+ sizes[i] = Math.random() * 0.1 + 0.05;
89
+
90
+ particles.positions[i] = 0;
91
+ particles.targetPositions[i] = 0;
92
+ particles.speeds[i] = Math.random() * 0.5 + 0.5;
93
+ particles.phases[i] = Math.random() * Math.PI * 2;
94
+ }
95
+
96
+ const geometry = new THREE.BufferGeometry();
97
+ geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
98
+ geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
99
+ geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
100
+
101
+ const material = new THREE.PointsMaterial({
102
+ size: 0.1,
103
+ vertexColors: true,
104
+ sizeAttenuation: true,
105
+ transparent: true,
106
+ opacity: 0.9,
107
+ blending: THREE.AdditiveBlending
108
+ });
109
+
110
+ pointCloud = new THREE.Points(geometry, material);
111
+ scene.add(pointCloud);
112
+
113
+ clock = new THREE.Clock();
114
+ scheduleNextPulse();
115
+ }
116
+
117
+ function setupLighting() {
118
+ const ambientLight = new THREE.AmbientLight(0x404060, 0.5);
119
+ scene.add(ambientLight);
120
+
121
+ const pointLight = new THREE.PointLight(0x7f5af0, 1, 10);
122
+ pointLight.position.set(2, 3, 4);
123
+ scene.add(pointLight);
124
+ }
125
+
126
+ function setupEventListeners() {
127
+ window.addEventListener('resize', () => {
128
+ camera.aspect = window.innerWidth / window.innerHeight;
129
+ camera.updateProjectionMatrix();
130
+ renderer.setSize(window.innerWidth, window.innerHeight);
131
+ });
132
+ }
133
+
134
+ function scheduleNextPulse() {
135
+ const pulseDelay = Math.random() * 3000 + 1500;
136
+ setTimeout(() => {
137
+ triggerPulse();
138
+ }, pulseDelay);
139
+ }
140
+
141
+ function triggerPulse() {
142
+ const waveCenter = Math.floor(Math.random() * config.pointCount);
143
+
144
+ const positions = pointCloud.geometry.attributes.position.array;
145
+
146
+ for (let i = 0; i < config.pointCount; i++) {
147
+ const index = i * 3;
148
+ const x = positions[index];
149
+ const y = positions[index + 1];
150
+ const z = positions[index + 2];
151
+
152
+ const distToCenter = Math.sqrt(
153
+ (x - positions[waveCenter * 3]) ** 2 +
154
+ (y - positions[waveCenter * 3 + 1]) ** 2 +
155
+ (z - positions[waveCenter * 3 + 2]) ** 2
156
+ );
157
+
158
+ const normalizedDist = distToCenter / (config.radius * 2);
159
+ const waveFactor = 1 - Math.min(Math.max(normalizedDist, 0), 1);
160
+
161
+ particles.targetPositions[i] = config.amplitude * waveFactor;
162
+ }
163
+
164
+ scheduleNextPulse();
165
+ }
166
+
167
+ function updateParticles(delta) {
168
+ const positions = pointCloud.geometry.attributes.position.array;
169
+ const originalPositions = new Float32Array(positions);
170
+
171
+ for (let i = 0; i < config.pointCount; i++) {
172
+ const index = i * 3;
173
+
174
+ particles.positions[i] += (particles.targetPositions[i] - particles.positions[i]) * delta * particles.speeds[i];
175
+
176
+ const pulseEffect = particles.positions[i] * Math.sin(clock.getElapsedTime() * particles.speeds[i] + particles.phases[i]);
177
+
178
+ const displacement = pulseEffect;
179
+
180
+ positions[index] = originalPositions[index] * (1 + displacement);
181
+ positions[index + 1] = originalPositions[index + 1] * (1 + displacement);
182
+ positions[index + 2] = originalPositions[index + 2] * (1 + displacement);
183
+
184
+ particles.targetPositions[i] *= 0.95;
185
+ }
186
+
187
+ pointCloud.geometry.attributes.position.needsUpdate = true;
188
+ }
189
+
190
+ function animate() {
191
+ const delta = Math.min(clock.getDelta(), 0.1);
192
+
193
+ controls.update();
194
+ updateParticles(delta);
195
+
196
+ renderer.render(scene, camera);
197
+ requestAnimationFrame(animate);
198
+ }