let fdens = 110;

let range = 200;

let rmax = 200;

let wrange = 25;

let release = 0;

let wforce = 0.5;

let attract = 0;

let ma = 0.002;

let i = 0;

let a = 0;

let stab = 0.017;

let mstab = 0.017;

​

function setup() {

  createCanvas(900, 900);

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

  forces = [];

  dots = [];

  cols = ["#041E29","#157C91","#2ceef2","#00FFAB","#5AFF50","#ffb01f","#fd8f21","#fc6722","#ea4334","#2C0713"];

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

  background(0);

}

​

function draw() {

  stab = sin(frameCount / 333) * mstab + mstab + mstab / 2;

  range = sin(frameCount / 1500) * rmax + rmax + 50;

  attract = sin(frameCount / 1000) * ma + ma;

  // 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.close = undefined;

    this.cindex = 0;

    this.index = index;

    this.c = this.index % 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.close == undefined){

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

          this.cindex = a;

        }

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

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

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

            this.cindex = a;

          }

          // stroke(this.col);

          strokeWeight(map(this.dist.mag(), 0, range, 0.51, 0));

          this.dist.setMag(map(this.dist.mag(), 0, range, 0.35, 0) * (sin(frameCount / 700) + 1 + this.c / 10) + 0.01);

          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(attract);

          this.vel.sub(this.dist);

        }

      }

    }

    stroke(this.col);

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

    this.close = undefined;

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

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

    this.dist.setMag(map(this.dist.mag(), 0, width + height, 0.01, 0) * sin(frameCount / 205));

    this.vel.add(this.dist);

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

    this.dist.setMag(-0.01);

    this.vel.add(this.dist);

    // if(this.pos.x < wrange + 5){

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

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

    // }

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

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

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

    // }

    // if(this.pos.y < wrange + 5){

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

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

    // }

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

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

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

    // }

    this.vel.limit(50);

    this.vel.setMag(this.vel.mag() - stab);

    this.npos.add(this.vel);

    // if(frameCount > 100){

      // strokeWeight(0.1);

      // 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 < 0){

      this.pos.x = 0;

    }

    if(this.pos.x > width){

      this.pos.x = width

    }

    if(this.pos.y < 0){

      this.pos.y = 0;

    }

    if(this.pos.y > height){

      this.pos.y = height;

    }

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

//     }

//   }

// }