solar-system.js

const width = window.innerWidth;
const height = window.innerHeight;

const maxPoints = Math.floor((parseInt(width, 10) + parseInt(height, 10)) / 4);

document.getElementById("app").innerHTML = `
<canvas id="myCanvas" width="${width}px" height="${height}px" />
`;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var my_gradient = ctx.createLinearGradient(0, 0, 0, height);
my_gradient.addColorStop(0, "#00002f");
my_gradient.addColorStop(0, "#00003e");

const random = () => Math.floor(Math.random() * width) + 1;

const randBetween = (a, b) => Math.floor(Math.random() * b) + a;

let coords = new Array(maxPoints)
  .fill(null)
  .map(() => [random(), random(), randBetween(1, 2)]);

let clientX = 0;
let clientY = 0;

const makeLine = (ctx, x, y, centerX, centerY, distancePx) => {
  if (
    x > centerX - distancePx &&
    x < centerX + distancePx &&
    y > centerY - distancePx &&
    y < centerY + distancePx
  ) {
    ctx.strokeStyle = "#4666FF";
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(x, y);
    ctx.stroke();
  }
};

const dotColors = ["#FFFFFF", "#CCCCCCC", "#FFCCCB", "#E6F3F8"];

const makeDot = (ctx, centerX, centerY, size) => {
  ctx.beginPath();
  ctx.fillStyle = dotColors[Math.floor(randBetween(0, dotColors.length))];
  ctx.arc(centerX, centerY, size, 0, 2 * Math.PI);
  ctx.fill();
  makeLine(ctx, clientX, clientY, centerX, centerY, 130);
};

const makeDots = () => {
  ctx.clearRect(0, 0, c.width, c.height);

  ctx.fillStyle = my_gradient;
  ctx.fillRect(0, 0, width, height);

  coords.forEach(([centerX, centerY, size]) => {
    makeDot(ctx, centerX, centerY, size);
  });

  coords = coords
    .map(([x, y, size]) => {
      return [x + 0.5, y - 0.5, size];
    })
    .filter(([x, y]) => x < width && y > 0);

  if (coords.length < maxPoints) {
    coords.push([0, random() * 2, randBetween(1, 2)]);
  }

  requestAnimationFrame(makeDots);
};

requestAnimationFrame(makeDots);

window.addEventListener("mousemove", (e) => {
  clientX = e.clientX;
  clientY = e.clientY;
});