Update stars.js

stars.js

@@ -2,66 +2,143 @@ const canvas = document.getElementById("starfield");
 const ctx = canvas.getContext("2d");
 
 let stars = [];
+let comets = [];
+let speedFactor = 1;
 
+// Resize canvas to full window
 function resizeCanvas() {
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
 }
 
-function createStars(count) {
+window.addEventListener("resize", () => {
+  resizeCanvas();
+  initStars(800);
+});
+
+// Initialize starfield
+function initStars(count) {
   stars = [];
   for (let i = 0; i < count; i++) {
     stars.push({
       x: Math.random() * canvas.width - canvas.width / 2,
       y: Math.random() * canvas.height - canvas.height / 2,
       z: Math.random() * canvas.width,
+      alpha: Math.random(),
+      color: randomStarColor(),
     });
   }
 }
 
-function moveStars() {
-  const speed = 4; // speed
-  for (let i = 0; i < stars.length; i++) {
-    stars[i].z -= speed;
-    if (stars[i].z <= 0) {
-      stars[i].z = canvas.width;
-      stars[i].x = Math.random() * canvas.width - canvas.width / 2;
-      stars[i].y = Math.random() * canvas.height - canvas.height / 2;
-    }
+// Pick a random star color
+function randomStarColor() {
+  const palette = ["#ffffff", "#fff9c4", "#a0d8f1"];
+  return palette[Math.floor(Math.random() * palette.length)];
+}
+
+// Occasionally spawn a shooting star/comet
+function maybeAddComet() {
+  if (Math.random() < 0.005) {
+    comets.push({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height * 0.3,
+      len: 0,
+      maxLen: 100 + Math.random() * 200,
+      angle: Math.PI * 0.25 + (Math.random() - 0.5) * 0.2,
+      speed: 10 + Math.random() * 10,
+    });
   }
 }
 
-function drawStars() {
-  ctx.fillStyle = "black";
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
+// Update star positions, twinkling, and comets
+function update() {
+  const baseSpeed = 4 * speedFactor;
 
-  ctx.fillStyle = "white";
-  for (let i = 0; i < stars.length; i++) {
-    const k = 128.0 / stars[i].z;
-    const x = stars[i].x * k + canvas.width / 2;
-    const y = stars[i].y * k + canvas.height / 2;
-
-    if (x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height) {
-      const size = (1 - stars[i].z / canvas.width) * 2;
-      ctx.beginPath();
-      ctx.arc(x, y, size, 0, Math.PI * 2);
-      ctx.fill();
+  stars.forEach(s => {
+    s.z -= baseSpeed;
+    if (s.z <= 0) {
+      s.z = canvas.width;
+      s.x = Math.random() * canvas.width - canvas.width / 2;
+      s.y = Math.random() * canvas.height - canvas.height / 2;
+      s.alpha = Math.random();
+      s.color = randomStarColor();
     }
-  }
+    // twinkle effect
+    s.alpha += (Math.random() - 0.5) * 0.03;
+    s.alpha = Math.max(0.2, Math.min(1, s.alpha));
+  });
+
+  comets = comets.filter(c => c.len < c.maxLen);
+  comets.forEach(c => {
+    c.len += c.speed;
+    c.x += Math.cos(c.angle) * c.speed;
+    c.y += Math.sin(c.angle) * c.speed;
+  });
+
+  maybeAddComet();
 }
 
+// Draw stars, trails, and comets
+function draw() {
+  // motion trails
+  ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  // subtle gradient glow
+  const grad = ctx.createRadialGradient(
+    canvas.width / 2, canvas.height / 2, 0,
+    canvas.width / 2, canvas.height / 2, canvas.width
+  );
+  grad.addColorStop(0, "rgba(30,30,40,0.3)");
+  grad.addColorStop(1, "black");
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  // draw stars
+  stars.forEach(s => {
+    const k = 128 / s.z;
+    const x = s.x * k + canvas.width / 2;
+    const y = s.y * k + canvas.height / 2;
+    if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) return;
+
+    const size = (1 - s.z / canvas.width) * 3;
+    ctx.globalAlpha = s.alpha;
+    ctx.fillStyle = s.color;
+    ctx.beginPath();
+    ctx.arc(x, y, size, 0, Math.PI * 2);
+    ctx.fill();
+  });
+
+  ctx.globalAlpha = 1;
+
+  // draw comets
+  comets.forEach(c => {
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
+    ctx.lineWidth = 2;
+    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.stroke();
+  });
+}
+
+// Main loop
 function animate() {
-  moveStars();
-  drawStars();
+  update();
+  draw();
   requestAnimationFrame(animate);
 }
 
-window.addEventListener("resize", () => {
-  resizeCanvas();
-  createStars(1000); // Double the star count
+// Speed boost based on mouse X position
+window.addEventListener("mousemove", e => {
+  const pct = e.clientX / canvas.width;
+  speedFactor = 0.5 + pct * 2; // 0.5x to 2.5x speed
 });
 
-
+// Initialize and start animation
 resizeCanvas();
-createStars(1000);
+initStars(800);
 animate();