let fdens = 110;

let range = 30;

let release = 0;

let wforce = 0.5;

let i = 0;

let a = 0;

​

function setup() {

  createCanvas(900, 900);

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

  forces = [];

  dots = [];

  cols = ["#d9ed92", "#b5e48c", "#99d98c", "#76c893", "#52b69a", "#34a0a4", "#168aad", "#1a759f", "#1e6091", "#184e77", "#000000"];

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

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

  //   }

  // }

  // forces[forces.length] = new Force(center.x, center.y, forces.length);

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

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

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

    }

  }

  strokeWeight(1);

  stroke(0);

}

​

function draw() {

  background(220);

  if(frameCount < release){

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

      forces[i].update();

    }

  }

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

    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.fadd = 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(){

    // if(frameCount < release){

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

    //     if(forces[a].fa > 0.1){

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

    //       // this.fadd = forces[a].vel;

    //       if(this.dist.mag() < 200){

    //         // if(forces[a].fa > 0.5){

    //           this.dist.setMag(map(this.dist.mag(), 0, 200, 1, 0) * forces[a].fa * 1);

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

    //         // }

    //       }

    //     }

    //   }

    // }

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

      if(a !== this.index){

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

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

          strokeWeight(map(this.dist.mag(), 0, range, 2, 0.1))

          this.dist.setMag(map(this.dist.mag(), 0, range, 2, 0))

          this.vel.add(this.dist);

          line(this.pos.x, this.pos.y, dots[a].pos.x, dots[a].pos.y);

        }

        if(this.dist.mag() > range){

          this.dist.setMag(0.001);

          this.vel.sub(this.dist);

        }

      }

    }

    if(this.pos.x < range + 5){

      this.dist = createVector(wforce, 0);

      this.vel.add(this.dist);

    }

    if(this.pos.x > width - range - 5){

      this.dist = createVector(-wforce, 0);

      this.vel.add(this.dist);

    }

    if(this.pos.y < range + 5){

      this.dist = createVector(0, wforce);

      this.vel.add(this.dist);

    }

    if(this.pos.y > height - range - 5){

      this.dist = createVector(0, -wforce);

      this.vel.add(this.dist);

    }

    this.vel.limit(2);

    this.npos.add(this.vel);

    if(frameCount > 100){

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

      // 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 < -20 || this.pos.x > width + 20 || this.pos.y < -20 || this.pos.y > height + 20){

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

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

    // }

  }

}

​

// class Force{

//   constructor(x, y, index){

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

//     this.fa = 0;

//     this.vel = createVector(1, 0);

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

//     this.index = index;

//   }

//   update(){

//     if(frameCount < release){

//       this.fa = map(sin(this.dist.mag() / 100 + frameCount / 50), -1, 1, 0, 1);

//     } else {

//       this.fa = 0;

//     }

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

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

//     // }

//     // fill(0, 10);

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

//     if(this.index !== forces.length - 1){

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

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

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

//     }

//   }

// }