Hugging Face's logo

Spaces:
fantos
/
Physics-Playground
Running

App Files Community
fantos commited on
Commit
362d9b7
·
verified ·
1 Parent(s): 613682d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +554 -18
index.html CHANGED
@@ -1,19 +1,555 @@
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>
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <title>Advanced Physics Simulator</title>
6
+ <style>
7
+ :root {
8
+ --primary: #00aaff;
9
+ --background: #0a0a0a;
10
+ --surface: #1a1a1a;
11
+ --text: #ffffff;
12
+ }
13
+
14
+ * {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
+ user-select: none;
19
+ }
20
+
21
+ body {
22
+ background: var(--background);
23
+ color: var(--text);
24
+ font-family: system-ui, -apple-system, sans-serif;
25
+ overflow: hidden;
26
+ }
27
+
28
+ #app {
29
+ display: grid;
30
+ grid-template-columns: 1fr 300px;
31
+ height: 100vh;
32
+ }
33
+
34
+ #viewport {
35
+ position: relative;
36
+ overflow: hidden;
37
+ }
38
+
39
+ #canvas {
40
+ background: #000;
41
+ position: absolute;
42
+ }
43
+
44
+ #overlay {
45
+ position: absolute;
46
+ top: 10px;
47
+ left: 10px;
48
+ background: rgba(0,0,0,0.8);
49
+ padding: 10px;
50
+ border-radius: 4px;
51
+ font-family: monospace;
52
+ }
53
+
54
+ #controls {
55
+ background: var(--surface);
56
+ padding: 20px;
57
+ overflow-y: auto;
58
+ }
59
+
60
+ .panel {
61
+ background: rgba(255,255,255,0.05);
62
+ border-radius: 8px;
63
+ padding: 15px;
64
+ margin-bottom: 15px;
65
+ }
66
+
67
+ .panel h3 {
68
+ color: var(--primary);
69
+ margin-bottom: 15px;
70
+ }
71
+
72
+ .control-row {
73
+ display: flex;
74
+ align-items: center;
75
+ margin: 8px 0;
76
+ gap: 10px;
77
+ }
78
+
79
+ label {
80
+ flex: 1;
81
+ }
82
+
83
+ input[type="range"] {
84
+ width: 120px;
85
+ -webkit-appearance: none;
86
+ height: 4px;
87
+ background: #333;
88
+ border-radius: 2px;
89
+ }
90
+
91
+ input[type="range"]::-webkit-slider-thumb {
92
+ -webkit-appearance: none;
93
+ width: 16px;
94
+ height: 16px;
95
+ background: var(--primary);
96
+ border-radius: 50%;
97
+ cursor: pointer;
98
+ }
99
+
100
+ input[type="number"] {
101
+ width: 70px;
102
+ padding: 4px;
103
+ background: #333;
104
+ border: 1px solid #444;
105
+ color: #fff;
106
+ border-radius: 4px;
107
+ }
108
+
109
+ button {
110
+ background: var(--primary);
111
+ color: #fff;
112
+ border: none;
113
+ padding: 8px 16px;
114
+ border-radius: 4px;
115
+ cursor: pointer;
116
+ font-weight: 500;
117
+ }
118
+
119
+ button:hover {
120
+ filter: brightness(1.1);
121
+ }
122
+
123
+ button:active {
124
+ transform: translateY(1px);
125
+ }
126
+
127
+ .button-group {
128
+ display: grid;
129
+ grid-template-columns: 1fr 1fr;
130
+ gap: 8px;
131
+ margin-top: 10px;
132
+ }
133
+
134
+ #graphs {
135
+ display: grid;
136
+ grid-template-columns: 1fr;
137
+ gap: 10px;
138
+ margin-top: 10px;
139
+ }
140
+
141
+ .graph {
142
+ height: 100px;
143
+ background: #111;
144
+ border-radius: 4px;
145
+ }
146
+
147
+ @media (max-width: 768px) {
148
+ #app {
149
+ grid-template-columns: 1fr;
150
+ }
151
+
152
+ #controls {
153
+ position: fixed;
154
+ bottom: 0;
155
+ width: 100%;
156
+ height: 200px;
157
+ padding: 10px;
158
+ }
159
+ }
160
+ </style>
161
+ </head>
162
+ <body>
163
+ <div id="app">
164
+ <div id="viewport">
165
+ <canvas id="canvas"></canvas>
166
+ <div id="overlay">
167
+ <div>FPS: <span id="fps">60</span></div>
168
+ <div>Objects: <span id="objectCount">0</span></div>
169
+ <div>Time Scale: <span id="timeScale">1.0x</span></div>
170
+ </div>
171
+ </div>
172
+
173
+ <div id="controls">
174
+ <div class="panel">
175
+ <h3>Simulation Controls</h3>
176
+ <div class="button-group">
177
+ <button id="playPause">Pause</button>
178
+ <button id="reset">Reset</button>
179
+ <button id="slowMotion">Slow Motion</button>
180
+ <button id="step">Step Frame</button>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="panel">
185
+ <h3>Physics Settings</h3>
186
+ <div class="control-row">
187
+ <label>Gravity (m/s²)</label>
188
+ <input type="range" id="gravity" min="0" max="20" step="0.1" value="9.8">
189
+ <span id="gravityValue">9.8</span>
190
+ </div>
191
+ <div class="control-row">
192
+ <label>Air Resistance</label>
193
+ <input type="range" id="airResistance" min="0" max="1" step="0.01" value="0.02">
194
+ <span id="airValue">0.02</span>
195
+ </div>
196
+ <div class="control-row">
197
+ <label>Elasticity</label>
198
+ <input type="range" id="elasticity" min="0" max="1" step="0.1" value="0.8">
199
+ <span id="elasticityValue">0.8</span>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="panel">
204
+ <h3>Object Properties</h3>
205
+ <div class="control-row">
206
+ <label>Mass (kg)</label>
207
+ <input type="number" id="mass" value="1" min="0.1" step="0.1">
208
+ </div>
209
+ <div class="control-row">
210
+ <label>Initial Velocity X</label>
211
+ <input type="number" id="velocityX" value="0" step="0.1">
212
+ </div>
213
+ <div class="control-row">
214
+ <label>Initial Velocity Y</label>
215
+ <input type="number" id="velocityY" value="0" step="0.1">
216
+ </div>
217
+ <div class="button-group">
218
+ <button id="addObject">Add Object</button>
219
+ <button id="clearAll">Clear All</button>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="panel">
224
+ <h3>Visualization</h3>
225
+ <div class="button-group">
226
+ <button id="toggleVectors">Toggle Vectors</button>
227
+ <button id="toggleTrails">Toggle Trails</button>
228
+ <button id="toggleGraph">Toggle Graphs</button>
229
+ </div>
230
+ <div id="graphs">
231
+ <canvas class="graph" id="velocityGraph"></canvas>
232
+ <canvas class="graph" id="energyGraph"></canvas>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <script>
239
+ // Physics Engine Module
240
+ const PhysicsEngine = {
241
+ gravity: 9.8,
242
+ airResistance: 0.02,
243
+ elasticity: 0.8,
244
+ timeScale: 1.0,
245
+ paused: false,
246
+
247
+ update(objects, dt) {
248
+ if (this.paused) return;
249
+
250
+ dt *= this.timeScale;
251
+
252
+ objects.forEach(obj => {
253
+ if (!obj.static) {
254
+ // Apply forces
255
+ obj.vy += this.gravity * dt;
256
+ obj.vx *= (1 - this.airResistance);
257
+ obj.vy *= (1 - this.airResistance);
258
+
259
+ // Update position
260
+ obj.x += obj.vx * dt;
261
+ obj.y += obj.vy * dt;
262
+
263
+ // Rotation
264
+ obj.angle += obj.angularVelocity * dt;
265
+
266
+ // Store trail points
267
+ if (obj.trails) {
268
+ obj.trails.push({x: obj.x, y: obj.y});
269
+ if (obj.trails.length > 50) obj.trails.shift();
270
+ }
271
+ }
272
+ });
273
+
274
+ // Collision detection
275
+ this.handleCollisions(objects);
276
+ },
277
+
278
+ handleCollisions(objects) {
279
+ for (let i = 0; i < objects.length; i++) {
280
+ const obj1 = objects[i];
281
+
282
+ // Wall collisions
283
+ if (obj1.x < obj1.radius) {
284
+ obj1.x = obj1.radius;
285
+ obj1.vx *= -this.elasticity;
286
+ }
287
+ if (obj1.x > canvas.width - obj1.radius) {
288
+ obj1.x = canvas.width - obj1.radius;
289
+ obj1.vx *= -this.elasticity;
290
+ }
291
+ if (obj1.y < obj1.radius) {
292
+ obj1.y = obj1.radius;
293
+ obj1.vy *= -this.elasticity;
294
+ }
295
+ if (obj1.y > canvas.height - obj1.radius) {
296
+ obj1.y = canvas.height - obj1.radius;
297
+ obj1.vy *= -this.elasticity;
298
+ }
299
+
300
+ // Object collisions
301
+ for (let j = i + 1; j < objects.length; j++) {
302
+ const obj2 = objects[j];
303
+ const dx = obj2.x - obj1.x;
304
+ const dy = obj2.y - obj1.y;
305
+ const distance = Math.sqrt(dx * dx + dy * dy);
306
+
307
+ if (distance < obj1.radius + obj2.radius) {
308
+ const angle = Math.atan2(dy, dx);
309
+ const sin = Math.sin(angle);
310
+ const cos = Math.cos(angle);
311
+
312
+ // Elastic collision response
313
+ const v1 = Math.sqrt(obj1.vx * obj1.vx + obj1.vy * obj1.vy);
314
+ const v2 = Math.sqrt(obj2.vx * obj2.vx + obj2.vy * obj2.vy);
315
+
316
+ obj1.vx = ((obj1.mass - obj2.mass) * v1 + 2 * obj2.mass * v2) /
317
+ (obj1.mass + obj2.mass) * cos;
318
+ obj1.vy = ((obj1.mass - obj2.mass) * v1 + 2 * obj2.mass * v2) /
319
+ (obj1.mass + obj2.mass) * sin;
320
+
321
+ obj2.vx = ((obj2.mass - obj1.mass) * v2 + 2 * obj1.mass * v1) /
322
+ (obj1.mass + obj2.mass) * -cos;
323
+ obj2.vy = ((obj2.mass - obj1.mass) * v2 + 2 * obj1.mass * v1) /
324
+ (obj1.mass + obj2.mass) * -sin;
325
+ }
326
+ }
327
+ }
328
+ }
329
+ };
330
+
331
+ // Renderer Module
332
+ const Renderer = {
333
+ showVectors: true,
334
+ showTrails: true,
335
+
336
+ clear(ctx) {
337
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
338
+ },
339
+
340
+ drawObject(ctx, obj) {
341
+ // Draw trails
342
+ if (this.showTrails && obj.trails) {
343
+ ctx.beginPath();
344
+ obj.trails.forEach((pos, i) => {
345
+ if (i === 0) {
346
+ ctx.moveTo(pos.x, pos.y);
347
+ } else {
348
+ ctx.lineTo(pos.x, pos.y);
349
+ }
350
+ });
351
+ ctx.strokeStyle = obj.color + '40';
352
+ ctx.lineWidth = 2;
353
+ ctx.stroke();
354
+ }
355
+
356
+ // Draw object
357
+ ctx.save();
358
+ ctx.translate(obj.x, obj.y);
359
+ ctx.rotate(obj.angle);
360
+
361
+ ctx.beginPath();
362
+ ctx.arc(0, 0, obj.radius, 0, Math.PI * 2);
363
+ ctx.fillStyle = obj.color;
364
+ ctx.fill();
365
+
366
+ // Draw direction indicator
367
+ ctx.beginPath();
368
+ ctx.moveTo(0, 0);
369
+ ctx.lineTo(obj.radius, 0);
370
+ ctx.strokeStyle = '#fff';
371
+ ctx.lineWidth = 2;
372
+ ctx.stroke();
373
+
374
+ ctx.restore();
375
+
376
+ // Draw vectors
377
+ if (this.showVectors) {
378
+ ctx.beginPath();
379
+ ctx.moveTo(obj.x, obj.y);
380
+ ctx.lineTo(obj.x + obj.vx * 5, obj.y + obj.vy * 5);
381
+ ctx.strokeStyle = '#ff0';
382
+ ctx.lineWidth = 2;
383
+ ctx.stroke();
384
+ }
385
+ },
386
+
387
+ drawGraph(ctx, data, color) {
388
+ ctx.beginPath();
389
+ data.forEach((value, i) => {
390
+ ctx.lineTo(i * 2, ctx.canvas.height - value);
391
+ });
392
+ ctx.strokeStyle = color;
393
+ ctx.stroke();
394
+ }
395
+ };
396
+
397
+ // Main Application
398
+ class PhysicsSimulator {
399
+ constructor() {
400
+ this.canvas = document.getElementById('canvas');
401
+ this.ctx = this.canvas.getContext('2d');
402
+ this.objects = [];
403
+ this.velocityData = [];
404
+ this.energyData = [];
405
+
406
+ this.setupCanvas();
407
+ this.setupEventListeners();
408
+ this.startAnimation();
409
+ }
410
+
411
+ setupCanvas() {
412
+ const resize = () => {
413
+ const container = this.canvas.parentElement;
414
+ this.canvas.width = container.offsetWidth;
415
+ this.canvas.height = container.offsetHeight;
416
+ };
417
+
418
+ window.addEventListener('resize', resize);
419
+ resize();
420
+ }
421
+
422
+ setupEventListeners() {
423
+ // Physics controls
424
+ document.getElementById('gravity').oninput = (e) => {
425
+ PhysicsEngine.gravity = parseFloat(e.target.value);
426
+ document.getElementById('gravityValue').textContent = e.target.value;
427
+ };
428
+
429
+ document.getElementById('airResistance').oninput = (e) => {
430
+ PhysicsEngine.airResistance = parseFloat(e.target.value);
431
+ document.getElementById('airValue').textContent = e.target.value;
432
+ };
433
+
434
+ document.getElementById('elasticity').oninput = (e) => {
435
+ PhysicsEngine.elasticity = parseFloat(e.target.value);
436
+ document.getElementById('elasticityValue').textContent = e.target.value;
437
+ };
438
+
439
+ // Simulation controls
440
+ document.getElementById('playPause').onclick = () => {
441
+ PhysicsEngine.paused = !PhysicsEngine.paused;
442
+ document.getElementById('playPause').textContent =
443
+ PhysicsEngine.paused ? 'Play' : 'Pause';
444
+ };
445
+
446
+ document.getElementById('slowMotion').onclick = () => {
447
+ PhysicsEngine.timeScale = PhysicsEngine.timeScale === 1 ? 0.2 : 1;
448
+ document.getElementById('timeScale').textContent =
449
+ PhysicsEngine.timeScale + 'x';
450
+ };
451
+
452
+ // Object controls
453
+ this.canvas.onclick = (e) => {
454
+ const rect = this.canvas.getBoundingClientRect();
455
+ const x = e.clientX - rect.left;
456
+ const y = e.clientY - rect.top;
457
+ this.addObject(x, y);
458
+ };
459
+
460
+ document.getElementById('addObject').onclick = () => {
461
+ this.addObject(
462
+ Math.random() * this.canvas.width,
463
+ Math.random() * this.canvas.height
464
+ );
465
+ };
466
+
467
+ document.getElementById('clearAll').onclick = () => {
468
+ this.objects = [];
469
+ };
470
+
471
+ // Visualization controls
472
+ document.getElementById('toggleVectors').onclick = () => {
473
+ Renderer.showVectors = !Renderer.showVectors;
474
+ };
475
+
476
+ document.getElementById('toggleTrails').onclick = () => {
477
+ Renderer.showTrails = !Renderer.showTrails;
478
+ };
479
+ }
480
+
481
+ addObject(x, y) {
482
+ const mass = parseFloat(document.getElementById('mass').value);
483
+ const vx = parseFloat(document.getElementById('velocityX').value);
484
+ const vy = parseFloat(document.getElementById('velocityY').value);
485
+
486
+ this.objects.push({
487
+ x: x,
488
+ y: y,
489
+ vx: vx,
490
+ vy: vy,
491
+ mass: mass,
492
+ radius: Math.sqrt(mass) * 10,
493
+ angle: 0,
494
+ angularVelocity: Math.random() * 2 - 1,
495
+ color: `hsl(${Math.random() * 360}, 70%, 50%)`,
496
+ trails: []
497
+ });
498
+ }
499
+
500
+ update(dt) {
501
+ PhysicsEngine.update(this.objects, dt);
502
+
503
+ // Update statistics
504
+ document.getElementById('objectCount').textContent = this.objects.length;
505
+
506
+ // Store data for graphs
507
+ const totalVelocity = this.objects.reduce((sum, obj) =>
508
+ sum + Math.sqrt(obj.vx * obj.vx + obj.vy * obj.vy), 0);
509
+ const totalEnergy = this.objects.reduce((sum, obj) =>
510
+ sum + 0.5 * obj.mass * (obj.vx * obj.vx + obj.vy * obj.vy), 0);
511
+
512
+ this.velocityData.push(totalVelocity);
513
+ this.energyData.push(totalEnergy);
514
+
515
+ if (this.velocityData.length > 100) this.velocityData.shift();
516
+ if (this.energyData.length > 100) this.energyData.shift();
517
+ }
518
+
519
+ render() {
520
+ Renderer.clear(this.ctx);
521
+ this.objects.forEach(obj => Renderer.drawObject(this.ctx, obj));
522
+ }
523
+
524
+ startAnimation() {
525
+ let lastTime = performance.now();
526
+ let frames = 0;
527
+ let fpsTime = 0;
528
+
529
+ const animate = (currentTime) => {
530
+ const dt = (currentTime - lastTime) / 1000;
531
+ lastTime = currentTime;
532
+
533
+ // Calculate FPS
534
+ frames++;
535
+ if (currentTime - fpsTime > 1000) {
536
+ document.getElementById('fps').textContent = frames;
537
+ frames = 0;
538
+ fpsTime = currentTime;
539
+ }
540
+
541
+ this.update(dt);
542
+ this.render();
543
+
544
+ requestAnimationFrame(animate);
545
+ };
546
+
547
+ requestAnimationFrame(animate);
548
+ }
549
+ }
550
+
551
+ // Initialize application
552
+ const app = new PhysicsSimulator();
553
+ </script>
554
+ </body>
555
+ </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>