मिल्की वे आकाश गंगा

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

29 April 2025

HTML पोर्टफोलियो वेबसाइट टेम्पलेट 2024

HTML

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

मिल्की वे आकाश गंगा

अनुशंसित

वेबसाइट AI (काम नहीं कर रहा)

सीएसएस ब्रेन वेव एनीमेशन

HTML पोर्टफोलियो वेबसाइट टेम्पलेट 2024

HTML

CSS

JS

अनुशंसित

वेबसाइट AI (काम नहीं कर रहा)

सीएसएस ब्रेन वेव एनीमेशन

HTML पोर्टफोलियो वेबसाइट टेम्पलेट 2024

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS