Webleb - UI Elements

HTML CSS JS

<!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>

Preview

Open Advanced Editor Full Screen

HTML CSS JS

Preview

Validating your code, please wait...