Update stars.js

stars.js

@@ -7,13 +7,15 @@
   let layers = [];
   let comets = [];
   let pulses = [];
+  let particles = [];
+  let mouse = { x: 0, y: 0, active: false };
 
   // Layer configurations: count, base speed, draw size
   const layerConfigs = [
-    { count: 400, speed: 1.5, size: 2.5 },
-    { count: 300, speed: 3.0, size: 4.0 },
-    { count: 200, speed: 6.0, size: 5.5 },
-    { count: 100, speed: 10.0, size: 8.0 },
+    { count: 500, speed: 1.5, size: 2.5 },
+    { count: 400, speed: 3.0, size: 4.0 },
+    { count: 300, speed: 6.0, size: 5.5 },
+    { count: 200, speed: 10.0, size: 8.0 },
   ];
 
   const rand = (min, max) => min + Math.random() * (max - min);
@@ -25,7 +27,7 @@
     canvas.width = width;
     canvas.height = height;
 
-    // Create background with nebula effect
+    // Create background with enhanced nebula effect
     bgCanvas = document.createElement("canvas");
     bgCanvas.width = width;
     bgCanvas.height = height;
@@ -36,66 +38,104 @@
       width / 2, height / 2, 0,
       width / 2, height / 2, width * 0.8
     );
-    bgGrad.addColorStop(0, "#111122");
+    bgGrad.addColorStop(0, "#0a0a1a");
+    bgGrad.addColorStop(0.5, "#111122");
     bgGrad.addColorStop(1, "#000011");
     bgCtx.fillStyle = bgGrad;
     bgCtx.fillRect(0, 0, width, height);
     
-    // Nebula effect
-    const nebulaCount = Math.floor(width * height / 40000);
-    bgCtx.globalCompositeOperation = "lighter";
+    // Enhanced nebula effect with multiple layers
+    const nebulaCount = Math.floor(width * height / 30000);
+    bgCtx.globalCompositeOperation = "screen";
     for (let i = 0; i < nebulaCount; i++) {
       const x = rand(0, width);
       const y = rand(0, height);
-      const radius = rand(50, 300);
+      const radius = rand(100, 400);
       const hue = rand(220, 280);
-      const alpha = rand(0.01, 0.03);
+      const alpha = rand(0.02, 0.05);
       
       const grd = bgCtx.createRadialGradient(
         x, y, 0, 
         x, y, radius
       );
-      grd.addColorStop(0, `hsla(${hue}, 70%, 60%, ${alpha})`);
-      grd.addColorStop(1, `hsla(${hue}, 80%, 30%, 0)`);
+      grd.addColorStop(0, `hsla(${hue}, 80%, 70%, ${alpha})`);
+      grd.addColorStop(0.3, `hsla(${hue + 20}, 70%, 50%, ${alpha * 0.7})`);
+      grd.addColorStop(1, `hsla(${hue - 20}, 90%, 30%, 0)`);
       
       bgCtx.beginPath();
       bgCtx.fillStyle = grd;
       bgCtx.arc(x, y, radius, 0, Math.PI * 2);
       bgCtx.fill();
     }
+    
+    // Add subtle star clusters
+    bgCtx.globalCompositeOperation = "lighter";
+    for (let i = 0; i < nebulaCount / 3; i++) {
+      const x = rand(0, width);
+      const y = rand(0, height);
+      const clusterSize = rand(20, 60);
+      
+      const clusterGrad = bgCtx.createRadialGradient(
+        x, y, 0,
+        x, y, clusterSize
+      );
+      clusterGrad.addColorStop(0, `rgba(255, 255, 255, 0.1)`);
+      clusterGrad.addColorStop(1, `rgba(200, 220, 255, 0)`);
+      
+      bgCtx.beginPath();
+      bgCtx.fillStyle = clusterGrad;
+      bgCtx.arc(x, y, clusterSize, 0, Math.PI * 2);
+      bgCtx.fill();
+    }
+    
     bgCtx.globalCompositeOperation = "source-over";
   }
 
