createCanvas(900, 900);

  dots = [];

  time1 = 0;

  time2 = 5;

  dens = 10;

  rad = 50;

  a = 0;

  c = 0;

  md = sqrt(width * width + height * height);

  cols = ["#ffc857","#ee9550","#e9724c","#d74845","#c5283d","#a41c32","#471d33","#3e2e6d","#255f85","#269480"];

  atts = [];

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

  for(i = 0; i < 1; i++){

    atts[atts.length] = new Att(random(width), random(height), atts.length);

  }

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

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

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

    }

  }

  background(20);

  strokeWeight(1);

  // blendMode(ADD);

}

​

function draw() {

  // background(0);

  time1 = time1 +  0.002;

  time2 = time2 +  0.0021;

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

    atts[i].update();

  }

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

    if(dots[i] !== undefined){

      dots[i].update();     

    }

  }

}

​

class Dot{

  constructor(x, y, index){

    this.pos = createVector(x, y);

    this.start = createVector(x, y);

    this.pos2 = createVector(x, y);

    this.vel = createVector(0, 0);

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

    this.c = floor(this.dist.mag() / 50 % cols.length);

    this.ca = random(0, 1);

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

    this.test = 0;

    this.active = 0;

    // this.col.setAlpha(10)

    this.index = index;

  }

  update(){

    // this.vel.setHeading(map(noise(this.pos.x / 300, this.pos.y / 300), 0, 1, -TWO_PI, TWO_PI));

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

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

      this.test = this.dist.mag();

      this.dist.setMag(map(this.dist.mag(), 0, rad, 1, 0))

      if(this.test < rad){      

        this.vel.add(this.dist);

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

        this.active = 1;

      }

      if(this.vel.mag() > 5){

        this.vel.setMag(5);

      }

      if(this.vel.mag() > 0){

        this.vel.setMag(this.vel.mag() - 0.05)

      }

​

      this.pos.add(this.vel);

​

      //color

​

​

      // stroke(this.col);

      // if(this.c < cols.length - 1){

      //   this.col = lerpColor(color(cols[this.c]), color(cols[this.c + 1]), this.ca);

      //   if(this.ca < 1){

      //     this.ca = this.ca + 0.01;

      //   } else {

      //     this.ca = 0;

      //     this.c = this.c + 1;

      //   }

      // } else {

      //   this.col = lerpColor(color(cols[this.c]), color(cols[0]), this.ca);

      //   if(this.ca < 1){

      //     this.ca = this.ca + 0.01;

      //   } else {

      //     this.ca = 0;

      //     this.c = 0;

      //   } 

      // }

​

      // noStroke();

​

​

      noStroke();

      // this.col = color(cols[floor(this.vel.mag() * 2 % cols.length)]);

      // this.col.setAlpha(2);

      if(this.vel.mag() > 0.1){

        // this.col.setAlpha(2);

        stroke(this.col);

        line(this.pos.x, this.pos.y, this.pos2.x, this.pos2.y);

        if(this.test > rad){

          this.vel.setHeading(noise(this.pos.x / 200, this.pos.y / 200) * TWO_PI);

        }

        // this.col.setAlpha(2);

        // fill(this.col);

        // noStroke();

        // for(c = 0; c < this.vel.mag(); c++){

        //   circle(this.pos.x, this.pos.y, 1 + c * 2);

        // }

      }

​

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

​

      if(this.pos.x < 0 - 125 || this.pos.x > width + 125 || this.pos.y < 0 - 125 || this.pos.y > height + 125 && this.vel.mag < 0.1){

        dots[this.index] = new Dot(this.start.x, this.start.y, this.index);

      }

      // if(this.active == 1 && this.vel.mag() < 0.1){

      //   dots[this.index] = new Dot(this.start.x, this.start.y, this.index);

      // }

    }

  }

}

​

class Att{

  constructor(x, y, index){

    this.pos = createVector(x, y);

    this.index = index;

  }

  update(){

    this.pos = createVector(map(noise(time1), 0, 1, -25, width + 25), map(noise(time2), 0, 1, -25, height + 25));

    // stroke(255);

    // noFill();

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

  }

​

}