Hugging Face's logo

Spaces:
adnannovus
/
large_hadron_collider
Running

App Files Community
adnannovus commited on
Commit
97a124f
·
verified ·
1 Parent(s): 1a8e9f2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +206 -253
index.html CHANGED
@@ -1,350 +1,303 @@
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>Relativistic Particle Accelerator</title>
7
  <style>
8
- * {
9
- margin: 0;
10
- padding: 0;
11
- box-sizing: border-box;
12
- }
13
-
14
- body {
15
- background: #000;
16
- color: #00ff00;
17
- font-family: monospace;
18
  overflow: hidden;
 
19
  }
20
-
21
- canvas {
22
- position: fixed;
23
- }
24
-
25
  .controls {
26
  position: fixed;
27
- top: 10px;
28
- left: 10px;
29
- background: rgba(0, 20, 0, 0.8);
30
- padding: 15px;
31
- border: 1px solid #00ff00;
32
- z-index: 100;
33
  }
34
-
35
- .data {
36
  position: fixed;
37
- top: 10px;
38
- right: 10px;
39
- background: rgba(0, 20, 0, 0.8);
40
- padding: 15px;
41
- border: 1px solid #00ff00;
42
- z-index: 100;
43
- min-width: 200px;
44
  }
45
-
46
  button {
47
- background: #001400;
48
- color: #00ff00;
49
- border: 1px solid #00ff00;
50
- padding: 5px 10px;
51
  margin: 5px;
52
  cursor: pointer;
53
- font-family: monospace;
54
- transition: all 0.3s;
55
  }
56
-
57
  button:hover {
58
- background: #00ff00;
59
- color: #000;
60
  }
61
  </style>
62
  </head>
63
  <body>
64
- <canvas id="mainCanvas"></canvas>
65
- <canvas id="effectCanvas"></canvas>
66
-
67
  <div class="controls">
68
- <button onclick="injectParticles()">Inject Particles</button>
69
  <button onclick="toggleAcceleration()">Toggle Acceleration</button>
70
  <button onclick="toggleCollisions()">Toggle Collisions</button>
71
- <button onclick="clearParticles()">Clear</button>
72
  </div>
73
-
74
- <div class="data">
75
- <div>Energy: <span id="energyLevel">0</span> TeV</div>
76
- <div>Velocity: <span id="velocityC">0</span>c</div>
77
  <div>Particles: <span id="particleCount">0</span></div>
78
  <div>Collisions: <span id="collisionCount">0</span></div>
79
- <div>Time Dilation: <span id="timeDilation">1</span>x</div>
80
  </div>
81
-
82
  <script>
