createCanvas(900, 1080);

  center = createVector(width / 2, height / 2);

  background("#faf0ca");

  strokeWeight(10);

  stroke(255);

  dens = 5;

  dots = [];

  cols = ["#d11100","#dd3700","#e85c00","#f48100","#ffa600","#e58800","#b04c00","#952d00"];

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

    dots[dots.length] = new Dot(i * dens, 0, i);

  }

}

​

function draw() {

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

    dots[i].update();

  }

}

​

class Dot{

  constructor(x, y, index){

    this.pos = createVector(x, y);

    this.vel = createVector(0, 1);

    this.val = 0;

    this.edge = 400;

    this.index = index;

    // this.col = color(cols[floor(random(cols.length))]);

    this.col = color(cols[this.index %cols.length]);

  }

  update(){

    stroke(this.col);

    point(this.pos.x, this.pos.y);

    this.pos.add(this.vel);

    if(this.pos.dist(center) < this.edge){

      this.val = map(this.pos.dist(center), 0, this.edge, sin(this.pos.x / 100 - this.pos.y / 50) * PI, 0)

    } else{

      this.val = 0;

    }

    this.vel.setHeading(HALF_PI + (map(noise(this.pos.x / 1000, this.pos.y / 1000), 0, 1, -1, 1) * this.val))    

  }

}