// https://www.color-hex.com/color-palette/10221

let palette = ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96"];

let bg;

let windowScale;

function setup() {

  // createCanvas(3000, 3000);

  createCanvas(3840,2160);

  background(20);

  noiseDetail(8,0.75);

​

  windowScale = width / 1000;

  let idx = int(random(0,palette.length-1));

  bg = palette[idx];

  palette.splice(idx,1);

  grid = [];

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

    grid[r] = [];

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

      let n = noise(c*0.01, r*0.01);

      grid[r][c] = constrain(Math.floor(map(n, 0.0, 1.0, 0, palette.length - 1)), 0, palette.length - 1);

    }

  }

  particles = [];

  for (let _ = 0; _ < 250*windowScale; _++) {

    particles.push({

      x: int(random(0,width-1)),

      y: int(random(0,height*0.75)),

      a: int(random(20,120)),

      l: int(random(width*0.1, width*0.9)),

      sw: random(0.25, 1.0),

    })

  }

  noFill();

  // background(color(bg));

  setGradient(0,0,width,height,color(bg), color(random(palette)), Y_AXIS);

}

​

function draw() {

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

    let p = particles[i];

    let c = color(palette[grid[p.y][p.x]]);

    c.setAlpha(p.a);

    strokeWeight(p.sw*windowScale);

    stroke(c);

    point(p.x, p.y);

    p.l--;

    p.y++

    if (p.y > height-1 || p.l <= 0) particles.splice(i,1);

  }

  if (particles.length === 0) {

    console.log("done");

    noLoop();

  }

}

​

const Y_AXIS = 1;

const X_AXIS = 2;

​

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);

    }

  }

}