createCanvas(400, 400);

  dens = 5;

  dots = [];

  time1 = 0;

  time2 = 2;

  time3 = 4;

  tup = 0.005;

  zoom = 100;

  for(x = 0; x < width / dens; x++){

    for(y = 0; y < height / dens; y++){

      dots[dots.length] = new Dot(x * dens, y * dens, dots.length);

    }

  }

  colorMode(HSB, 100);

}

​

function draw() {

  background(220);

  time1 = time1 + tup;

  time2 = time2 + tup;

  time3 = time3 + tup;

  for(i = 0; i < dots.length; i++){

    dots[i].update();

  }

}

​

class Dot{

  constructor(x, y, index){

    this.pos = createVector(x, y);

    this.index = index;

    this.h = 0;

    this.s = 0;

    this.b = 0;

  }

  update(){

    this.h = map(noise(this.pos.x / zoom + sin(this.pos.y / 50 + time1), this.pos.y / zoom, time1), 0, 1, 0, 400);

    this.s = map(noise(this.pos.x / zoom + sin(this.pos.y / 50 + time2), this.pos.y / zoom, time2), 0, 1, 50, 400);

    this.b = map(noise(this.pos.x / zoom + sin(this.pos.y / 50 + time3), this.pos.y / zoom, time3), 0, 1, 50, 400);

    this.col = color(this.h % 100, this.s % 50 + 50, this.b % 50 + 50);

    fill(this.col);

    noStroke();

    square(this.pos.x, this.pos.y, dens);

  }

}