​

function setup() {

  createCanvas(1080, 1080);

  dots = [];

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

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

  c1 = 0;

  c2 = 1;

  la = 0;

  col = undefined;

  dens = 20;

  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(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 + 0.005;

}

​

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.sp = p5.Vector.sub(this.pos, zcenter);

    this.nzoom = this.sp.mag() % 30;

    this.nf = 0;

    this.index = index;

  }

  update(){

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

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

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

    this.npos.add(this.vel);

    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() < 5){

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

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

    }

  }

}