const Y_AXIS = 1;

const X_AXIS = 2;

​

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

  // let gfx = createGraphics(w, h);

​

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

    }

  }

  // image(gfx, x, y, w, h);

}

​

function drawShadow(b) {

  drawingContext.shadowOffsetX = 1;

  drawingContext.shadowOffsetY = 1;

  drawingContext.shadowBlur = b;

  drawingContext.shadowColor = color(random(colors)); //"black";

}

​

class Point {

  constructor(x,y,vx,vy,color,cutoff) {

    this.position = createVector(x,y);

    this.oposition = createVector(x,y);

    this.velo = createVector(vx,vy);

    this.ovelo = createVector(vx,vy);

    this.color = color;

    this.cutoff = cutoff;

  }

  update() {

    this.position.x += this.velo.x;

    this.position.y += this.velo.y;

    if (this.position.y <= this.cutoff) {

      this.velo.y = 0;

      this.position.y = this.cutoff;

    }

    if (this.position.x < this.oposition.x-2) {

      this.position = createVector(this.oposition.x, this.oposition.y);

      this.velo = createVector(this.ovelo.x, this.ovelo.y);

      // return false;

    }

    if (this.position.y > height-50) {

      this.velo.y = 0;

      this.position.y = height-50;

    }

    if (this.position.x > width) {

      this.velo.y = this.velo.x;

      this.velo.x = -this.velo.x;      

    }

    return true;

  }

  draw() {

    fill(this.color);

    noStroke();

    push();

    // if (this.velo.y == 0)

      drawShadow(2);

    circle(this.position.x,this.position.y,5);

    pop();

  }

}

let colors, points;

function setup() {

    // https://www.colourlovers.com/palette/3453888/Glitch

  colors = [

    color("#50D9EA"),

    color("#CAEA4A"),

    color("#E1D77F"),

    color("#F39C9A"),

    color("#EF368D"),

  ];

  createCanvas(800, 800);

  points = [];

  for (let i = 0; i < 500; i++) {

    let s = random([3,4,5,6,7]);

    points.push(new Point(random(-500,0), random(height/2,height+20), s, -s, random(colors), 50));

  }

}

​

function draw() {

  background(0);

  setGradient(0,0,width, 54, colors[3], color(0), Y_AXIS);

  setGradient(0,height-54,width,54,color(0),colors[1],Y_AXIS);

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

    let r = points[i].update();

    if (r) points[i].draw();

    else points.splice(i,1);

  }

  if (points.length == 0) {

    console.log("done");

    noLoop();

  }

  if (points.length < 1000) {

    let s = random([3,4,5,6,7]);

    points.push(new Point(random(-500,0), random(height/2,height+20), s, -s, random(colors), 50));

  }

}