createCanvas(1080, 1080);

  dots = [];

  time1 = 0;

  time2 = 0;

  time3 = 0;

  len = 50;

  scl = 2000;

  count = 50;

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

  r = 0;

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

    dots[i] = new Dot(width / 2, height / 2, i);

  }

  background(30);

  strokeWeight(10);

}

​

function draw() {

  time1 = time1 + 0.011 + map(sin(time3), -1, 1, 0, 0.01);

  time2 = time2 + 0.0017;

  time3 = time3 + 0.023

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

    dots[i].update();

  }

  this.c = 0;

}

​

class Dot{

  constructor(x, y, index){

    this.pos1 = createVector(x, y);

    this.pos2 = createVector(200, y);

    this.ca = random(0, 1);

    this.index = index;

    this.c = floor(this.index % cols.length);

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

    this.col1 = undefined;

    this.end = createVector(-200, 0);

  }

  update(){

    stroke(this.col);

    this.pos2 = createVector(sin(time1) * width / 2 + width / 2, sin(time2) * height / 2 + height / 2);

    if(frameCount > 0){

      this.end.setHeading(time1 + TWO_PI / count * this.index);

      line(this.pos1.x, this.pos1.y, this.pos1.x - this.end.x, this.pos1.y - this.end.y);

      // line(this.pos1.x, this.pos1.y, this.pos2.x, this.pos2.y);

      // if(sin(this.pos1.x / 20) * 0.5 + sin(this.pos1.x / 70) * 0.5 + sin(this.pos1.x / 80) * 0.5 + map(noise(this.pos1.x / scl, this.pos1.y / scl), 0, 1, -2, 2) < -0.3){

      //   strokeWeight(1)

      //   line(this.pos1.x, this.pos1.y, this.pos1.x - len, this.pos1.y + len)

      // }

      // if(sin(this.pos1.x / 20) * 0.5 + sin(this.pos1.x / 70) * 0.5 + sin(this.pos1.x / 80) * 0.5 + map(noise(this.pos1.x / 1000, this.pos1.y / 1000), 0, 1, -2, 2) < 0.3 && sin(this.pos1.x / 20) * 0.5 + sin(this.pos1.x / 70) * 0.5 + sin(this.pos1.x / 80) * 0.5 + map(noise(this.pos1.x / scl, this.pos1.y / scl), 0, 1, -2, 2) > -0.3){

      //   strokeWeight(1)

      //   line(this.pos1.x, this.pos1.y, this.pos1.x - len, this.pos1.y)

      // }

      // if(sin(this.pos1.x / 20) * 0.5 + sin(this.pos1.x / 70) * 0.5 + sin(this.pos1.x / 80) * 0.5 + map(noise(this.pos1.x / scl, this.pos1.y / scl), 0, 1, -2, 2) > 0.3){

      //   strokeWeight(1)

      //   line(this.pos1.x, this.pos1.y, this.pos1.x - len, this.pos1.y - len)

      // }

      // if(frameCount - 50 % this.index == true){

      //   strokeWeight(1)

      //   line(this.pos1.x, this.pos1.y, this.pos1.x - 500, this.pos1.y)

      // }

      // strokeWeight(1)

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

    }

    this.pos1 = this.pos2;

    //color

    stroke(this.col);

    this.c1 = this.c;

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

      if(frameCount % r * 10 == true){

        this.c1 = this.c;

        this.c = r;

      }

    }

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

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

      this.c = this.c1;

      if(this.ca < 1){

          this.ca = this.ca + 0.005;

        } else {

          this.ca = 0;

          this.c = this.c + 1;

        }

      } else {

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

        this.c = this.c1;

          if(this.ca < 1){

            this.ca = this.ca + 0.005;

          } else {

            this.ca = 0;

            this.c = 0;

          } 

        }

      }

    }