createCanvas(1920, 1080);

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

  mover = new Mover(width / 2, height / 2);

  background(255);

  noFill();

  strokeWeight(0.1)

}

​

function draw() {

  mover.update();

}

​

class Mover{

  constructor(x, y){

    this.p1 = createVector(x, y);

    this.sp = createVector(200, 0);

    this.p2 = p5.Vector.add(this.p1, this.sp);

    this.p3 = createVector(random(width), random(height));

    this.p4 = createVector(random(width), random(height));

    this.a1 = random(PI);

    this.a2 = random(PI);

    this.a3 = random(PI);

    this.a4 = random(PI);

    this.c = floor(map(this.sp.heading(), -PI, PI, 0, 10));

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

  }

  update(){

//     this.sp.setHeading(this.sp.heading() + this.a1);

//     this.p2 = p5.Vector.add(this.p1, this.sp);

//     line(this.p1.x, this.p1.y, this.p2.x, this.p2.y);

//     this.sp.setHeading(this.sp.heading() + this.a2);

//     this.p1 = p5.Vector.add(this.p2, this.sp);

//     line(this.p1.x, this.p1.y, this.p2.x, this.p2.y);

//     this.sp.setHeading(this.sp.heading() + this.a3);

//     this.p2 = p5.Vector.add(this.p1, this.sp);

//     line(this.p1.x, this.p1.y, this.p2.x, this.p2.y);

//     this.sp.setHeading(this.sp.heading() + this.a4);

//     this.p1 = p5.Vector.add(this.p2, this.sp);

//     line(this.p1.x, this.p1.y, this.p2.x, this.p2.y);

    this.sp.setHeading(this.sp.heading() + this.a1);

    this.p2 = p5.Vector.add(this.p1, this.sp);

    this.p3 = p5.Vector.mult(this.p1, this.sp);

    this.p4 = p5.Vector.mult(this.p2, this.sp);

    this.c = floor(map(this.sp.heading(), -PI, PI, 0, cols.length));

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

    stroke(this.col);

    bezier(this.p1.x, this.p1.y, this.p3.x, this.p3.y, this.p4.x, this.p4.y, this.p2.x, this.p2.y);

    this.sp.setHeading(this.sp.heading() + this.a2);

    this.p1 = p5.Vector.add(this.p2, this.sp);

    this.p3 = p5.Vector.mult(this.p1, this.sp);

    this.p4 = p5.Vector.mult(this.p2, this.sp);

    this.c = floor(map(this.sp.heading(), -PI, PI, 0, cols.length));

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

    stroke(this.col);

    bezier(this.p1.x, this.p1.y, this.p3.x, this.p3.y, this.p4.x, this.p4.y, this.p2.x, this.p2.y);

    this.sp.setHeading(this.sp.heading() + this.a3);

    this.p2 = p5.Vector.add(this.p1, this.sp);

    this.p3 = p5.Vector.mult(this.p1, this.sp);

    this.p4 = p5.Vector.mult(this.p2, this.sp);

    this.c = floor(map(this.sp.heading(), -PI, PI, 0, cols.length));

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

    stroke(this.col);

    bezier(this.p1.x, this.p1.y, this.p3.x, this.p3.y, this.p4.x, this.p4.y, this.p2.x, this.p2.y);

    this.sp.setHeading(this.sp.heading() + this.a4);

    this.p1 = p5.Vector.add(this.p2, this.sp);

    this.p3 = p5.Vector.mult(this.p1, this.sp);

    this.p4 = p5.Vector.mult(this.p2, this.sp);

    this.c = floor(map(this.sp.heading(), -PI, PI, 0, cols.length));

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

    stroke(this.col);

    bezier(this.p1.x, this.p1.y, this.p3.x, this.p3.y, this.p4.x, this.p4.y, this.p2.x, this.p2.y);

//     this.sp.setHeading(this.sp.heading() + this.a1);

//     this.p2 = p5.Vector.add(this.p1, this.sp);

//     curve(this.p3.x, this.p3.y, this.p1.x, this.p1.y, this.p2.x, this.p2.y, this.p4.x, this.p4.y);

//     this.sp.setHeading(this.sp.heading() + this.a2);

//     this.p1 = p5.Vector.add(this.p2, this.sp);

//     curve(this.p3.x, this.p3.y, this.p1.x, this.p1.y, this.p2.x, this.p2.y, this.p4.x, this.p4.y);

//     this.sp.setHeading(this.sp.heading() + this.a3);

//     this.p2 = p5.Vector.add(this.p1, this.sp);

//     curve(this.p3.x, this.p3.y, this.p1.x, this.p1.y, this.p2.x, this.p2.y, this.p4.x, this.p4.y);

//     this.sp.setHeading(this.sp.heading() + this.a4);

//     this.p1 = p5.Vector.add(this.p2, this.sp);

//     curve(this.p3.x, this.p3.y, this.p1.x, this.p1.y, this.p2.x, this.p2.y, this.p4.x, this.p4.y);

//     this.sp.setHeading(this.sp.heading() + this.a1);

//     this.p1 = p5.Vector.add(this.p2, this.sp);

//     line(this.p1.x, this.p1.y, this.p2.x, this.p2.y);

//     this.sp.setHeading(this.sp.heading() + this.a2);

//     this.p2 = p5.Vector.add(this.p1, this.sp);

//     line(this.p1.x, this.p1.y, this.p2.x, this.p2.y);

//     this.sp.setHeading(this.sp.heading() + this.a3);

//     this.p1 = p5.Vector.add(this.p2, this.sp);

//     line(this.p1.x, this.p1.y, this.p2.x, this.p2.y);

  }

}