Update stars.js

stars.js

@@ -1,32 +1,33 @@
-// Advanced, High-Performance Starfield – Script Only
+// High-Contrast, High-Density Starfield – Script Only
 
 (() => {
   const canvas = document.getElementById("starfield");
   const ctx = canvas.getContext("2d");
   let width, height;
-  let bgCanvas, bgCtx, nebulaCanvas, nebulaCtx;
+  let bgCanvas, bgCtx;
   let starSprites = [];
   let layers = [];
   let comets = [];
   let pulses = [];
 
-  // Three parallax star layers: count, base speed, draw size
+  // Four parallax star layers: count, base speed, draw size
   const layerConfigs = [
-    { count: 200, speed: 1.5, size: 2.0 },
-    { count: 150, speed: 3.0, size: 3.0 },
-    { count: 100, speed: 6.0, size: 4.5 },
+    { 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 },
   ];
 
   const rand = (min, max) => min + Math.random() * (max - min);
 
-  // Handle resize: update sizes, cache background & nebula
+  // Handle resize: update sizes, cache background
   function resize() {
     width = window.innerWidth;
     height = window.innerHeight;
     canvas.width = width;
     canvas.height = height;
 
-    // Cache a deep space gradient
+    // Cache a deep-space gradient background
     bgCanvas = document.createElement("canvas");
     bgCanvas.width = width;
     bgCanvas.height = height;
@@ -35,56 +36,31 @@
       width / 2, height / 2, 0,
       width / 2, height / 2, width
     );
-    bgGrad.addColorStop(0, "#101020");
+    bgGrad.addColorStop(0, "#111122");
     bgGrad.addColorStop(1, "#000000");
     bgCtx.fillStyle = bgGrad;
     bgCtx.fillRect(0, 0, width, height);
-
-    // Pre-render a static nebula field
-    nebulaCanvas = document.createElement("canvas");
-    nebulaCanvas.width = width;
-    nebulaCanvas.height = height;
-    nebulaCtx = nebulaCanvas.getContext("2d");
-
-    // Three colored cloud blobs
-    [
-      ["#550066", "#220022"],
-      ["#006655", "#002222"],
-      ["#665500", "#332200"],
-    ].forEach(([c1, c2]) => {
-      const x = rand(0, width);
-      const y = rand(0, height);
-      const r = rand(width * 0.3, width * 0.7);
-      const nebGrad = nebulaCtx.createRadialGradient(x, y, 0, x, y, r);
-      nebGrad.addColorStop(0, `${c1}33`);
-      nebGrad.addColorStop(1, `${c2}00`);
-      nebulaCtx.fillStyle = nebGrad;
-      nebulaCtx.beginPath();
-      nebulaCtx.arc(x, y, r, 0, Math.PI * 2);
-      nebulaCtx.fill();
-    });
   }
 
-  // Pre-render star sprites with glow
+  // Pre-render star sprites with strong glow
   function createStarSprites() {
-    starSprites = [];
-    layerConfigs.forEach(cfg => {
+    starSprites = layerConfigs.map(cfg => {
       const r = cfg.size;
-      const off = document.createElement("canvas");
       const sz = r * 6;
+      const off = document.createElement("canvas");
       off.width = off.height = sz;
       const octx = off.getContext("2d");
       octx.fillStyle = "#fff";
       octx.shadowColor = "#fff";
-      octx.shadowBlur = r * 2;
+      octx.shadowBlur = r * 3;
       octx.beginPath();
       octx.arc(sz / 2, sz / 2, r, 0, Math.PI * 2);
       octx.fill();
-      starSprites.push({ sprite: off });
+      return off;
     });
   }
 
-  // Initialize star layers
+  // Initialize each star layer
   function initStars() {
     layers = layerConfigs.map((cfg, idx) => {
       const stars = [];
@@ -93,7 +69,7 @@
           x: rand(-width / 2, width / 2),
           y: rand(-height / 2, height / 2),
           z: rand(1, width),
-          a: rand(0.2, 1),
+          twAngle: rand(0, Math.PI * 2),
           sprIndex: idx,
         });
       }
@@ -106,34 +82,34 @@
     if (Math.random() < 0.002) {
       comets.push({
         x: rand(0, width),
-        y: rand(0, height * 0.25),
+        y: rand(0, height * 0.2),
         len: 0,
-        maxLen: rand(60, 180),
+        maxLen: rand(80, 200),
         angle: Math.PI * 0.25 + rand(-0.3, 0.3),
         speed: rand(10, 16),
       });
     }
   }
 
-  // Add warp pulse on click
+  // Click for warp pulse
   canvas.addEventListener("click", e => {
-    pulses.push({ x: e.clientX, y: e.clientY, r: 0, alpha: 0.7 });
+    pulses.push({ x: e.clientX, y: e.clientY, r: 0, alpha: 0.6 });
   });
 
-  // Update positions, twinkle, comets, pulses
+  // Update star positions, twinkles, comets, pulses
   function update() {
     const now = Date.now();
     layers.forEach(layer => {
       layer.stars.forEach(s => {
-        s.z -= layer.speed;            // faster star movement
+        s.z -= layer.speed;               // faster movement
         if (s.z <= 0) {
           s.z = width;
           s.x = rand(-width / 2, width / 2);
           s.y = rand(-height / 2, height / 2);
-          s.a = rand(0.2, 1);
+          s.twAngle = rand(0, Math.PI * 2);
         }
-        // smooth sinusoidal twinkle
-        s.a = 0.5 + 0.5 * Math.sin(now / 500 + s.z / 50);
+        // sinusoidal twinkle based on depth + time
+        s.twAngle += 0.02;
       });
     });
 
@@ -146,8 +122,8 @@
 
     pulses = pulses.filter(p => p.alpha > 0);
     pulses.forEach(p => {
-      p.r += 20;
-      p.alpha -= 0.01;
+      p.r += 30;
+      p.alpha -= 0.012;
     });
 
     maybeComet();
@@ -155,46 +131,36 @@
 
   // Draw the full scene
   function draw() {
-    // 1) Clear and draw static background
+    // 1) Background
     ctx.clearRect(0, 0, width, height);
     ctx.drawImage(bgCanvas, 0, 0);
 
-    // 2) Rotate & overlay nebula for subtle motion
-    const t = Date.now() * 0.00003;
-    ctx.save();
-    ctx.translate(width / 2, height / 2);
-    ctx.rotate(t);
-    ctx.globalAlpha = 0.1;
-    ctx.globalCompositeOperation = "screen";
-    ctx.drawImage(nebulaCanvas, -width / 2, -height / 2);
-    ctx.restore();
-    ctx.globalCompositeOperation = "source-over";
-    ctx.globalAlpha = 1;
-
-    // 3) Motion trails
-    ctx.fillStyle = "rgba(0,0,0,0.2)";
+    // 2) Motion trails
+    ctx.fillStyle = "rgba(0,0,0,0.15)";
     ctx.fillRect(0, 0, width, height);
 
-    // 4) Draw parallax star layers
+    // 3) Stars
     layers.forEach((layer, li) => {
-      const sp = starSprites[li].sprite;
+      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;
-        ctx.globalAlpha = s.a;
-        ctx.drawImage(sp, x - ds, y - ds, ds * 2, ds * 2);
+        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);
+        ctx.globalAlpha = alpha;
+        ctx.drawImage(sprite, x - ds, y - ds, ds * 2, ds * 2);
       });
       ctx.globalCompositeOperation = "source-over";
     });
     ctx.globalAlpha = 1;
 
-    // 5) Draw comets
+    // 4) Comets
     comets.forEach(c => {
-      ctx.strokeStyle = "rgba(255,255,255,0.7)";
+      ctx.strokeStyle = "rgba(255,255,255,0.8)";
       ctx.lineWidth = 1.2;
       ctx.beginPath();
       ctx.moveTo(c.x, c.y);
@@ -205,7 +171,7 @@
       ctx.stroke();
     });
 
-    // 6) Draw warp pulses
+    // 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})`);
@@ -213,17 +179,16 @@
       ctx.fillStyle = grd;
       ctx.fillRect(0, 0, width, height);
     });
-    ctx.globalAlpha = 1;
   }
 
-  // Main loop
+  // Animation loop
   function loop() {
     update();
     draw();
     requestAnimationFrame(loop);
   }
 
-  // Initialization
+  // Initialize everything
   function init() {
     resize();
     createStarSprites();