-  // Pre-render star sprites with glow
+  // Pre-render enhanced star sprites with glow
   function createStarSprites() {
     starSprites = layerConfigs.map(cfg => {
       const r = cfg.size;
-      const sz = Math.ceil(r * 6);
+      const sz = Math.ceil(r * 8);
       const off = document.createElement("canvas");
       off.width = off.height = sz;
       const octx = off.getContext("2d");
       
-      // Core glow
-      octx.fillStyle = "#fff";
-      octx.shadowColor = "#fff";
-      octx.shadowBlur = r * 4;
+      // Core glow with gradient
+      const gradient = octx.createRadialGradient(
+        sz/2, sz/2, 0,
+        sz/2, sz/2, r * 3
+      );
+      gradient.addColorStop(0, "#ffffff");
+      gradient.addColorStop(0.3, "#a0c0ff");
+      gradient.addColorStop(1, "rgba(50, 100, 255, 0)");
+      
+      octx.fillStyle = gradient;
       octx.beginPath();
-      octx.arc(sz/2, sz/2, r, 0, Math.PI * 2);
+      octx.arc(sz/2, sz/2, r * 3, 0, Math.PI * 2);
       octx.fill();
       
-      // Bright core
-      octx.shadowBlur = 0;
-      octx.globalCompositeOperation = "source-over";
+      // Bright core with corona
+      octx.shadowColor = "#88ccff";
+      octx.shadowBlur = r * 2;
+      octx.globalCompositeOperation = "lighter";
       octx.fillStyle = "#ffffff";
       octx.beginPath();
-      octx.arc(sz/2, sz/2, r * 0.6, 0, Math.PI * 2);
+      octx.arc(sz/2, sz/2, r * 0.8, 0, Math.PI * 2);
+      octx.fill();
+      
+      // Secondary corona
+      octx.shadowColor = "#5599ff";
+      octx.shadowBlur = r * 4;
+      octx.fillStyle = "rgba(150, 200, 255, 0.7)";
+      octx.beginPath();
+      octx.arc(sz/2, sz/2, r * 0.5, 0, Math.PI * 2);
       octx.fill();
       
       return off;
     });
   }
 
-  // Initialize star layers with twinkle parameters
+  // Initialize star layers with enhanced twinkle parameters
   function initStars() {
     layers = layerConfigs.map((cfg, idx) => {
       const stars = [];
@@ -105,106 +145,191 @@
           y: rand(-height/2, height/2),
           z: rand(1, width),
           twPhase: rand(0, Math.PI * 2),
-          twFreq: rand(0.01, 0.03),
-          twRange: rand(0.3, 0.7),
+          twFreq: rand(0.01, 0.05),
+          twRange: rand(0.2, 0.8),
           sprIndex: idx,
+          hue: rand(180, 220), // Blue-ish stars
+          saturation: rand(70, 100),
+          brightness: rand(80, 100),
+          pulsePhase: rand(0, Math.PI * 2),
+          pulseSpeed: rand(0.02, 0.08),
+          originalSize: cfg.size
         });
       }
       return { ...cfg, stars };
     });
   }
 
