Update stars.js

stars.js

@@ -1,96 +1,115 @@
-// Enhanced Starfield – Script Only
+// Optimized Starfield – Script Only
 
 (() => {
   const canvas = document.getElementById("starfield");
   const ctx = canvas.getContext("2d");
-  let dpr = window.devicePixelRatio || 1;
-  let width, height;
-  let speedFactor = 1;
-  let starLayers = [];
+  let width, height, bgCanvas, bgCtx;
+  let starSprites = [];
+  let layers = [];
   let comets = [];
-  let pulses = [];
+  let speedFactor = 1;
 
-  // Configuration for 3 parallax star layers
-  const layersConfig = [
-    { count: 600, speed: 0.4, size: 1.2 },
-    { count: 400, speed: 0.8, size: 2.0 },
-    { count: 200, speed: 1.6, size: 3.0 },
+  // Layer configuration: reduced counts & speeds tuned
+  const layerConfigs = [
+    { count: 300, speed: 0.5, size: 1.5 },
+    { count: 200, speed: 1.0, size: 2.5 },
+    { count: 100, speed: 2.0, size: 4.0 },
   ];
 
   // Utility
   const rand = (min, max) => min + Math.random() * (max - min);
 
-  // Resize & DPR handling
+  // Resize & background cache
   function resize() {
-    dpr = window.devicePixelRatio || 1;
     width = window.innerWidth;
     height = window.innerHeight;
-    canvas.width = width * dpr;
-    canvas.height = height * dpr;
-    ctx.scale(dpr, dpr);
+    canvas.width = width;
+    canvas.height = height;
+
+    // Cache radial background gradient once
+    bgCanvas = document.createElement("canvas");
+    bgCanvas.width = width;
+    bgCanvas.height = height;
+    bgCtx = bgCanvas.getContext("2d");
+    const grad = bgCtx.createRadialGradient(
+      width / 2, height / 2, 0,
+      width / 2, height / 2, width
+    );
+    grad.addColorStop(0, "rgba(30,30,40,0.3)");
+    grad.addColorStop(1, "black");
+    bgCtx.fillStyle = grad;
+    bgCtx.fillRect(0, 0, width, height);
+  }
+
+  // Pre-render star sprites of different radii
+  function createStarSprites() {
+    const radii = [1.2, 2.5, 4.0];
+    radii.forEach(r => {
+      const size = r * 4;
+      const off = document.createElement("canvas");
+      off.width = off.height = size;
+      const octx = off.getContext("2d");
+      octx.fillStyle = "#fff";
+      octx.shadowColor = "#fff";
+      octx.shadowBlur = r * 1.5;
+      octx.beginPath();
+      octx.arc(size / 2, size / 2, r, 0, Math.PI * 2);
+      octx.fill();
+      starSprites.push({ sprite: off, radius: r });
+    });
   }
 
   // Initialize star layers
   function initStars() {
-    starLayers = layersConfig.map(cfg => {
+    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),
           z: rand(1, width),
-          baseA: rand(0.3, 1),
-          hue: rand(200, 260),
+          a: rand(0.2, 1),
+          spriteIndex: idx,           // reuse pre-rendered radii
         });
       }
       return { ...cfg, stars };
     });
   }
 
