const X_AXIS = 2;

let bgrid, bgrid_h;

let particles;

function setup() {

  createCanvas(800, 800);

  background(20);

  pixelDensity(1);

  noiseDetail(8,0.75);

  setGradient(0,0,width,height,color(10),color(120),Y_AXIS);

  bgrid = [];

  bgrid_h = int(height*0.25)

  for (let y = 0; y < height; y++) {

    bgrid[y] = [];

    for (let x = 0; x < width; x++) {

      let n = noise(x*0.01,y*0.01);

      let a = map(n, 0.0, 1.0, -TWO_PI, TWO_PI);

      bgrid[y][x] = a;

    }

  }

  particles = [];

  for (let _ = 0; _ < 10000; _++) {

    let x = random(width-1);

    let y = random(height-bgrid_h, height-1);

    let life = random(10,100);

    particles.push({

      x:x, y:y, life:life, olife:life

    })

  }

}

​

function draw() {

  // background(220);

  noStroke();

  for (let i = particles.length-1; i >= 0; i--) {

    let p = particles[i];

    fill(color(220, 110, 0, 10));

    circle(p.x, p.y, map(p.life, p.olife, 0, 10, 1));

    let a = bgrid[int(p.y)][int(p.x)];

    p.x += cos(a);

    p.y += sin(a);

    p.life--;

    if (p.x < 0 || p.x > width-1 || p.y < (height-bgrid_h)-random(0,20) || p.y > height-1 || p.life <= 0)

      particles.splice(i,1);

  }

  if (particles.length == 0) {

    console.log("done");

    noLoop();

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

​

  if (axis === Y_AXIS) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}