-  // Spawn comets with natural motion
+  // Spawn comets with enhanced effects
   function maybeComet() {
-    if (Math.random() < 0.002) {
-      const angle = Math.PI * 0.25 + rand(-0.3, 0.3);
+    if (Math.random() < 0.003) {
+      const angle = Math.PI * 0.25 + rand(-0.5, 0.5);
       comets.push({
-        x: rand(-50, width + 50),
-        y: rand(-50, height * 0.3),
+        x: rand(-100, width + 100),
+        y: rand(-100, height * 0.4),
         len: 0,
-        maxLen: rand(80, 200),
+        maxLen: rand(100, 250),
         angle: angle,
-        speed: rand(10, 16),
+        speed: rand(12, 20),
         segments: [],
-        alpha: 1.0
+        alpha: 1.0,
+        hue: rand(180, 220),
+        size: rand(2, 5)
+      });
+    }
+  }
+
+  // Create particle explosion
+  function createParticles(x, y, count, color) {
+    for (let i = 0; i < count; i++) {
+      particles.push({
+        x: x,
+        y: y,
+        vx: rand(-3, 3),
+        vy: rand(-3, 3),
+        life: 1.0,
+        decay: rand(0.01, 0.03),
+        size: rand(1, 3),
+        color: color || `hsl(${rand(180, 220)}, 100%, ${rand(70, 90)}%)`
       });
     }
   }
 
-  // Click creates warp pulse with multiple rings
+  // Click creates enhanced warp pulse with particles
   canvas.addEventListener("click", e => {
-    for (let i = 0; i < 3; i++) {
+    // Create main pulses
+    for (let i = 0; i < 5; i++) {
       pulses.push({
         x: e.clientX,
         y: e.clientY,
-        r: i * 20,
-        maxR: 150 + i * 80,
-        thickness: 15 - i * 3,
-        alpha: 0.7 - i * 0.2,
-        speed: 8 - i * 2
+        r: i * 15,
+        maxR: 200 + i * 60,
+        thickness: 20 - i * 2,
+        alpha: 0.8 - i * 0.15,
+        speed: 10 - i * 1.5,
+        hue: rand(180, 220)
       });
     }
+    
+    // Create particle explosion
+    createParticles(e.clientX, e.clientY, 50, `hsl(${rand(180, 220)}, 100%, 80%)`);
+  });
+
+  // Mouse move for star attraction
+  canvas.addEventListener("mousemove", e => {
+    mouse.x = e.clientX;
+    mouse.y = e.clientY;
+    mouse.active = true;
+  });
+
+  canvas.addEventListener("mouseleave", () => {
+    mouse.active = false;
   });
 
   // Update positions and effects
   function update() {
     const now = Date.now();
     
-    // Update stars
+    // Update stars with mouse attraction
     layers.forEach(layer => {
       layer.stars.forEach(s => {
         s.z -= layer.speed;
+        
+        // Mouse attraction effect
+        if (mouse.active) {
+          const dx = (mouse.x - width/2) - s.x;
+          const dy = (mouse.y - height/2) - s.y;
+          const dist = Math.sqrt(dx*dx + dy*dy);
+          
+          if (dist < 300) {
+            const force = (300 - dist) / 300 * 0.5;
+            s.x += dx * force * (s.z / width);
+            s.y += dy * force * (s.z / width);
+          }
+        }
+        
         if (s.z <= 0) {
           s.z = width;
           s.x = rand(-width/2, width/2);
           s.y = rand(-height/2, height/2);
         }
-        // Update twinkle
+        // Update twinkle and pulsing
         s.twPhase += s.twFreq;
+        s.pulsePhase += s.pulseSpeed;
       });
     });
     
     // Update comets
-    comets = comets.filter(c => c.alpha > 0.1);
+    comets = comets.filter(c => c.alpha > 0.05);
     comets.forEach(c => {
       c.len += c.speed;
       const headX = c.x + Math.cos(c.angle) * c.len;
       const headY = c.y + Math.sin(c.angle) * c.len;
       
       // Add new segment
-      c.segments.push({x: headX, y: headY, alpha: 1.0});
+      c.segments.push({
+        x: headX, 
+        y: headY, 
+        alpha: 1.0,
+        size: c.size * (0.5 + 0.5 * Math.random())
+      });
       
       // Fade old segments
-      c.segments.forEach(seg => seg.alpha -= 0.02);
+      c.segments.forEach(seg => seg.alpha -= 0.015);
       
       // Remove old segments
-      if (c.segments.length > 20) c.segments.shift();
+      if (c.segments.length > 30) c.segments.shift();
       
       // Fade entire comet
-      c.alpha -= 0.003;
+      c.alpha -= 0.002;
+      
+      // Occasionally create particles
+      if (Math.random() < 0.3) {
+        createParticles(headX, headY, 1, `hsl(${c.hue}, 100%, 70%)`);
+      }
     });
     
     // Update pulses
     pulses = pulses.filter(p => p.r < p.maxR);
     pulses.forEach(p => {
       p.r += p.speed;
-      p.alpha -= 0.008;
+      p.alpha -= 0.006;
+    });
+    
+    // Update particles
+    particles = particles.filter(p => p.life > 0);
+    particles.forEach(p => {
+      p.x += p.vx;
+      p.y += p.vy;
+      p.vy += 0.05; // Gravity
+      p.life -= p.decay;
+      p.vx *= 0.98; // Friction
+      p.vy *= 0.98;
     });
     
     maybeComet();
   }
 
-  // Draw the scene
+  // Draw the enhanced scene
   function draw() {
-    // Background
+    // Background with subtle movement
     ctx.clearRect(0, 0, width, height);
     ctx.drawImage(bgCanvas, 0, 0);
     
-    // Motion trails
-    ctx.fillStyle = "rgba(0,0,10,0.1)";
+    // Subtle motion blur effect
+    ctx.fillStyle = "rgba(5, 5, 15, 0.05)";
     ctx.fillRect(0, 0, width, height);
     
-    // Stars
+    // Draw particles
+    particles.forEach(p => {
+      ctx.globalAlpha = p.life;
+      ctx.fillStyle = p.color;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
+      ctx.fill();
+    });
+    
+    // Stars with enhanced effects
     layers.forEach((layer, li) => {
       const sprite = starSprites[li];
       ctx.globalCompositeOperation = "lighter";
@@ -215,10 +340,11 @@
         
         if (x < -100 || x > width+100 || y < -100 || y > height+100) return;
         
-        // Calculate twinkle
+        // Calculate twinkle with pulsing
         const twinkle = 0.5 + 0.5 * Math.sin(s.twPhase);
-        const alpha = s.twRange + (1 - s.twRange) * twinkle;
-        const ds = (1 - s.z/width) * layer.size * 1.5;
+        const pulse = 0.8 + 0.2 * Math.sin(s.pulsePhase);
+        const alpha = (s.twRange + (1 - s.twRange) * twinkle) * pulse;
+        const ds = (1 - s.z/width) * s.originalSize * 2 * pulse;
         
         ctx.globalAlpha = alpha;
         ctx.drawImage(sprite, x - ds, y - ds, ds * 2, ds * 2);
@@ -227,7 +353,7 @@
     ctx.globalCompositeOperation = "source-over";
     ctx.globalAlpha = 1;
     
-    // Comets with particle trails
+    // Comets with enhanced particle trails
     comets.forEach(c => {
       ctx.lineCap = "round";
       for (let i = 1; i < c.segments.length; i++) {
@@ -238,11 +364,12 @@
           seg1.x, seg1.y, seg2.x, seg2.y
         );
         const segAlpha = Math.min(seg1.alpha, seg2.alpha) * c.alpha;
-        gradient.addColorStop(0, `rgba(200,220,255,${segAlpha})`);
-        gradient.addColorStop(1, `rgba(100,150,255,${segAlpha * 0.2})`);
+        gradient.addColorStop(0, `hsla(${c.hue}, 100%, 90%, ${segAlpha})`);
+        gradient.addColorStop(0.5, `hsla(${c.hue - 20}, 100%, 70%, ${segAlpha * 0.7})`);
+        gradient.addColorStop(1, `hsla(${c.hue - 40}, 100%, 50%, ${segAlpha * 0.2})`);
         
         ctx.strokeStyle = gradient;
-        ctx.lineWidth = Math.max(1, 3 * (i/c.segments.length));
+        ctx.lineWidth = Math.max(1, seg2.size * (i/c.segments.length) * c.alpha);
         ctx.beginPath();
         ctx.moveTo(seg1.x, seg1.y);
         ctx.lineTo(seg2.x, seg2.y);
@@ -250,7 +377,7 @@
       }
     });
     
-    // Warp pulses with multiple rings
+    // Warp pulses with enhanced rings
     pulses.forEach(p => {
       ctx.beginPath();
       ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
@@ -258,13 +385,28 @@
         p.x, p.y, p.r - p.thickness/2,
         p.x, p.y, p.r + p.thickness/2
       );
-      gradient.addColorStop(0, `rgba(180,220,255,${p.alpha})`);
-      gradient.addColorStop(0.5, `rgba(100,180,255,${p.alpha * 0.8})`);
-      gradient.addColorStop(1, `rgba(50,100,255,0)`);
+      gradient.addColorStop(0, `hsla(${p.hue}, 100%, 90%, ${p.alpha})`);
+      gradient.addColorStop(0.3, `hsla(${p.hue - 10}, 100%, 70%, ${p.alpha * 0.8})`);
+      gradient.addColorStop(0.7, `hsla(${p.hue - 20}, 100%, 50%, ${p.alpha * 0.4})`);
+      gradient.addColorStop(1, `hsla(${p.hue - 30}, 100%, 30%, 0)`);
       
       ctx.strokeStyle = gradient;
       ctx.lineWidth = p.thickness;
       ctx.stroke();
+      
+      // Add inner glow
+      if (p.alpha > 0.3) {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r * 0.3, 0, Math.PI * 2);
+        const innerGradient = ctx.createRadialGradient(
+          p.x, p.y, 0,
+          p.x, p.y, p.r * 0.3
+        );
+        innerGradient.addColorStop(0, `hsla(${p.hue + 20}, 100%, 100%, ${p.alpha * 0.5})`);
+        innerGradient.addColorStop(1, `hsla(${p.hue}, 100%, 70%, 0)`);
+        ctx.fillStyle = innerGradient;
+        ctx.fill();
+      }
     });
   }
 
@@ -280,10 +422,19 @@
     resize();
     createStarSprites();
     initStars();
+    
     window.addEventListener("resize", () => {
       resize();
       initStars();
     });
+    
+    // Add some initial particles for visual interest
+    for (let i = 0; i < 100; i++) {
+      setTimeout(() => {
+        createParticles(rand(0, width), rand(0, height), 3, `hsl(${rand(180, 220)}, 100%, ${rand(60, 80)}%)`);
+      }, i * 100);
+    }
+    
     loop();
   }