createCanvas(900, 1080);

  dots = [];

  time1 = 0;

  time2 = 0;

  time3 = 0;

  len = 50;

  scl = 200;

  cols = ["#8ecae6","#57afd2","#219ebc","#1f6a92","#023047","#ffb703","#ff9d00","#fb8500","#ff6f00","#fb5f0a"]

  for(i = 0; i < height * 2; i++){

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

  }

  background(30);

  strokeWeight(1);

}

​

function draw() {

  time1 = time1 + 0.011;

  time2 = time2 + 0.017;

  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(x, y);

    this.ca = random(0, 1);

    this.index = index;

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

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

  }

  update(){

    stroke(this.col);

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

    this.pos2 = createVector(this.pos1.x + 1, this.pos1.y + 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 / scl), 0, 1, -2, 2));

    if(frameCount > 0){

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

    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.005;

      } 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.005;

      } else {

        this.ca = 0;

        this.c = 0;

      } 

    }

  }

}