BLACK HOLE

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Realistic Black Hole Simulation</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    canvas {
      display: block;
      max-width: 100%;
      max-height: 100%;
      box-shadow: 0 0 50px rgba(0, 150, 255, 0.3);
    }
    
    .info {
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: white;
      font-family: Arial, sans-serif;
      font-size: 14px;
      opacity: 0.7;
    }
    
    .controls {
      position: absolute;
      top: 20px;
      left: 20px;
      color: white;
      font-family: Arial, sans-serif;
    }
    
    button {
      background: rgba(0, 100, 200, 0.5);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 5px 10px;
      margin-right: 5px;
      border-radius: 3px;
      cursor: pointer;
    }
    
    button:hover {
      background: rgba(0, 150, 255, 0.7);
    }
  </style>
</head>
<body>
  <div class="controls">
    <button id="toggleAccretion">Toggle Accretion Disk</button>
    <button id="toggleLensing">Toggle Gravitational Lensing</button>
    <button id="toggleDoppler">Toggle Doppler Effect</button>
  </div>
  
  <div class="info">
    Black Hole Simulation | Schwarzschild Radius: <span id="radiusDisplay">3</span> | Time Dilation: <span id="timeDisplay">0</span>x
  </div>
  
  <script>
    // Configuration
    const config = {
      accretionDisk: true,
      gravitationalLensing: true,
      dopplerEffect: true,
      blackHoleMass: 10,
      timeStep: 0.01,
      particleCount: 2000,
      maxParticleAge: 100,
      accretionDiskSize: 300,
      accretionDiskThickness: 50,
      schwarzschildRadius: 30
    };
    
    // Canvas setup
    const c = document.createElement("canvas");
    document.body.appendChild(c);
    const ctx = c.getContext("2d");
    
    // Set canvas size
    function resizeCanvas() {
      const size = Math.min(window.innerWidth, window.innerHeight) * 0.9;
      c.width = size;
      c.height = size;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    
    // Math shortcuts
    const { sin, cos, tan, atan2, sqrt, PI, random } = Math;
    const S = sin, C = cos, T = tan;
    
    // Color helper
    function R(r, g, b, a = 1) {
      return `rgba(${r|0},${g|0},${b|0},${a})`;
    };
    
    // Particle system
    class Particle {
      constructor() {
        this.reset();
        this.age = random() * config.maxParticleAge;
      }
      
      reset() {
        // Start particles in an accretion disk
        const angle = random() * PI * 2;
        const distance = config.accretionDiskSize * (0.5 + random() * 0.5);
        
        this.x = distance * cos(angle);
        this.y = distance * sin(angle);
        this.z = (random() - 0.5) * config.accretionDiskThickness;
        
        // Initial velocity (orbital with some random component)
        const orbitalSpeed = sqrt(config.blackHoleMass / distance) * 10;
        this.vx = -orbitalSpeed * sin(angle) * (0.9 + random() * 0.2);
        this.vy = orbitalSpeed * cos(angle) * (0.9 + random() * 0.2);
        this.vz = (random() - 0.5) * 0.5;
        
        this.age = 0;
        this.maxAge = config.maxParticleAge * (0.5 + random() * 0.5);
        this.size = 1 + random() * 3;
        
        // Color based on temperature (blue = hot, red = cooler)
        const temp = 0.2 + random() * 0.8;
        this.color = R(
          255 * temp,
          150 * temp,
          255 * (1 - temp),
          0.8
        );
      }
      
      update(dt) {
        // Calculate distance to black hole
        const dx = this.x;
        const dy = this.y;
        const dz = this.z;
        const distanceSq = dx*dx + dy*dy + dz*dz;
        const distance = sqrt(distanceSq);
        
        // Gravitational acceleration (Newtonian for simplicity)
        const gravity = config.blackHoleMass / distanceSq;
        const ax = -gravity * dx / distance * 100;
        const ay = -gravity * dy / distance * 100;
        const az = -gravity * dz / distance * 100;
        
        // Update velocity
        this.vx += ax * dt;
        this.vy += ay * dt;
        this.vz += az * dt;
        
        // Update position
        this.x += this.vx * dt;
        this.y += this.vy * dt;
        this.z += this.vz * dt;
        
        // Age particle
        this.age += dt;
        
        // Reset if particle is too old or falls into the black hole
        if (this.age > this.maxAge || distance < config.schwarzschildRadius * 1.5) {
          this.reset();
        }
      }
    }
    
    // Create particles
    const particles = [];
    for (let i = 0; i < config.particleCount; i++) {
      particles.push(new Particle());
    }
    
    // Main render function
    function u(t) {
      // Clear canvas
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, c.width, c.height);
      
      // Center of the canvas
      const centerX = c.width / 2;
      const centerY = c.height / 2;
      const scale = c.width / 600;
      
      // Update and draw particles
      particles.forEach(p => {
        p.update(config.timeStep);
        
        // Project 3D position to 2D
        const z = p.z + 200; // Camera distance
        const scaleFactor = 200 / z;
        const screenX = centerX + p.x * scaleFactor * scale;
        const screenY = centerY + p.y * scaleFactor * scale;
        const screenSize = p.size * scaleFactor * scale;
        
        // Apply gravitational lensing effect
        if (config.gravitationalLensing) {
          const dx = screenX - centerX;
          const dy = screenY - centerY;
          const distFromCenter = sqrt(dx*dx + dy*dy);
          const lensingFactor = 1 + (config.schwarzschildRadius * scale) / (distFromCenter + 1);
          
          // Distort position
          const lensedX = centerX + dx * lensingFactor;
          const lensedY = centerY + dy * lensingFactor;
          
          // Apply Doppler effect (redshift/blueshift)
          if (config.dopplerEffect) {
            // Calculate velocity component toward/away from viewer
            const velocityTowardViewer = -p.vz;
            
            // Simple Doppler shift (not relativistic)
            const dopplerFactor = 1 + velocityTowardViewer * 0.01;
            
            // Extract RGB from color
            const colorMatch = p.color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
            if (colorMatch) {
              let r = parseInt(colorMatch[1]);
              let g = parseInt(colorMatch[2]);
              let b = parseInt(colorMatch[3]);
              
              // Shift color based on velocity
              if (velocityTowardViewer > 0) {
                // Blueshift (moving toward us)
                b = Math.min(255, b * (1 + dopplerFactor * 0.2));
                g = Math.min(255, g * (1 + dopplerFactor * 0.1));
              } else {
                // Redshift (moving away)
                r = Math.min(255, r * (1 - dopplerFactor * 0.2));
                b = Math.max(0, b * (0.8 - dopplerFactor * 0.1));
              }
              
              p.color = R(r, g, b, 0.8);
            }
          }
          
          // Draw the particle
          ctx.fillStyle = p.color;
          ctx.beginPath();
          ctx.arc(lensedX, lensedY, screenSize, 0, PI * 2);
          ctx.fill();
        } else {
          // Without lensing
          ctx.fillStyle = p.color;
          ctx.beginPath();
          ctx.arc(screenX, screenY, screenSize, 0, PI * 2);
          ctx.fill();
        }
      });
      
      // Draw accretion disk
      if (config.accretionDisk) {
        const gradient = ctx.createRadialGradient(
          centerX, centerY, config.schwarzschildRadius * scale,
          centerX, centerY, config.accretionDiskSize * scale
        );
        gradient.addColorStop(0, 'rgba(255, 100, 0, 0.8)');
        gradient.addColorStop(0.5, 'rgba(255, 200, 0, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 100, 255, 0.1)');
        
        ctx.beginPath();
        ctx.arc(centerX, centerY, config.accretionDiskSize * scale, 0, PI * 2);
        ctx.fillStyle = gradient;
        ctx.fill();
      }
      
      // Draw black hole (event horizon)
      ctx.beginPath();
      ctx.arc(centerX, centerY, config.schwarzschildRadius * scale, 0, PI * 2);
      
      // Black hole gradient
      const bhGradient = ctx.createRadialGradient(
        centerX, centerY, config.schwarzschildRadius * scale * 0.5,
        centerX, centerY, config.schwarzschildRadius * scale
      );
      bhGradient.addColorStop(0, 'rgba(50, 50, 100, 0.8)');
      bhGradient.addColorStop(0.7, 'rgba(20, 20, 40, 0.9)');
      bhGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
      
      ctx.fillStyle = bhGradient;
      ctx.fill();
      
      // Update info display
      document.getElementById('radiusDisplay').textContent = config.schwarzschildRadius;
      document.getElementById('timeDisplay').textContent = 
        (1 / sqrt(1 - (2 * config.blackHoleMass) / (config.accretionDiskSize * 0.8))).toFixed(2);
    }
    
    // Animation loop
    let startTime = Date.now();
    function animate() {
      const currentTime = Date.now();
      const elapsedTime = (currentTime - startTime) / 1000;
      
      u(elapsedTime);
      requestAnimationFrame(animate);
    }
    
    // Start animation
    animate();
    
    // UI Controls
    document.getElementById('toggleAccretion').addEventListener('click', () => {
      config.accretionDisk = !config.accretionDisk;
    });
    
    document.getElementById('toggleLensing').addEventListener('click', () => {
      config.gravitationalLensing = !config.gravitationalLensing;
    });
    
    document.getElementById('toggleDoppler').addEventListener('click', () => {
      config.dopplerEffect = !config.dopplerEffect;
    });
  </script>
</body>
</html>

BLACK HOLE

Recommended

Password generator (BLACK)

Friday Night Funkin' Black's Betrayal Game

Orange Black Web Site

HTML

CSS

JS

Recommended

Password generator (BLACK)

Friday Night Funkin' Black's Betrayal Game

Orange Black Web Site

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS