const ptsNb = 600;

​

function setup() {

  ellipseMode(CENTER);

  colorMode(HSB);

  createCanvas(300, 300);

​

  // the gradient, rigth

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

    stroke(map(i, 0, height, 00, 360), 200, 200);

    line(0, i, height, i);

  }

  noStroke();

​

  // init points

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

    drippingPoints.push(new DrippingPoint());

  }

  /*createLoop({duration: 40,

              startLoop:0,

              gif:true, 

              download: true,

              fileName: 'colors-gradient-gone-wrong.gif',

              open: true});//*/

}

function draw() {

  // gradients going down, wrooong

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

    drippingPoints[i].drift();

    drippingPoints[i].display();

  }

}

function mousePressed() {

  setup();

}

​

class DrippingPoint {

  constructor() {

    this.x = random(width);

    this.y = random(height);

    this.size = random(20);

    this.shift = random(0.001, 0.1);

    this.color = map(this.y, 0, height, 0, 360);

    this.alpha = 0.01

  }

​

  drift() {

    this.y += this.shift;

    this.x += random(-1, 1);

    //this.alpha -= 0.002;

   // this.shift -= 0.001 ;

  }

​

  display() {

    fill(this.color, 255, 255, this.alpha);

    ellipse(

      (this.x + width) % width,

      (this.y + height) % height,

      this.size,

      this.size

    );

  }

}

​