83
- const mainCanvas = document.getElementById('mainCanvas');
84
- const effectCanvas = document.getElementById('effectCanvas');
85
- const mainCtx = mainCanvas.getContext('2d');
86
- const effectCtx = effectCanvas.getContext('2d');
87
-
88
- // Set canvas sizes
89
- function resizeCanvases() {
90
- mainCanvas.width = window.innerWidth;
91
- mainCanvas.height = window.innerHeight;
92
- effectCanvas.width = window.innerWidth;
93
- effectCanvas.height = window.innerHeight;
94
- }
95
- resizeCanvases();
96
- window.addEventListener('resize', resizeCanvases);
97
-
98
- const SPEED_OF_LIGHT = 299792458; // m/s
99
- const ELECTRON_MASS = 9.1093837015e-31; // kg
100
-
101
- const state = {
102
- particles: [],
103
- collisions: [],
104
- acceleratorActive: false,
105
- collisionsEnabled: false,
106
- collisionCount: 0,
107
- centerX: window.innerWidth / 2,
108
- centerY: window.innerHeight / 2,
109
- ringRadius: Math.min(window.innerWidth, window.innerHeight) * 0.35
110
- };
111
-
112
- class Particle {
113
- constructor(clockwise = true) {
114
- this.clockwise = clockwise;
115
- this.angle = clockwise ? 0 : Math.PI;
116
- this.energy = 0.1; // TeV
117
- this.mass = ELECTRON_MASS;
118
- this.velocity = 0.1; // As fraction of c
119
- this.radius = state.ringRadius;
120
- this.trail = [];
121
- this.maxTrailLength = 100;
122
- this.collided = false;
123
- this.updatePosition();
124
  }
125
 
126
- // Relativistic calculations
127
- get gamma() {
128
- return 1 / Math.sqrt(1 - this.velocity * this.velocity);
 
 
 
 
 
 
 
129
  }
130
 
131
- get timeDilation() {
132
- return this.gamma;
 
 
 
 
 
 
 
 
133
  }
 
134
 
135
- get relativeVelocity() {
136
- return this.velocity * SPEED_OF_LIGHT;
 
 
 
 
 
 
137
  }
138
 
139
- accelerate(deltaTime) {
140
- if (state.acceleratorActive) {
141
- // Relativistic acceleration
142
- const acceleration = 0.001 * (1 - this.velocity);
143
- this.velocity = Math.min(0.9999999999, this.velocity + acceleration);
144
-
145
- // Energy calculation in TeV
146
- this.energy = (this.gamma - 1) * 0.511e-3 * 1000;
147
  }
148
- }
149
 
150
- updatePosition() {
151
- // Relativistic motion
152
- const angleChange = (this.velocity * 0.1) / this.gamma;
153
- this.angle += this.clockwise ? angleChange : -angleChange;
154
 
155
- this.x = state.centerX + Math.cos(this.angle) * this.radius;
156
- this.y = state.centerY + Math.sin(this.angle) * this.radius;
157
-
158
- this.trail.push({ x: this.x, y: this.y });
159
  if (this.trail.length > this.maxTrailLength) {
160
  this.trail.shift();
161
  }
162
  }
163
 
164
- update() {
165
- this.accelerate(1/60);
166
- this.updatePosition();
167
- }
168
-
169
- draw(ctx) {
170
- // Draw relativistic trail with Doppler effect
171
- const hue = this.clockwise ?
172
- 240 - (this.velocity * 240) : // Blue shifting
173
- 60 + (this.velocity * 60); // Red shifting
174
-
175
- ctx.beginPath();
176
- ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 0.5)`;
177
- ctx.lineWidth = 2 + (this.velocity * 3);
178
-
179
- for (let i = 0; i < this.trail.length; i++) {
180
- if (i === 0) {
181
- ctx.moveTo(this.trail[i].x, this.trail[i].y);
182
- } else {
183
- ctx.lineTo(this.trail[i].x, this.trail[i].y);
184
  }
 
185
  }
186
- ctx.stroke();
187
 
188
- // Draw particle with relativistic effects
189
- const particleSize = 3 + (this.velocity * 2);
190
  ctx.beginPath();
191
- ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
 
192
  ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
193
  ctx.fill();
194
 
195
- // Energy aura
196
  ctx.beginPath();
197
- ctx.strokeStyle = `rgba(255, 255, 255, ${this.velocity})`;
198
- ctx.arc(this.x, this.y, particleSize + 3, 0, Math.PI * 2);
199
- ctx.stroke();
200
- }
201
- }
202
-
203
- function createCollisionEffect(x, y, energy) {
204
- const particleCount = Math.floor(50 + energy * 10);
205
- const baseSpeed = 5 + energy;
206
-
207
- for (let i = 0; i < particleCount; i++) {
208
- const angle = (i / particleCount) * Math.PI * 2 + Math.random() * 0.5;
209
- const speed = baseSpeed * (0.5 + Math.random());
210
- const velocity = {
211
- x: Math.cos(angle) * speed,
212
- y: Math.sin(angle) * speed
213
- };
214
-
215
- state.collisions.push({
216
- x, y,
217
- velocity,
218
- life: 1,
219
- energy: energy * Math.random(),
220
- color: `hsl(${30 + Math.random() * 60}, 100%, 50%)`
221
- });
222
- }
223
- }
224
-
225
- function drawAccelerator() {
226
- // Draw main ring
227
- mainCtx.beginPath();
228
- mainCtx.strokeStyle = '#111';
229
- mainCtx.lineWidth = 20;
230
- mainCtx.arc(state.centerX, state.centerY, state.ringRadius, 0, Math.PI * 2);
231
- mainCtx.stroke();
232
-
233
- // Draw acceleration segments
234
- for (let i = 0; i < 16; i++) {
235
- const angle = (i / 16) * Math.PI * 2;
236
- const x = state.centerX + Math.cos(angle) * state.ringRadius;
237
- const y = state.centerY + Math.sin(angle) * state.ringRadius;
238
-
239
- mainCtx.beginPath();
240
- mainCtx.strokeStyle = state.acceleratorActive ? '#0f0' : '#030';
241
- mainCtx.lineWidth = 2;
242
- mainCtx.arc(x, y, 5, 0, Math.PI * 2);
243
- mainCtx.stroke();
244
  }
245
  }
246
 
247
  function checkCollisions() {
248
- if (!state.collisionsEnabled) return;
249
 
250
- for (let i = 0; i < state.particles.length; i++) {
251
- for (let j = i + 1; j < state.particles.length; j++) {
252
- const p1 = state.particles[i];
253
- const p2 = state.particles[j];
254
 
255
- if (p1.clockwise !== p2.clockwise) {
256
  const dx = p1.x - p2.x;
257
  const dy = p1.y - p2.y;
258
  const distance = Math.sqrt(dx * dx + dy * dy);
259
 
260
  if (distance < 10) {
261
- const totalEnergy = p1.energy + p2.energy;
262
- createCollisionEffect(p1.x, p1.y, totalEnergy);
 
 
 
 
 
263
  p1.collided = true;
264
  p2.collided = true;
265
- state.collisionCount++;
 
266
  }
267
  }
268
  }
269
  }
270
 
271
- state.particles = state.particles.filter(p => !p.collided);
 
272
  }
273
 
274
- function updateCollisionEffects() {
275
- state.collisions.forEach(p => {
276
- p.x += p.velocity.x;
277
- p.y += p.velocity.y;
278
- p.life -= 0.02;
279
- p.velocity.x *= 0.98;
280
- p.velocity.y *= 0.98;
281
- });
282
-
283
- state.collisions = state.collisions.filter(p => p.life > 0);
284
- }
285
-
286
- function drawCollisionEffects() {
287
- effectCtx.clearRect(0, 0, effectCanvas.width, effectCanvas.height);
288
-
289
- state.collisions.forEach(p => {
290
- effectCtx.beginPath();
291
- effectCtx.fillStyle = p.color.replace(')', `, ${p.life})`);
292
- effectCtx.arc(p.x, p.y, 2 + p.energy/10, 0, Math.PI * 2);
293
- effectCtx.fill();
294
- });
295
- }
296
-
297
- function updateUI() {
298
- const particle = state.particles[0];
299
- if (particle) {
300
- document.getElementById('energyLevel').textContent = particle.energy.toFixed(2);
301
- document.getElementById('velocityC').textContent = particle.velocity.toFixed(9);
302
- document.getElementById('timeDilation').textContent = particle.gamma.toFixed(2);
303
  }
304
- document.getElementById('particleCount').textContent = state.particles.length;
305
- document.getElementById('collisionCount').textContent = state.collisionCount;
306
  }
307
 
308
- function injectParticles() {
309
- state.particles.push(new Particle(true));
310
- state.particles.push(new Particle(false));
 
311
  }
312
 
313
  function toggleAcceleration() {
314
- state.acceleratorActive = !state.acceleratorActive;
315
  }
316
 
317
  function toggleCollisions() {
318
- state.collisionsEnabled = !state.collisionsEnabled;
 
 
 
 
 
 
 
 
319
  }
320
 
321
- function clearParticles() {
322
- state.particles = [];
323
- state.collisions = [];
324
- state.collisionCount = 0;
 
 
325
  }
326
 
327
  function animate() {
328
- // Clear main canvas with trail effect
329
- mainCtx.fillStyle = 'rgba(0, 0, 0, 0.1)';
330
- mainCtx.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
331
 
332
  drawAccelerator();
333
-
334
- state.particles.forEach(particle => {
 
 
 
 
 
 
335
  particle.update();
336
- particle.draw(mainCtx);
337
  });
338
 
339
  checkCollisions();
340
- updateCollisionEffects();
341
- drawCollisionEffects();
342
- updateUI();
343
-
344
  requestAnimationFrame(animate);
345
  }
346
 
347
- // Start animation
 
 
 
 
 
 
 
 
 
348
  animate();
349
  </script>
350
  </body>
 
1
  <!DOCTYPE html>
2
+ <html>
3
  <head>
 
 
 
4
  <style>
5
+ body {
6
+ margin: 0;
7
+ background: black;
 
 
 
 
 
 
 
8
  overflow: hidden;
9
+ font-family: Arial, sans-serif;
10
  }
 
 
 
 
 
11
  .controls {
12
  position: fixed;
13
+ top: 20px;
14
+ left: 20px;
15
+ z-index: 1;
 
 
 
16
  }
17
+ .stats {
 
18
  position: fixed;
19
+ top: 20px;
20
+ right: 20px;
21
+ color: #0f0;
22
+ font-family: monospace;
23
+ font-size: 16px;
24
+ text-align: right;
 
25
  }
 
26
  button {
27
+ background: #333;
28
+ color: #0f0;
29
+ border: 2px solid #0f0;
30
+ padding: 10px 20px;
31
  margin: 5px;
32
  cursor: pointer;
33
+ font-size: 14px;
34
+ transition: 0.3s;
35
  }
 
36
  button:hover {
37
+ background: #0f0;
38
+ color: black;
39
  }
40
  </style>
41
  </head>
42
  <body>
 
 
 
43
  <div class="controls">
44
+ <button onclick="addParticles()">Add Particles</button>
45
  <button onclick="toggleAcceleration()">Toggle Acceleration</button>
46
  <button onclick="toggleCollisions()">Toggle Collisions</button>
47
+ <button onclick="resetSimulation()">Reset</button>
48
  </div>
49
+ <div class="stats">
50
+ <div>Speed: <span id="speedDisplay">0</span>%</div>
 
 
51
  <div>Particles: <span id="particleCount">0</span></div>
52
  <div>Collisions: <span id="collisionCount">0</span></div>
 
53
  </div>
54
+ <canvas id="canvas"></canvas>
55
  <script>
56
+ const canvas = document.getElementById('canvas');
57
+ const ctx = canvas.getContext('2d');
58
+
59
+ canvas.width = window.innerWidth;
60
+ canvas.height = window.innerHeight;
61
+
62
+ const centerX = canvas.width / 2;
63
+ const centerY = canvas.height / 2;
64
+ const radius = Math.min(canvas.width, canvas.height) / 3;
65
+
66
+ let particles = [];
67
+ let explosions = [];
68
+ let isAccelerating = true;
69
+ let collisionsEnabled = true;
70
+ let baseSpeed = 0.01;
71
+ let collisionCount = 0;
72
+
73
+ class Explosion {
74
+ constructor(x, y, energy) {
75
+ this.x = x;
76
+ this.y = y;
77
+ this.particles = [];
78
+ this.life = 1;
79
+
80
+ // Create explosion particles
81
+ const particleCount = Math.floor(energy * 100);
82
+ for(let i = 0; i < particleCount; i++) {
83
+ const angle = Math.random() * Math.PI * 2;
84
+ const speed = Math.random() * energy * 10;
85
+ this.particles.push({
86
+ x: x,
87
+ y: y,
88
+ vx: Math.cos(angle) * speed,
89
+ vy: Math.sin(angle) * speed,
90
+ life: 1
91
+ });
92
+ }
 
 
 
 
93
  }
94
 
95
+ update() {
96
+ this.particles.forEach(p => {
97
+ p.x += p.vx;
98
+ p.y += p.vy;
99
+ p.life *= 0.95;
100
+ p.vx *= 0.98;
101
+ p.vy *= 0.98;
102
+ });
103
+ this.particles = this.particles.filter(p => p.life > 0.01);
104
+ this.life = this.particles.length > 0 ? 1 : 0;
105
  }
106
 
107
+ draw() {
108
+ this.particles.forEach(p => {
109
+ ctx.beginPath();
110
+ const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, 5);
111
+ gradient.addColorStop(0, `rgba(255, 200, 0, ${p.life})`);
112
+ gradient.addColorStop(1, 'rgba(255, 100, 0, 0)');
113
+ ctx.fillStyle = gradient;
114
+ ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
115
+ ctx.fill();
116
+ });
117
  }
118
+ }
119
 
120
+ class Particle {
121
+ constructor(clockwise) {
122
+ this.angle = clockwise ? 0 : Math.PI;
123
+ this.clockwise = clockwise;
124
+ this.speed = baseSpeed;
125
+ this.trail = [];
126
+ this.maxTrailLength = 20;
127
+ this.collided = false;
128
  }
129
 
130
+ update() {
131
+ if (isAccelerating && !this.collided) {
132
+ this.speed += 0.0001;
 
 
 
 
 
133
  }
134
+ this.angle += this.clockwise ? this.speed : -this.speed;
135
 
136
+ this.x = centerX + Math.cos(this.angle) * radius;
137
+ this.y = centerY + Math.sin(this.angle) * radius;
 
 
138
 
139
+ this.trail.push({x: this.x, y: this.y});
 
 
 
140
  if (this.trail.length > this.maxTrailLength) {
141
  this.trail.shift();
142
  }
143
  }
144
 
145
+ draw() {
146
+ if (this.collided) return;
147
+
148
+ // Draw trail
149
+ if (this.trail.length > 1) {
150
+ ctx.beginPath();
151
+ ctx.strokeStyle = this.clockwise ?
152
+ `rgba(255,50,50,${this.speed})` :
153
+ `rgba(50,50,255,${this.speed})`;
154
+ ctx.lineWidth = 2;
155
+ ctx.moveTo(this.trail[0].x, this.trail[0].y);
156
+ for (let pos of this.trail) {
157
+ ctx.lineTo(pos.x, pos.y);
 
 
 
 
 
 
 
158
  }
159
+ ctx.stroke();
160
  }
 
161
 
162
+ // Draw particle
 
163
  ctx.beginPath();
164
+ ctx.fillStyle = this.clockwise ? 'red' : 'blue';
165
+ const particleSize = 3 + (this.speed * 20);
166
  ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
167
  ctx.fill();
168
 
169
+ // Draw glow
170
  ctx.beginPath();
171
+ const gradient = ctx.createRadialGradient(
172
+ this.x, this.y, particleSize,
173
+ this.x, this.y, particleSize + 5
174
+ );
175
+ gradient.addColorStop(0, this.clockwise ? 'rgba(255,0,0,0.5)' : 'rgba(0,0,255,0.5)');
176
+ gradient.addColorStop(1, 'rgba(0,0,0,0)');
177
+ ctx.fillStyle = gradient;
178
+ ctx.arc(this.x, this.y, particleSize + 5, 0, Math.PI * 2);
179
+ ctx.fill();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  }
181
  }
182
 
183
  function checkCollisions() {
184
+ if (!collisionsEnabled) return;
185
 
186
+ for (let i = 0; i < particles.length; i++) {
187
+ for (let j = i + 1; j < particles.length; j++) {
188
+ const p1 = particles[i];
189
+ const p2 = particles[j];
190
 
191
+ if (!p1.collided && !p2.collided && p1.clockwise !== p2.clockwise) {
192
  const dx = p1.x - p2.x;
193
  const dy = p1.y - p2.y;
194
  const distance = Math.sqrt(dx * dx + dy * dy);
195
 
196
  if (distance < 10) {
197
+ // Create explosion
198
+ explosions.push(new Explosion(
199
+ (p1.x + p2.x) / 2,
200
+ (p1.y + p2.y) / 2,
201
+ (p1.speed + p2.speed)
202
+ ));
203
+
204
  p1.collided = true;
205
  p2.collided = true;
206
+ collisionCount++;
207
+ document.getElementById('collisionCount').textContent = collisionCount;
208
  }
209
  }
210
  }
211
  }
212
 
213
+ // Remove collided particles
214
+ particles = particles.filter(p => !p.collided);
215
  }
216
 
217
+ function drawAccelerator() {
218
+ // Main ring
219
+ ctx.beginPath();
220
+ ctx.strokeStyle = '#333';
221
+ ctx.lineWidth = 15;
222
+ ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
223
+ ctx.stroke();
224
+
225
+ // Energy points
226
+ for (let i = 0; i < 8; i++) {
227
+ const angle = (i / 8) * Math.PI * 2;
228
+ const x = centerX + Math.cos(angle) * radius;
229
+ const y = centerY + Math.sin(angle) * radius;
230
+
231
+ ctx.beginPath();
232
+ ctx.fillStyle = isAccelerating ? '#0f0' : '#333';
233
+ ctx.arc(x, y, 4, 0, Math.PI * 2);
234
+ ctx.fill();
 
 
 
 
 
 
 
 
 
 
 
235
  }
 
 
236
  }
237
 
238
+ function addParticles() {
239
+ particles.push(new Particle(true));
240
+ particles.push(new Particle(false));
241
+ updateStats();
242
  }
243
 
244
  function toggleAcceleration() {
245
+ isAccelerating = !isAccelerating;
246
  }
247
 
248
  function toggleCollisions() {
249
+ collisionsEnabled = !collisionsEnabled;
250
+ }
251
+
252
+ function resetSimulation() {
253
+ particles = [];
254
+ explosions = [];
255
+ baseSpeed = 0.01;
256
+ collisionCount = 0;
257
+ updateStats();
258
  }
259
 
260
+ function updateStats() {
261
+ const currentSpeed = particles.length > 0 ?
262
+ Math.min(100, particles[0].speed * 1000).toFixed(1) : 0;
263
+ document.getElementById('speedDisplay').textContent = currentSpeed;
264
+ document.getElementById('particleCount').textContent = particles.length;
265
+ document.getElementById('collisionCount').textContent = collisionCount;
266
  }
267
 
268
  function animate() {
269
+ // Clear with trail effect
270
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
271
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
272
 
273
  drawAccelerator();
274
+
275
+ // Update and draw explosions
276
+ explosions.forEach(explosion => explosion.update());
277
+ explosions = explosions.filter(explosion => explosion.life > 0);
278
+ explosions.forEach(explosion => explosion.draw());
279
+
280
+ // Update and draw particles
281
+ particles.forEach(particle => {
282
  particle.update();
283
+ particle.draw();
284
  });
285
 
286
  checkCollisions();
287
+ updateStats();
 
 
 
288
  requestAnimationFrame(animate);
289
  }
290
 
291
+ window.addEventListener('resize', () => {
292
+ canvas.width = window.innerWidth;
293
+ canvas.height = window.innerHeight;
294
+ centerX = canvas.width / 2;
295
+ centerY = canvas.height / 2;
296
+ radius = Math.min(canvas.width, canvas.height) / 3;
297
+ });
298
+
299
+ // Start with initial particles
300
+ addParticles();
301
  animate();
302
  </script>
303
  </body>