​

function setup() {

  createCanvas(1080, 1080);

  dots = [];

  cols = ["#001219","#005f73","#0a9396","#94d2bd","#e9d8a6","#ee9b00","#ca6702","#bb3e03","#ae2012","#9b2226"];

  zcenter = createVector(width / 8 * 3, height / 7 * 2);

  c1 = 0;

  c2 = 1;

  la = 0;

  col = undefined;

  dens = 20;

  centers =[];

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

    centers[i] = createVector(width / 8 * floor(random(2, 7)), height / 8 * floor(random(2, 7)));

  }

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

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

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

    }

  }

  background(0);

  strokeWeight(0.1)

}

​

function draw() {

  // col = lerpColor(cols[c1],cols[c2],la)

  // la = la + 0.001;

  // if(la >= 1){

  //   la = 0;

  //   if(c2 < cols.length - 1){

  //     c1 = c2;

  //     c2++;

  //   }else{

  //     c1 = c2;

  //     c2 = 0;

  //   }

  // }

  // stroke(col); 

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

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

      dots[i].update();

    }    

  }

  nzoom = nzoom + frameCount * 0.00001;

}

​

class Dot {

  constructor(x, y, index){

    this.pos = createVector(x, y);

    this.opos = createVector(x, y);

    this.npos = createVector(x, y);

    this.vel = createVector(1, 0);

    this.nf = 0;

    this.index = index;

    this.group = this.index % cols.length;

    this.zcenter = centers[this.group];

    this.sp = p5.Vector.sub(this.pos, this.zcenter);

    this.c1 = this.index % cols.length;

    if(this.c1 < cols.length - 1){

      this.c2 = c1 + 1;

    } else {

      this.c2 = 0;

    }

    this.la = 0;

    this.col = lerpColor(cols[this.c1],cols[this.c2],this.la);

    this.la = this.la + 0.01;

    if(this.la >= 1){

      this.la = 0;

      if(this.c2 < cols.length - 1){

        this.c1 = c2;

        this.c2++;

      }else{

        this.c1 = this.c2;

        this.c2 = 0;

      }

    }

  }

  update(){

    if(this.la >= 1){

      this.la = 0;

      if(this.c2 < cols.length - 1){

        this.c1 = c2;

        this.c2++;

      }else{

        this.c1 = this.c2;

        this.c2 = 0;

      }

    }

    this.col = lerpColor(cols[this.c1],cols[this.c2],this.la);

    this.sp = p5.Vector.sub(this.pos, this.zcenter);

    this.nf = noise((this.pos.x - this.zcenter.x) / nzoom, (this.pos.y - this.zcenter.y) / nzoom) + 1;

    this.vel.setHeading(this.sp.heading() + HALF_PI + this.nf * TWO_PI);

    this.npos.add(this.vel);

    stroke(this.col);

    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.sp.mag() < 2){

      this.pos = createVector(this.opos.x + random(-dens, dens), this.opos.y + random(-dens, dens));

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

    }

  }

}