const canvas = document.getElementById("sky");
const ctx = canvas.getContext("2d");
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;

const starsCount = 120;
const maxDist = 80;
const highlightDist = 45;
const stars = [];
const mouse = { x: -1000, y: -1000 };

window.addEventListener('mousemove', e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});
window.addEventListener('mouseleave', () => {
  mouse.x = -1000; mouse.y = -1000;
});
window.addEventListener('resize', () => {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
});

for(let i=0; i<starsCount; i++) {
  stars.push({
    x: Math.random()*w|0,
    y: Math.random()*h|0,
    dx: (Math.random()-0.5)*1.1,
    dy: (Math.random()-0.5)*1.1,
    baseSpeed: 1.1,
    size: Math.random()<0.7 ? 2 : 3
  });
}

function dist(a, b) {
  const dx = a.x-b.x, dy = a.y-b.y;
  return Math.sqrt(dx*dx+dy*dy);
}

function animate() {
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, w, h);
  for(let s of stars){
    let dToMouse = dist(s, mouse);
    if(dToMouse < highlightDist){
      let angle = Math.atan2(mouse.y-s.y, mouse.x-s.x);
      s.x -= Math.cos(angle)*1.3|0;
      s.y -= Math.sin(angle)*1.3|0;
      s.dx = ((Math.random()-0.5)*2) * 1.5;
      s.dy = ((Math.random()-0.5)*2) * 1.5;
      s.pixelSize = 6;
    } else {
      s.x += s.dx;
      s.y += s.dy;
      s.dx += (Math.random()-0.5)*0.02;
      s.dy += (Math.random()-0.5)*0.02;
      s.dx = Math.max(-s.baseSpeed, Math.min(s.dx, s.baseSpeed));
      s.dy = Math.max(-s.baseSpeed, Math.min(s.dy, s.baseSpeed));
      s.pixelSize = s.size;
    }
    if(s.x < 0 || s.x > w) s.dx *= -1;
    if(s.y < 0 || s.y > h) s.dy *= -1;
  }

  for(let i=0; i<stars.length; i++){
    for(let j=i+1; j<stars.length; j++){
      if(dist(stars[i], stars[j]) < maxDist){
        ctx.fillStyle = "rgba(0,255,0,0.17)";
        drawPixelLine(stars[i].x|0, stars[i].y|0, stars[j].x|0, stars[j].y|0);
      }
    }
  }

  for(let s of stars){
    ctx.fillStyle = "#00ff00";
    ctx.fillRect(s.x|0, s.y|0, s.pixelSize, s.pixelSize);
  }
  requestAnimationFrame(animate);
}

function drawPixelLine(x0, y0, x1, y1) {
  let dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0);
  let sx = x0 < x1 ? 1 : -1, sy = y0 < y1 ? 1 : -1;
  let err = dx - dy;
  while (true) {
    ctx.fillRect(x0, y0, 2, 2);
    if (x0 === x1 && y0 === y1) break;
    let e2 = 2 * err;
    if (e2 > -dy) { err -= dy; x0 += sx; }
    if (e2 < dx) { err += dx; y0 += sy; }
  }
}

animate();