Spaces:

adnannovus
/

large_hadron_collider

Running

App Files Files Community

adnannovus commited on Dec 3, 2024

Commit

1a8e9f2

verified ·

1 Parent(s): cfbea2e

Update index.html

Browse files

Files changed (1) hide show

index.html +110 -162

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Particle Accelerator</title>
     <style>
         * {
             margin: 0;
@@ -40,6 +40,7 @@
             padding: 15px;
             border: 1px solid #00ff00;
             z-index: 100;
         }
         button {
@@ -57,18 +58,6 @@
             background: #00ff00;
             color: #000;
         }
-        .separator {
-            height: 1px;
-            background: #00ff00;
-            margin: 10px 0;
-        }
-        .detector {
-            position: fixed;
-            border: 1px solid #00ff00;
-            pointer-events: none;
-        }
     </style>
 </head>
 <body>
@@ -76,19 +65,18 @@
     <canvas id="effectCanvas"></canvas>
     <div class="controls">
-        <button onclick="initializeAccelerator()">Initialize</button>
         <button onclick="injectParticles()">Inject Particles</button>
         <button onclick="toggleAcceleration()">Toggle Acceleration</button>
         <button onclick="toggleCollisions()">Toggle Collisions</button>
-        <div class="separator"></div>
-        <div>Energy Level: <span id="energyLevel">0</span> TeV</div>
-        <div>Collisions: <span id="collisionCount">0</span></div>
-        <div>Particles: <span id="particleCount">0</span></div>
     </div>
     <div class="data">
-        <div>Detector Data:</div>
-        <div id="detectorData"></div>
     </div>
     <script>
@@ -107,82 +95,87 @@
         resizeCanvases();
         window.addEventListener('resize', resizeCanvases);
