particle-rain.js

function setup() {
  frameRate(30)
}

const numParticles = 20
const numGradientParts = 20

let particles =
  [...(new Array(numParticles)).keys()]
    .map(i => {
      const x = i * (CANVAS_WIDTH / numParticles)
      return {
        frontColor: [255, 0, 0],
        backColor: [255, 255, 255],
        xF: x,
        yF: 200,
        xB: x,
        yB: 120,
        speed: randBw(3, 10)
      }
    })

function draw() {
  clear()
  noFill()

  particles = particles.map(({
    frontColor,
    backColor,
    xF,
    yF,
    xB,
    yB,
    speed
  }) => {
    // draw
    for (let i = 0; i < numGradientParts; i++) {
      const yDiff = (yF - yB) / numGradientParts
      const xDiff = (xF - xB) / numGradientParts
      stroke(
        map(i, 0, numGradientParts, backColor[0], frontColor[0], true),
        map(i, 0, numGradientParts, backColor[1], frontColor[1], true),
        map(i, 0, numGradientParts, backColor[2], frontColor[2], true)
      )
      const xBack = xB + xDiff * i
      const xFront = xB + xDiff * (i + 1)
      const yBack = yB + yDiff * i
      const yFront = yB + yDiff * (i + 1)
      beginShape()
      vertex(xBack, yBack)
      vertex(xFront, yFront)
      endShape()
    }

    let newYF = yF + speed
    let newSpeed = speed
    if (newYF - (yF - yB) > CANVAS_HEIGHT) {
      newYF = 0
      newSpeed = random(5, 10)
    }
    let newYB = newYF - (yF - yB)


    return {
      frontColor,
      backColor,
      xF,
      xB,
      yF: newYF,
      yB: newYB,
      speed: newSpeed
    }
  })
}