starfield.js

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;

const onResize = () => {
  canvas.width = windowWidth = window.innerWidth;
  canvas.height = windowHeight = window.innerHeight;
};

window.addEventListener('resize', onResize);
onResize();


let start = undefined;
let time = 0;
let isPlaying = true;

const tick = (timeStamp) => {
  if (start === undefined) {
    start = timeStamp;
  }

  if (time !== timeStamp) {
    update();
    draw();
  }

  time = timeStamp;

  if (isPlaying) {
    window.requestAnimationFrame(tick);
  }
}

const randomBetween = (min, max) => (Math.random() * (max - min) + min);

const padding = 200;

const particlesBackground = [];
const particlesForground = [];

const setup = () => {
  console.log('Setup');

  for (let i = 0; i < 1000; i++) {
    particlesBackground.push({
      x: randomBetween(0, windowWidth),
      y: randomBetween(0, windowHeight),
      v: randomBetween(1, 10),
      s: randomBetween(0.2, 2),
      o: randomBetween(0.25, 0.9),
    });
  }

  for (let i = 0; i < 500; i++) {
    particlesForground.push({
      x: randomBetween(padding, windowWidth - padding),
      y: randomBetween(padding, windowHeight - padding),
      v: randomBetween(1, 10),
      s: randomBetween(0.2, 2),
      o: randomBetween(0.25, 0.9),
    });
  }

  window.requestAnimationFrame(tick);
};


const draw = () => {

  ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = "black";
  ctx.fill()

  for (particle of particlesBackground) {
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.s, 0, 2 * Math.PI);
    ctx.fillStyle = `rgba(255,255,255,${particle.o})`;;
    ctx.fill();
  }

  ctx.beginPath();
  ctx.rect(
    padding,
    padding,
    windowWidth - (padding * 2),
    windowHeight - (padding * 2)
  );
  ctx.fillStyle = `rgba(0,0,0,1)`;
  ctx.fill();

  for (particle of particlesForground) {
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.s, 0, 2 * Math.PI);
    ctx.fillStyle = `rgba(255,255,255,${particle.o})`;;
    ctx.fill();
  }

  ctx.beginPath();
  ctx.moveTo(windowWidth / 2, windowHeight / 2 - 200);
  ctx.lineTo(windowWidth / 2 + 200, windowHeight / 2 + 200);
  ctx.lineTo(windowWidth / 2 - 200, windowHeight / 2 + 200);
  ctx.closePath();
  ctx.fillStyle = "black";
  ctx.fill();
};

const update = () => {
  for (particle of particlesBackground) {
    particle.x -= particle.v * 0.1;

    if (particle.x < 0) {
      particle.x = windowWidth;
      particle.y = randomBetween(0, windowHeight);
      particle.v = randomBetween(1, 10);
    }
  }

  for (particle of particlesForground) {
    particle.x += particle.v * 0.1;

    if (particle.x > windowWidth - padding) {
      particle.x = randomBetween(padding, padding);
      particle.y = randomBetween(padding, windowHeight - padding);
      particle.v = randomBetween(1, 10);
    }
  }
};


setup();