let fdens = 75;

let i = 0;

let a = 0;

​

function setup() {

  createCanvas(900, 900);

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

  forces = [];

  dots = [];

  cols = ["#8ecae6","#57afd2","#219ebc","#1f6a92","#023047","#ffb703","#ff9d00","#fb8500","#ff6f00","#fb5f0a"];

  strokeWeight(7);

  stroke(0);

  background(255);

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

    for(j = 0; j < height / fdens; j++){

      forces[forces.length] = new Force(i * fdens + random(-fdens, fdens), j * fdens + random(-fdens, fdens), forces.length);

    }

  }

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

    for(j = 0; j < height / ddens; j++){

      // dots[dots.length] = new Dot(i * ddens + random(-ddens, ddens), j * ddens + random(-ddens, ddens), dots.length);

      dots[dots.length] = new Dot(i * ddens, j * ddens);

    }

  }

}

​

function draw() {

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

    forces[i].update();

  }

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

    // if(frameCount > 0 && frameCount < 5){

      dots[i].update();

    // }

  }

  // stroke(0);

  // fill(0);

  // circle(center.x, center.y, width / 4);

  // stroke(255);

  // fill(255, 240);

  // circle(center.x - width / 15, center.y - width / 15, width / 10);

  // stroke(0);

}

​

class Dot{

  constructor(x, y, index){

    this.pos = createVector(x, y);

    this.npos = createVector(x, y);

    this.vel = createVector(1, 0);

    this.vel.limit(1);

    this.dist = createVector(x, y);

    this.index = index;

    this.c = floor(random(cols.length));

    this.col = color(cols[this.c]);

  }

  update(){

    this.close = createVector(width, height);

    for(a = 0; a < forces.length; a++){

      this.dist = p5.Vector.sub(forces[a].pos, this.pos);

      if(this.dist.mag() < width){

        if(this.dist.mag() < this.close.mag()){

          this.close = createVector(this.dist.x, this.dist.y);

          stroke(forces[a].col)

        }

      }

    }

    this.vel.limit(1);

    this.vel.setHeading(this.close.heading() + HALF_PI);

    this.npos.add(this.vel);

    // if(frameCount > 0){

      // stroke(this.col);

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

      // line(this.pos.x, this.pos.y, this.npos.x, this.npos.y);

    // }

    // this.pos.add(this.vel);

    // if(this.pos.x < 0 || this.pos.x > width || this.pos.y < 0 || this.pos.y > height){

    //   this.pos = createVector(random(width), random(height));

    //   this.npos = createVector(this.pos.x, this.pos.y);

    //   this.vel.setMag(1);

    // }

  }

}

​

class Force{

  constructor(x, y, index){

    this.opos = createVector(x, y);

    this.pos = createVector(x, y);

    this.fa = 0;

    this.vel = createVector(1, 0);

    this.dist = p5.Vector.sub(this.pos, center);

    this.index = index;

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

    // fill(this.col);

    // stroke(this.col);

    // circle(this.pos.x, this.pos.y, 5);

  }

  update(){

    this.pos = createVector(this.opos.x + map(noise(this.opos.x / 200, frameCount / 1000 + this.index), 0, 1, -1, 1) * width, this.opos.y + map(noise(this.opos.y / 200, frameCount / 1000 + this.index), 0, 1, -1, 1) * height);

    // this.fa = map(noise(this.index, frameCount / 100), 0, 1, 0, 1);

    // if(frameCount % 1000 == true){

    //   this.pos = createVector(random(width), random(height));

    // }

    // fill(255, 125, 0);

    // circle(this.pos.x, this.pos.y, 5);

    // this.dist = p5.Vector.sub(this.pos, center);

    // this.vel.setHeading(this.dist.heading() + HALF_PI);

    // this.pos.add(this.vel);

  }

}