Update stars.js

stars.js

@@ -1,5 +1,3 @@
-// High-Contrast, High-Density Starfield – Script Only
-
 (() => {
   const canvas = document.getElementById("starfield");
   const ctx = canvas.getContext("2d");
@@ -10,7 +8,7 @@
   let comets = [];
   let pulses = [];
 
-  // Four parallax star layers: count, base speed, draw size
+  // 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 },
@@ -20,56 +18,95 @@
 
   const rand = (min, max) => min + Math.random() * (max - min);
 
-  // Handle resize: update sizes, cache background
+  // Handle resize
   function resize() {
     width = window.innerWidth;
     height = window.innerHeight;
     canvas.width = width;
     canvas.height = height;
 
-    // Cache a deep-space gradient background
+    // Create background with nebula effect
     bgCanvas = document.createElement("canvas");
     bgCanvas.width = width;
     bgCanvas.height = height;
     bgCtx = bgCanvas.getContext("2d");
+    
+    // Base gradient
     const bgGrad = bgCtx.createRadialGradient(
       width / 2, height / 2, 0,
-      width / 2, height / 2, width
+      width / 2, height / 2, width * 0.8
     );
     bgGrad.addColorStop(0, "#111122");
-    bgGrad.addColorStop(1, "#000000");
+    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";
+    for (let i = 0; i < nebulaCount; i++) {
+      const x = rand(0, width);
+      const y = rand(0, height);
+      const radius = rand(50, 300);
+      const hue = rand(220, 280);
+      const alpha = rand(0.01, 0.03);
+      
+      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)`);
+      
+      bgCtx.beginPath();
+      bgCtx.fillStyle = grd;
+      bgCtx.arc(x, y, radius, 0, Math.PI * 2);
+      bgCtx.fill();
+    }
+    bgCtx.globalCompositeOperation = "source-over";
   }
 
-  // Pre-render star sprites with strong glow
+  // Pre-render star sprites with glow
   function createStarSprites() {
     starSprites = layerConfigs.map(cfg => {
       const r = cfg.size;
-      const sz = r * 6;
+      const sz = Math.ceil(r * 6);
       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 * 3;
+      octx.shadowBlur = r * 4;
+      octx.beginPath();
+      octx.arc(sz/2, sz/2, r, 0, Math.PI * 2);
+      octx.fill();
+      
+      // Bright core
+      octx.shadowBlur = 0;
+      octx.globalCompositeOperation = "source-over";
+      octx.fillStyle = "#ffffff";
       octx.beginPath();
-      octx.arc(sz / 2, sz / 2, r, 0, Math.PI * 2);
+      octx.arc(sz/2, sz/2, r * 0.6, 0, Math.PI * 2);
       octx.fill();
+      
       return off;
     });
   }
 
-  // Initialize each star layer
+  // Initialize star layers with twinkle parameters
   function initStars() {
     layers = layerConfigs.map((cfg, idx) => {
       const stars = [];
       for (let i = 0; i < cfg.count; i++) {
         stars.push({
-          x: rand(-width / 2, width / 2),
-          y: rand(-height / 2, height / 2),
+          x: rand(-width/2, width/2),
+          y: rand(-height/2, height/2),
           z: rand(1, width),
-          twAngle: rand(0, Math.PI * 2),
+          twPhase: rand(0, Math.PI * 2),
+          twFreq: rand(0.01, 0.03),
+          twRange: rand(0.3, 0.7),
           sprIndex: idx,
         });
       }
@@ -77,108 +114,158 @@
     });
   }
 
-  // Spawn comets occasionally
+  // Spawn comets with natural motion
   function maybeComet() {
     if (Math.random() < 0.002) {
+      const angle = Math.PI * 0.25 + rand(-0.3, 0.3);
       comets.push({
-        x: rand(0, width),
-        y: rand(0, height * 0.2),
+        x: rand(-50, width + 50),
+        y: rand(-50, height * 0.3),
         len: 0,
         maxLen: rand(80, 200),
-        angle: Math.PI * 0.25 + rand(-0.3, 0.3),
+        angle: angle,
         speed: rand(10, 16),
+        segments: [],
+        alpha: 1.0
       });
     }
   }
 
-  // Click for warp pulse
+  // Click creates warp pulse with multiple rings
   canvas.addEventListener("click", e => {
-    pulses.push({ x: e.clientX, y: e.clientY, r: 0, alpha: 0.6 });
+    for (let i = 0; i < 3; 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
+      });
+    }
   });
 
-  // Update star positions, twinkles, comets, pulses
+  // Update positions and effects
   function update() {
     const now = Date.now();
+    
+    // Update stars
     layers.forEach(layer => {
       layer.stars.forEach(s => {
-        s.z -= layer.speed;               // faster movement
+        s.z -= layer.speed;
         if (s.z <= 0) {
           s.z = width;
-          s.x = rand(-width / 2, width / 2);
-          s.y = rand(-height / 2, height / 2);
-          s.twAngle = rand(0, Math.PI * 2);
+          s.x = rand(-width/2, width/2);
+          s.y = rand(-height/2, height/2);
         }
-        // sinusoidal twinkle based on depth + time
-        s.twAngle += 0.02;
+        // Update twinkle
+        s.twPhase += s.twFreq;
       });
     });
-
-    comets = comets.filter(c => c.len < c.maxLen);
+    
+    // Update comets
+    comets = comets.filter(c => c.alpha > 0.1);
     comets.forEach(c => {
       c.len += c.speed;
-      c.x += Math.cos(c.angle) * c.speed;
-      c.y += Math.sin(c.angle) * 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});
+      
+      // Fade old segments
+      c.segments.forEach(seg => seg.alpha -= 0.02);
+      
+      // Remove old segments
+      if (c.segments.length > 20) c.segments.shift();
+      
+      // Fade entire comet
+      c.alpha -= 0.003;
     });
-
-    pulses = pulses.filter(p => p.alpha > 0);
+    
+    // Update pulses
+    pulses = pulses.filter(p => p.r < p.maxR);
     pulses.forEach(p => {
-      p.r += 30;
-      p.alpha -= 0.012;
+      p.r += p.speed;
+      p.alpha -= 0.008;
     });
-
+    
     maybeComet();
   }
 
-  // Draw the full scene
+  // Draw the scene
   function draw() {
-    // 1) Background
+    // Background
     ctx.clearRect(0, 0, width, height);
     ctx.drawImage(bgCanvas, 0, 0);
-
-    // 2) Motion trails
-    ctx.fillStyle = "rgba(0,0,0,0.15)";
+    
+    // Motion trails
+    ctx.fillStyle = "rgba(0,0,10,0.1)";
     ctx.fillRect(0, 0, width, height);
-
-    // 3) Stars
+    
+    // Stars
     layers.forEach((layer, li) => {
       const sprite = starSprites[li];
       ctx.globalCompositeOperation = "lighter";
       layer.stars.forEach(s => {
-        const k = (width / 2) / s.z;
-        const x = s.x * k + width / 2;
-        const y = s.y * k + height / 2;
-        if (x < 0 || x > width || y < 0 || y > height) return;
-        const ds = (1 - s.z / width) * layer.size * 1.5;
-        // compute twinkle alpha
-        const alpha = 0.5 + 0.5 * Math.sin(s.twAngle + s.z / 30);
+        const k = (width/2) / s.z;
+        const x = s.x * k + width/2;
+        const y = s.y * k + height/2;
+        
+        if (x < -100 || x > width+100 || y < -100 || y > height+100) return;
+        
+        // Calculate twinkle
+        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;
+        
         ctx.globalAlpha = alpha;
         ctx.drawImage(sprite, x - ds, y - ds, ds * 2, ds * 2);
       });
-      ctx.globalCompositeOperation = "source-over";
     });
+    ctx.globalCompositeOperation = "source-over";
     ctx.globalAlpha = 1;
-
-    // 4) Comets
+    
+    // Comets with particle trails
     comets.forEach(c => {
-      ctx.strokeStyle = "rgba(255,255,255,0.8)";
-      ctx.lineWidth = 1.2;
+      ctx.lineCap = "round";
+      for (let i = 1; i < c.segments.length; i++) {
+        const seg1 = c.segments[i-1];
+        const seg2 = c.segments[i];
+        
+        const gradient = ctx.createLinearGradient(
+          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})`);
+        
+        ctx.strokeStyle = gradient;
+        ctx.lineWidth = Math.max(1, 3 * (i/c.segments.length));
+        ctx.beginPath();
+        ctx.moveTo(seg1.x, seg1.y);
+        ctx.lineTo(seg2.x, seg2.y);
+        ctx.stroke();
+      }
+    });
+    
+    // Warp pulses with multiple rings
+    pulses.forEach(p => {
       ctx.beginPath();
-      ctx.moveTo(c.x, c.y);
-      ctx.lineTo(
-        c.x - Math.cos(c.angle) * c.len,
-        c.y - Math.sin(c.angle) * c.len
+      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      const gradient = ctx.createRadialGradient(
+        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)`);
+      
+      ctx.strokeStyle = gradient;
+      ctx.lineWidth = p.thickness;
       ctx.stroke();
     });
-
-    // 5) Warp pulses
-    pulses.forEach(p => {
-      const grd = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r);
-      grd.addColorStop(0, `rgba(255,255,255,${p.alpha})`);
-      grd.addColorStop(1, "rgba(0,0,0,0)");
-      ctx.fillStyle = grd;
-      ctx.fillRect(0, 0, width, height);
-    });
   }
 
   // Animation loop
@@ -188,7 +275,7 @@
     requestAnimationFrame(loop);
   }
 
-  // Initialize everything
+  // Initialize
   function init() {
     resize();
     createStarSprites();
@@ -201,4 +288,4 @@
   }
 
   init();
-})();
+})();