body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0, 0, 0, .9)
}

let particles = [];

const createParticle = () => {
  let x = 300;
  let y = 380;
  let vx = random(-1.5, 1.5);
  let vy = random(-5, -1);
  let ax = -0.1;
  let ay = 0.1;
  let alpha = 200;
  
  const drawGradient = () => {
    let radius = 8;
    for (let r = 0; r <= radius; r++) {
      fill(255, alpha - (alpha * r / 8));
      ellipse(x, y, r * 4);
    }
  }
  
  const show = () => {
    noStroke();
    drawGradient();
  };
  
  const update = () => {
    x += vx;
    y += vy;
    // vx -= ax;
    vy -= ay;
    alpha -= 5;
  };
  
  const isFinished = () => {
    return alpha < 0;
  };
  
  return {
    show,
    update,
    isFinished
  }
};

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  for (i = 0; i < 5; i++) {
    let p = createParticle();
    particles.push(p); 
  }
  
  particles.forEach((p, i) => {
    p.update();
    p.show();
    if(p.isFinished()) {
      particles.splice(i, 1);
    }
  });
  
}