Hugging Face's logo

Spaces:
aryansrk
/
traul
Running

App Files Community
aryansrk commited on
Commit
309513a
·
verified ·
1 Parent(s): b2f271a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +311 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Traul
3
- emoji: 🦀
4
- colorFrom: gray
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: traul
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,311 @@
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>Bouncing Balls in Circular Boundary</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body {
10
+ overflow: hidden;
11
+ background-color: #1a202c;
12
+ }
13
+ #canvas {
14
+ display: block;
15
+ margin: 0 auto;
16
+ background-color: #2d3748;
17
+ }
18
+ .controls {
19
+ position: absolute;
20
+ bottom: 20px;
21
+ left: 50%;
22
+ transform: translateX(-50%);
23
+ background-color: rgba(255, 255, 255, 0.1);
24
+ padding: 10px;
25
+ border-radius: 8px;
26
+ backdrop-filter: blur(5px);
27
+ }
28
+ .ball-count {
29
+ position: absolute;
30
+ top: 20px;
31
+ left: 20px;
32
+ color: white;
33
+ font-family: 'Arial', sans-serif;
34
+ background-color: rgba(0, 0, 0, 0.5);
35
+ padding: 8px 12px;
36
+ border-radius: 20px;
37
+ }
38
+ .fps-counter {
39
+ position: absolute;
40
+ top: 20px;
41
+ right: 20px;
42
+ color: white;
43
+ font-family: 'Arial', sans-serif;
44
+ background-color: rgba(0, 0, 0, 0.5);
45
+ padding: 8px 12px;
46
+ border-radius: 20px;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="flex items-center justify-center h-screen">
51
+ <div class="relative">
52
+ <canvas id="canvas"></canvas>
53
+ <div class="ball-count">Balls: <span id="ballCount">8</span></div>
54
+ <div class="fps-counter">FPS: <span id="fpsCounter">0</span></div>
55
+ <div class="controls">
56
+ <button id="addBall" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded mr-2 transition">Add Ball</button>
57
+ <button id="removeBall" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded mr-2 transition">Remove Ball</button>
58
+ <button id="reset" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded transition">Reset</button>
59
+ </div>
60
+ </div>
61
+
62
+ <script>
63
+ document.addEventListener('DOMContentLoaded', () => {
64
+ const canvas = document.getElementById('canvas');
65
+ const ctx = canvas.getContext('2d');
66
+ const ballCountDisplay = document.getElementById('ballCount');
67
+ const fpsCounter = document.getElementById('fpsCounter');
68
+ const addBallBtn = document.getElementById('addBall');
69
+ const removeBallBtn = document.getElementById('removeBall');
70
+ const resetBtn = document.getElementById('reset');
71
+
72
+ // Set canvas size
73
+ canvas.width = 800;
74
+ canvas.height = 800;
75
+
76
+ // Simulation parameters
77
+ const boundaryRadius = 350;
78
+ const boundaryCenter = { x: canvas.width / 2, y: canvas.height / 2 };
79
+ const minRadius = 15;
80
+ const maxRadius = 25;
81
+ const minSpeed = 1;
82
+ const maxSpeed = 4;
83
+ const colors = [
84
+ '#FF5252', '#FF4081', '#E040FB', '#7C4DFF',
85
+ '#536DFE', '#448AFF', '#40C4FF', '#18FFFF',
86
+ '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41',
87
+ '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'
88
+ ];
89
+
90
+ // Physics parameters
91
+ const friction = 0.995; // Slight friction to make it more realistic
92
+ const bounceFactor = 0.95; // Energy loss on bounce
93
+
94
+ // Ball class
95
+ class Ball {
96
+ constructor(x, y, radius, color, dx, dy) {
97
+ this.x = x;
98
+ this.y = y;
99
+ this.radius = radius;
100
+ this.color = color;
101
+ this.dx = dx;
102
+ this.dy = dy;
103
+ this.mass = radius * radius; // Mass proportional to area
104
+ }
105
+
106
+ update() {
107
+ // Apply friction
108
+ this.dx *= friction;
109
+ this.dy *= friction;
110
+
111
+ // Update position
112
+ this.x += this.dx;
113
+ this.y += this.dy;
114
+
115
+ // Check boundary collision
116
+ const distanceFromCenter = Math.sqrt(
117
+ Math.pow(this.x - boundaryCenter.x, 2) +
118
+ Math.pow(this.y - boundaryCenter.y, 2)
119
+ );
120
+
121
+ if (distanceFromCenter + this.radius > boundaryRadius) {
122
+ // Calculate normal vector from boundary center to ball
123
+ const nx = (this.x - boundaryCenter.x) / distanceFromCenter;
124
+ const ny = (this.y - boundaryCenter.y) / distanceFromCenter;
125
+
126
+ // Calculate dot product of velocity and normal
127
+ const dotProduct = this.dx * nx + this.dy * ny;
128
+
129
+ // Reflect velocity vector
130
+ this.dx = (this.dx - 2 * dotProduct * nx) * bounceFactor;
131
+ this.dy = (this.dy - 2 * dotProduct * ny) * bounceFactor;
132
+
133
+ // Reposition ball to be exactly at boundary
134
+ const correction = boundaryRadius - this.radius;
135
+ this.x = boundaryCenter.x + nx * correction;
136
+ this.y = boundaryCenter.y + ny * correction;
137
+ }
138
+ }
139
+
140
+ draw() {
141
+ ctx.beginPath();
142
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
143
+ ctx.fillStyle = this.color;
144
+ ctx.fill();
145
+ ctx.closePath();
146
+
147
+ // Add highlight for 3D effect
148
+ ctx.beginPath();
149
+ ctx.arc(this.x - this.radius/3, this.y - this.radius/3, this.radius/3, 0, Math.PI * 2);
150
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
151
+ ctx.fill();
152
+ ctx.closePath();
153
+ }
154
+ }
155
+
156
+ // Ball collection
157
+ let balls = [];
158
+
159
+ // Initialize balls
160
+ function initBalls(count) {
161
+ balls = [];
162
+ for (let i = 0; i < count; i++) {
163
+ addRandomBall();
164
+ }
165
+ ballCountDisplay.textContent = balls.length;
166
+ }
167
+
168
+ // Add a random ball
169
+ function addRandomBall() {
170
+ const radius = minRadius + Math.random() * (maxRadius - minRadius);
171
+
172
+ // Random position inside circle
173
+ let angle = Math.random() * Math.PI * 2;
174
+ let distance = Math.random() * (boundaryRadius - radius);
175
+ const x = boundaryCenter.x + Math.cos(angle) * distance;
176
+ const y = boundaryCenter.y + Math.sin(angle) * distance;
177
+
178
+ // Random velocity
179
+ const speed = minSpeed + Math.random() * (maxSpeed - minSpeed);
180
+ angle = Math.random() * Math.PI * 2;
181
+ const dx = Math.cos(angle) * speed;
182
+ const dy = Math.sin(angle) * speed;
183
+
184
+ // Random color
185
+ const color = colors[Math.floor(Math.random() * colors.length)];
186
+
187
+ balls.push(new Ball(x, y, radius, color, dx, dy));
188
+ ballCountDisplay.textContent = balls.length;
189
+ }
190
+
191
+ // Check and handle collisions between balls
192
+ function checkCollisions() {
193
+ for (let i = 0; i < balls.length; i++) {
194
+ for (let j = i + 1; j < balls.length; j++) {
195
+ const ball1 = balls[i];
196
+ const ball2 = balls[j];
197
+
198
+ const dx = ball2.x - ball1.x;
199
+ const dy = ball2.y - ball1.y;
200
+ const distance = Math.sqrt(dx * dx + dy * dy);
201
+
202
+ if (distance < ball1.radius + ball2.radius) {
203
+ // Collision detected
204
+ const angle = Math.atan2(dy, dx);
205
+
206
+ // Calculate velocities in direction of collision
207
+ const velocity1 = Math.sqrt(ball1.dx * ball1.dx + ball1.dy * ball1.dy);
208
+ const velocity2 = Math.sqrt(ball2.dx * ball2.dx + ball2.dy * ball2.dy);
209
+
210
+ const direction1 = Math.atan2(ball1.dy, ball1.dx);
211
+ const direction2 = Math.atan2(ball2.dy, ball2.dx);
212
+
213
+ const velocityX1 = velocity1 * Math.cos(direction1 - angle);
214
+ const velocityY1 = velocity1 * Math.sin(direction1 - angle);
215
+ const velocityX2 = velocity2 * Math.cos(direction2 - angle);
216
+ const velocityY2 = velocity2 * Math.sin(direction2 - angle);
217
+
218
+ // Final velocities after collision (conservation of momentum)
219
+ const finalVelocityX1 = ((ball1.mass - ball2.mass) * velocityX1 + 2 * ball2.mass * velocityX2) / (ball1.mass + ball2.mass);
220
+ const finalVelocityX2 = ((ball2.mass - ball1.mass) * velocityX2 + 2 * ball1.mass * velocityX1) / (ball1.mass + ball2.mass);
221
+
222
+ // Update ball velocities
223
+ ball1.dx = Math.cos(angle) * finalVelocityX1 + Math.cos(angle + Math.PI/2) * velocityY1;
224
+ ball1.dy = Math.sin(angle) * finalVelocityX1 + Math.sin(angle + Math.PI/2) * velocityY1;
225
+ ball2.dx = Math.cos(angle) * finalVelocityX2 + Math.cos(angle + Math.PI/2) * velocityY2;
226
+ ball2.dy = Math.sin(angle) * finalVelocityX2 + Math.sin(angle + Math.PI/2) * velocityY2;
227
+
228
+ // Move balls apart to prevent sticking
229
+ const overlap = (ball1.radius + ball2.radius - distance) / 2;
230
+ ball1.x -= overlap * Math.cos(angle);
231
+ ball1.y -= overlap * Math.sin(angle);
232
+ ball2.x += overlap * Math.cos(angle);
233
+ ball2.y += overlap * Math.sin(angle);
234
+ }
235
+ }
236
+ }
237
+ }
238
+
239
+ // Animation loop
240
+ let lastTime = 0;
241
+ let fps = 0;
242
+ function animate(currentTime) {
243
+ // Calculate FPS
244
+ if (lastTime) {
245
+ fps = Math.round(1000 / (currentTime - lastTime));
246
+ }
247
+ lastTime = currentTime;
248
+ fpsCounter.textContent = fps;
249
+
250
+ // Clear canvas
251
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
252
+
253
+ // Draw boundary
254
+ ctx.beginPath();
255
+ ctx.arc(boundaryCenter.x, boundaryCenter.y, boundaryRadius, 0, Math.PI * 2);
256
+ ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
257
+ ctx.lineWidth = 2;
258
+ ctx.stroke();
259
+
260
+ // Draw center point
261
+ ctx.beginPath();
262
+ ctx.arc(boundaryCenter.x, boundaryCenter.y, 3, 0, Math.PI * 2);
263
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
264
+ ctx.fill();
265
+
266
+ // Update and draw balls
267
+ checkCollisions();
268
+ balls.forEach(ball => {
269
+ ball.update();
270
+ ball.draw();
271
+ });
272
+
273
+ requestAnimationFrame(animate);
274
+ }
275
+
276
+ // Initialize with 8 balls
277
+ initBalls(8);
278
+
279
+ // Start animation
280
+ animate();
281
+
282
+ // Event listeners
283
+ addBallBtn.addEventListener('click', () => {
284
+ if (balls.length < 30) { // Limit to 30 balls
285
+ addRandomBall();
286
+ }
287
+ });
288
+
289
+ removeBallBtn.addEventListener('click', () => {
290
+ if (balls.length > 1) { // Keep at least 1 ball
291
+ balls.pop();
292
+ ballCountDisplay.textContent = balls.length;
293
+ }
294
+ });
295
+
296
+ resetBtn.addEventListener('click', () => {
297
+ initBalls(8);
298
+ });
299
+
300
+ // Make canvas responsive
301
+ window.addEventListener('resize', () => {
302
+ const size = Math.min(window.innerWidth, window.innerHeight) * 0.9;
303
+ canvas.width = size;
304
+ canvas.height = size;
305
+ boundaryCenter.x = canvas.width / 2;
306
+ boundaryCenter.y = canvas.height / 2;
307
+ });
308
+ });
309
+ </script>
310
+ <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=aryansrk/traul" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
311
+ </html>