-  // Spawn comets occasionally
+  // Occasionally spawn a simple comet
   function maybeComet() {
-    if (Math.random() < 0.004) {
+    if (Math.random() < 0.003) {
       comets.push({
         x: rand(0, width),
         y: rand(0, height * 0.2),
         len: 0,
-        maxLen: rand(120, 280),
+        maxLen: rand(80, 200),
         angle: Math.PI * 0.25 + rand(-0.2, 0.2),
-        speed: rand(6, 14),
+        speed: rand(8, 14),
       });
     }
   }
 
-  // On click, create a warp pulse
-  canvas.addEventListener("click", e => {
-    pulses.push({
-      x: e.clientX,
-      y: e.clientY,
-      r: 0,
-      maxR: Math.hypot(width, height),
-      alpha: 0.6
-    });
-  });
-
-  // Mouse-based speed control
+  // Mouse speed control
   window.addEventListener("mousemove", e => {
-    speedFactor = 0.5 + (e.clientX / width) * 2.5;
+    speedFactor = 0.5 + (e.clientX / width) * 2.0;
   });
 
-  // Update positions, twinkle, comets, pulses
+  // Update positions & twinkle
   function update() {
-    starLayers.forEach(layer => {
+    layers.forEach(layer => {
+      const move = layer.speed * speedFactor;
       layer.stars.forEach(s => {
-        s.z -= layer.speed * speedFactor;
+        s.z -= move;
         if (s.z <= 0) {
           s.z = width;
           s.x = rand(-width / 2, width / 2);
           s.y = rand(-height / 2, height / 2);
-          s.baseA = rand(0.3, 1);
-          s.hue = rand(200, 260);
+          s.a = rand(0.2, 1);
         }
-        // twinkle
-        s.a = s.baseA + Math.sin((Date.now() % 10000) / 10000 * Math.PI * 2) * 0.3;
+        // twinkle oscillation
+        s.a += Math.sin(Date.now() / 500 + s.z) * 0.002;
+        s.a = Math.max(0.2, Math.min(1, s.a));
       });
     });
 
@@ -101,61 +120,46 @@
       c.y += Math.sin(c.angle) * c.speed;
     });
 
-    pulses = pulses.filter(p => p.alpha > 0);
-    pulses.forEach(p => {
-      p.r += 30;
-      p.alpha -= 0.008;
-    });
-
     maybeComet();
   }
 
-  // Draw frame
+  // Draw everything
   function draw() {
-    // 1) motion trails
-    ctx.fillStyle = "rgba(0,0,0,0.3)";
-    ctx.fillRect(0, 0, width, height);
+    // 1) static background
+    ctx.drawImage(bgCanvas, 0, 0);
 
-    // 2) vignette
-    const vig = ctx.createRadialGradient(
-      width / 2, height / 2, width / 3,
-      width / 2, height / 2, width / 1.2
-    );
-    vig.addColorStop(0, "rgba(0,0,0,0)");
-    vig.addColorStop(1, "rgba(0,0,0,0.7)");
-    ctx.fillStyle = vig;
+    // 2) motion trails
+    ctx.fillStyle = "rgba(0,0,0,0.3)";
     ctx.fillRect(0, 0, width, height);
 
-    // 3) stars – additive glow
-    ctx.globalCompositeOperation = "lighter";
-    starLayers.forEach(layer => {
-      layer.stars.forEach(s => {
+    // 3) stars using cached sprites
+    layers.forEach((layer, li) => {
+      const { stars, size } = layer;
+      const { sprite, radius } = starSprites[li];
+      ctx.globalCompositeOperation = "lighter";
+      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 size = layer.size * (1 - s.z / width) * 2;
-        ctx.save();
-        ctx.translate(x, y);
-        ctx.fillStyle = `hsla(${s.hue}, 80%, 90%, ${s.a})`;
-        ctx.shadowColor = `hsla(${s.hue}, 100%, 80%, ${s.a})`;
-        ctx.shadowBlur = size * 2.5;
-        ctx.beginPath();
-        ctx.arc(0, 0, size, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.restore();
+        const drawSize = (1 - s.z / width) * size * 2;
+        ctx.globalAlpha = s.a;
+        ctx.drawImage(
+          sprite,
+          x - drawSize,
+          y - drawSize,
+          drawSize * 2,
+          drawSize * 2
+        );
       });
     });
     ctx.globalCompositeOperation = "source-over";
+    ctx.globalAlpha = 1;
 
-    // 4) comets with glow
+    // 4) simple comets (no blur)
     comets.forEach(c => {
-      ctx.save();
-      ctx.strokeStyle = "rgba(255,255,255,0.9)";
-      ctx.lineWidth = 2;
-      ctx.shadowColor = "white";
-      ctx.shadowBlur = 8;
+      ctx.strokeStyle = "rgba(255,255,255,0.8)";
+      ctx.lineWidth = 1.5;
       ctx.beginPath();
       ctx.moveTo(c.x, c.y);
       ctx.lineTo(
@@ -163,18 +167,6 @@
         c.y - Math.sin(c.angle) * c.len
       );
       ctx.stroke();
-      ctx.restore();
-    });
-
-    // 5) warp pulses
-    pulses.forEach(p => {
-      ctx.save();
-      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);
-      ctx.restore();
     });
   }
 
@@ -185,9 +177,10 @@
     requestAnimationFrame(loop);
   }
 
-  // Initialize
+  // Initialize all
   function init() {
     resize();
+    createStarSprites();
     initStars();
     window.addEventListener("resize", () => {
       resize();