-        // Simulation state
         const state = {
             particles: [],
-            detectors: [],
             collisions: [],
             acceleratorActive: false,
             collisionsEnabled: false,
             collisionCount: 0,
-            maxEnergy: 13, // TeV
             centerX: window.innerWidth / 2,
             centerY: window.innerHeight / 2,
-            ringRadius: Math.min(window.innerWidth, window.innerHeight) * 0.35,
-            time: 0
         };
         class Particle {
             constructor(clockwise = true) {
                 this.clockwise = clockwise;
                 this.angle = clockwise ? 0 : Math.PI;
-                this.energy = 0.1;
-                this.velocity = 0.01;
                 this.radius = state.ringRadius;
-                this.size = 3;
                 this.trail = [];
-                this.maxTrailLength = 50;
                 this.collided = false;
                 this.updatePosition();
-                this.detectedBy = new Set();
             }
             updatePosition() {
                 this.x = state.centerX + Math.cos(this.angle) * this.radius;
                 this.y = state.centerY + Math.sin(this.angle) * this.radius;
                 this.trail.push({ x: this.x, y: this.y });
                 if (this.trail.length > this.maxTrailLength) {
                     this.trail.shift();
                 }
             }
-            accelerate() {
-                if (state.acceleratorActive && this.energy < state.maxEnergy) {
-                    this.energy += 0.01;
-                    this.velocity = 0.01 + (this.energy / state.maxEnergy) * 0.04;
-                }
-            }
             update() {
-                this.accelerate();
-                this.angle += this.clockwise ? this.velocity : -this.velocity;
                 this.updatePosition();
-                this.checkDetectors();
-            }
-            checkDetectors() {
-                state.detectors.forEach(detector => {
-                    if (!this.detectedBy.has(detector) &&
-                        this.x > detector.x &&
-                        this.x < detector.x + detector.width &&
-                        this.y > detector.y &&
-                        this.y < detector.y + detector.height) {
-                        this.detectedBy.add(detector);
-                        detector.detect(this);
-                    }
-                });
             }
             draw(ctx) {
-                // Draw trail
                 ctx.beginPath();
-                ctx.strokeStyle = this.clockwise ?
-                    `rgba(0, ${155 + this.energy * 10}, 255, 0.5)` :
-                    `rgba(255, ${155 + this.energy * 10}, 0, 0.5)`;
-                ctx.lineWidth = 2;
                 for (let i = 0; i < this.trail.length; i++) {
                     if (i === 0) {
                         ctx.moveTo(this.trail[i].x, this.trail[i].y);
@@ -192,81 +185,61 @@
                 }
                 ctx.stroke();
-                // Draw particle
                 ctx.beginPath();
-                ctx.fillStyle = this.clockwise ? '#00ffff' : '#ff9900';
-                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                 ctx.fill();
-                // Energy indicator
                 ctx.beginPath();
-                ctx.strokeStyle = `rgba(255, 255, 255, ${this.energy / state.maxEnergy})`;
-                ctx.arc(this.x, this.y, this.size + 3, 0, Math.PI * 2);
                 ctx.stroke();
             }
         }
-        class Detector {
-            constructor(x, y, width, height) {
-                this.x = x;
-                this.y = y;
-                this.width = width;
-                this.height = height;
-                this.detections = [];
-                this.element = document.createElement('div');
-                this.element.className = 'detector';
-                this.element.style.left = `${x}px`;
-                this.element.style.top = `${y}px`;
-                this.element.style.width = `${width}px`;
-                this.element.style.height = `${height}px`;
-                document.body.appendChild(this.element);
-            }
-            detect(particle) {
-                this.detections.push({
-                    time: state.time,
-                    energy: particle.energy,
-                    direction: particle.clockwise ? 'clockwise' : 'counterclockwise'
                 });
-                this.element.style.backgroundColor = 'rgba(0, 255, 0, 0.2)';
-                setTimeout(() => {
-                    this.element.style.backgroundColor = 'transparent';
-                }, 100);
             }
         }
-        function createDetectors() {
-            const detectorSize = 40;
-            const positions = [
-                { angle: 0, label: 'East' },
-                { angle: Math.PI / 2, label: 'South' },
-                { angle: Math.PI, label: 'West' },
-                { angle: 3 * Math.PI / 2, label: 'North' }
-            ];
-            positions.forEach(pos => {
-                const x = state.centerX + Math.cos(pos.angle) * state.ringRadius - detectorSize/2;
-                const y = state.centerY + Math.sin(pos.angle) * state.ringRadius - detectorSize/2;
-                state.detectors.push(new Detector(x, y, detectorSize, detectorSize));
-            });
-        }
         function drawAccelerator() {
             mainCtx.beginPath();
-            mainCtx.strokeStyle = '#333';
             mainCtx.lineWidth = 20;
             mainCtx.arc(state.centerX, state.centerY, state.ringRadius, 0, Math.PI * 2);
             mainCtx.stroke();
-            // Energy sections
-            for (let i = 0; i < 8; i++) {
-                const angle = (i / 8) * Math.PI * 2;
-                mainCtx.beginPath();
-                mainCtx.strokeStyle = '#0f0';
-                mainCtx.lineWidth = 2;
                 const x = state.centerX + Math.cos(angle) * state.ringRadius;
                 const y = state.centerY + Math.sin(angle) * state.ringRadius;
-                mainCtx.arc(x, y, 10, 0, Math.PI * 2);
                 mainCtx.stroke();
             }
         }
@@ -284,8 +257,9 @@
                         const dy = p1.y - p2.y;
                         const distance = Math.sqrt(dx * dx + dy * dy);
-                        if (distance < 10 && p1.energy > 1 && p2.energy > 1) {
-                            createCollisionEffect(p1.x, p1.y, p1.energy + p2.energy);
                             p1.collided = true;
                             p2.collided = true;
                             state.collisionCount++;
@@ -297,30 +271,13 @@
             state.particles = state.particles.filter(p => !p.collided);
         }
-        function createCollisionEffect(x, y, energy) {
-            const particles = 50;
-            const speed = 5;
-            for (let i = 0; i < particles; i++) {
-                const angle = (i / particles) * Math.PI * 2;
-                const velocity = {
-                    x: Math.cos(angle) * speed * (Math.random() + 0.5),
-                    y: Math.sin(angle) * speed * (Math.random() + 0.5)
-                };
-                state.collisions.push({
-                    x, y,
-                    velocity,
-                    life: 1,
-                    color: `hsl(${Math.random() * 60 + 30}, 100%, 50%)`
-                });
-            }
-        }
         function updateCollisionEffects() {
             state.collisions.forEach(p => {
                 p.x += p.velocity.x;
                 p.y += p.velocity.y;
                 p.life -= 0.02;
             });
             state.collisions = state.collisions.filter(p => p.life > 0);
@@ -332,32 +289,20 @@
             state.collisions.forEach(p => {
                 effectCtx.beginPath();
                 effectCtx.fillStyle = p.color.replace(')', `, ${p.life})`);
-                effectCtx.arc(p.x, p.y, 2, 0, Math.PI * 2);
                 effectCtx.fill();
             });
         }
         function updateUI() {
-            document.getElementById('energyLevel').textContent =
-                state.particles.length > 0 ?
-                state.particles[0].energy.toFixed(2) : '0.00';
-            document.getElementById('collisionCount').textContent = state.collisionCount;
             document.getElementById('particleCount').textContent = state.particles.length;
-            // Update detector data
-            const detectorData = state.detectors.map((detector, i) => {
-                const recent = detector.detections.slice(-3);
-                return `Detector ${i + 1}: ${recent.length} recent detections`;
-            }).join('<br>');
-            document.getElementById('detectorData').innerHTML = detectorData;
-        }
-        // Control functions
-        function initializeAccelerator() {
-            state.particles = [];
-            state.collisions = [];
-            state.collisionCount = 0;
-            state.detectors.forEach(d => d.detections = []);
         }
         function injectParticles() {
@@ -373,10 +318,14 @@
             state.collisionsEnabled = !state.collisionsEnabled;
         }
-        function animate() {
-            state.time++;
-            // Clear main canvas
             mainCtx.fillStyle = 'rgba(0, 0, 0, 0.1)';
             mainCtx.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
@@ -395,8 +344,7 @@
             requestAnimationFrame(animate);
         }
-        // Initialize and start
-        createDetectors();
         animate();
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Relativistic Particle Accelerator</title>
     <style>
         * {
             margin: 0;
             padding: 15px;
             border: 1px solid #00ff00;
             z-index: 100;
+            min-width: 200px;
         }
         button {
             background: #00ff00;
             color: #000;
         }
     </style>
 </head>
 <body>
     <canvas id="effectCanvas"></canvas>
     <div class="controls">
         <button onclick="injectParticles()">Inject Particles</button>
         <button onclick="toggleAcceleration()">Toggle Acceleration</button>
         <button onclick="toggleCollisions()">Toggle Collisions</button>
+        <button onclick="clearParticles()">Clear</button>
     </div>
     <div class="data">
+        <div>Energy: <span id="energyLevel">0</span> TeV</div>
+        <div>Velocity: <span id="velocityC">0</span>c</div>
+        <div>Particles: <span id="particleCount">0</span></div>
+        <div>Collisions: <span id="collisionCount">0</span></div>
+        <div>Time Dilation: <span id="timeDilation">1</span>x</div>
     </div>
     <script>
         resizeCanvases();
         window.addEventListener('resize', resizeCanvases);
+        const SPEED_OF_LIGHT = 299792458; // m/s
+        const ELECTRON_MASS = 9.1093837015e-31; // kg
         const state = {
             particles: [],
             collisions: [],
             acceleratorActive: false,
             collisionsEnabled: false,
             collisionCount: 0,
             centerX: window.innerWidth / 2,
             centerY: window.innerHeight / 2,
+            ringRadius: Math.min(window.innerWidth, window.innerHeight) * 0.35
         };
         class Particle {
             constructor(clockwise = true) {
                 this.clockwise = clockwise;
                 this.angle = clockwise ? 0 : Math.PI;
+                this.energy = 0.1; // TeV
+                this.mass = ELECTRON_MASS;
+                this.velocity = 0.1; // As fraction of c
                 this.radius = state.ringRadius;
                 this.trail = [];
+                this.maxTrailLength = 100;
                 this.collided = false;
                 this.updatePosition();
+            }
+            // Relativistic calculations
+            get gamma() {
+                return 1 / Math.sqrt(1 - this.velocity * this.velocity);
+            }
+            get timeDilation() {
+                return this.gamma;
+            }
+            get relativeVelocity() {
+                return this.velocity * SPEED_OF_LIGHT;
+            }
+            accelerate(deltaTime) {
+                if (state.acceleratorActive) {
+                    // Relativistic acceleration
+                    const acceleration = 0.001 * (1 - this.velocity);
+                    this.velocity = Math.min(0.9999999999, this.velocity + acceleration);
+                    // Energy calculation in TeV
+                    this.energy = (this.gamma - 1) * 0.511e-3 * 1000;
+                }
             }
             updatePosition() {
+                // Relativistic motion
+                const angleChange = (this.velocity * 0.1) / this.gamma;
+                this.angle += this.clockwise ? angleChange : -angleChange;
                 this.x = state.centerX + Math.cos(this.angle) * this.radius;
                 this.y = state.centerY + Math.sin(this.angle) * this.radius;
                 this.trail.push({ x: this.x, y: this.y });
                 if (this.trail.length > this.maxTrailLength) {
                     this.trail.shift();
                 }
             }
             update() {
+                this.accelerate(1/60);
                 this.updatePosition();
             }
             draw(ctx) {
+                // Draw relativistic trail with Doppler effect
+                const hue = this.clockwise ?
+                    240 - (this.velocity * 240) : // Blue shifting
+                    60 + (this.velocity * 60);   // Red shifting
                 ctx.beginPath();
+                ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 0.5)`;
+                ctx.lineWidth = 2 + (this.velocity * 3);
                 for (let i = 0; i < this.trail.length; i++) {
                     if (i === 0) {
                         ctx.moveTo(this.trail[i].x, this.trail[i].y);
                 }
                 ctx.stroke();
+                // Draw particle with relativistic effects
+                const particleSize = 3 + (this.velocity * 2);
                 ctx.beginPath();
+                ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
+                ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
                 ctx.fill();
+                // Energy aura
                 ctx.beginPath();
+                ctx.strokeStyle = `rgba(255, 255, 255, ${this.velocity})`;
+                ctx.arc(this.x, this.y, particleSize + 3, 0, Math.PI * 2);
                 ctx.stroke();
             }
         }
+        function createCollisionEffect(x, y, energy) {
+            const particleCount = Math.floor(50 + energy * 10);
+            const baseSpeed = 5 + energy;
+            for (let i = 0; i < particleCount; i++) {
+                const angle = (i / particleCount) * Math.PI * 2 + Math.random() * 0.5;
+                const speed = baseSpeed * (0.5 + Math.random());
+                const velocity = {
+                    x: Math.cos(angle) * speed,
+                    y: Math.sin(angle) * speed
+                };
+                state.collisions.push({
+                    x, y,
+                    velocity,
+                    life: 1,
+                    energy: energy * Math.random(),
+                    color: `hsl(${30 + Math.random() * 60}, 100%, 50%)`
                 });
             }
         }
         function drawAccelerator() {
+            // Draw main ring
             mainCtx.beginPath();
+            mainCtx.strokeStyle = '#111';
             mainCtx.lineWidth = 20;
             mainCtx.arc(state.centerX, state.centerY, state.ringRadius, 0, Math.PI * 2);
             mainCtx.stroke();
+            // Draw acceleration segments
+            for (let i = 0; i < 16; i++) {
+                const angle = (i / 16) * Math.PI * 2;
                 const x = state.centerX + Math.cos(angle) * state.ringRadius;
                 const y = state.centerY + Math.sin(angle) * state.ringRadius;
+                mainCtx.beginPath();
+                mainCtx.strokeStyle = state.acceleratorActive ? '#0f0' : '#030';
+                mainCtx.lineWidth = 2;
+                mainCtx.arc(x, y, 5, 0, Math.PI * 2);
                 mainCtx.stroke();
             }
         }
                         const dy = p1.y - p2.y;
                         const distance = Math.sqrt(dx * dx + dy * dy);
+                        if (distance < 10) {
+                            const totalEnergy = p1.energy + p2.energy;
+                            createCollisionEffect(p1.x, p1.y, totalEnergy);
                             p1.collided = true;
                             p2.collided = true;
                             state.collisionCount++;
             state.particles = state.particles.filter(p => !p.collided);
         }
         function updateCollisionEffects() {
             state.collisions.forEach(p => {
                 p.x += p.velocity.x;
                 p.y += p.velocity.y;
                 p.life -= 0.02;
+                p.velocity.x *= 0.98;
+                p.velocity.y *= 0.98;
             });
             state.collisions = state.collisions.filter(p => p.life > 0);
             state.collisions.forEach(p => {
                 effectCtx.beginPath();
                 effectCtx.fillStyle = p.color.replace(')', `, ${p.life})`);
+                effectCtx.arc(p.x, p.y, 2 + p.energy/10, 0, Math.PI * 2);
                 effectCtx.fill();
             });
         }
         function updateUI() {
+            const particle = state.particles[0];
+            if (particle) {
+                document.getElementById('energyLevel').textContent = particle.energy.toFixed(2);
+                document.getElementById('velocityC').textContent = particle.velocity.toFixed(9);
+                document.getElementById('timeDilation').textContent = particle.gamma.toFixed(2);
+            }
             document.getElementById('particleCount').textContent = state.particles.length;
+            document.getElementById('collisionCount').textContent = state.collisionCount;
         }
         function injectParticles() {
             state.collisionsEnabled = !state.collisionsEnabled;
         }
+        function clearParticles() {
+            state.particles = [];
+            state.collisions = [];
+            state.collisionCount = 0;
+        }
+        function animate() {
+            // Clear main canvas with trail effect
             mainCtx.fillStyle = 'rgba(0, 0, 0, 0.1)';
             mainCtx.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
             requestAnimationFrame(animate);
         }
+        // Start animation
         animate();
     </script>
 </body>