const alive_objects = [];

​

function setup() {

  createCanvas(400, 400);

  noFill();

  frameRate(60);

  alive_objects.push(new MystifyLine(0,200,0,200, 0.001));

  alive_objects.push(new MystifyLine(200,400,0,200, 0.005));

  alive_objects.push(new MystifyLine(0,200,200,400, 0.02));

  alive_objects.push(new MystifyLine(200,400,200,400, 0.01));

}

​

​

class MystifyLine {

​

  constructor(xmin, xmax, ymin, ymax, DELTA=0.009){

    this.xmin = xmin;

    this.xmax = xmax;

    this.ymin = ymin;

    this.ymax = ymax;

    // t value is to determine where we are on the bezier line (between 0 and 1 )

    this.t = 0;

    this.DELTA = DELTA;

    this.maxLines = 100;

    this.lines = [];

    this.railx1 = Array.from({ length: 4 }, (_, k) => random(xmin,xmax));

    this.raily1 = Array.from({ length: 4 }, (_, k) => random(ymin,ymax));

    this.railx2 = Array.from({ length: 4 }, (_, k) => random(xmin,xmax));

    this.raily2 = Array.from({ length: 4 }, (_, k) => random(ymin,ymax));

  }

  draw(){

    for (var i =0 ; i < this.lines.length; i++){

    const [a,b,c,d] = this.lines[i];

    colorMode(HSL, 100, 100, 100);

    stroke(i,i+30,i/10+25,i);

    //strokeWeight(dist(a,b,c,d)/sizeModifier.value());

    strokeWeight(3);

    //bezier(a,b,tt1,tt2,tt3,tt4,c,d);

    line(a,b,c,d);

      //unimplemented yet

//     switch (shapeSelector.selected()){

//         case 'circle':

//         circle(a,b,c,d);

//         break;

//       case 'triangle':

//         triangle(a,b,c,d,a,d);

//         break;

//         case 'rect':

//         rect(a,b,c,d);

//         break;

//         case 'line':

//         default:

//         line(a,b,c,d);     

//     }

  }

  }

  nextSegments(){

    this.railx1 = [this.railx1[3], this.railx1[2], this.railx1[0], random(this.xmin,this.xmax)];

    this.raily1 = [this.raily1[3], this.raily1[2], this.raily1[0], random(this.ymin,this.ymax)];

    this.railx2 = [this.railx2[3], this.railx2[2], this.railx2[0], random(this.xmin,this.xmax)];

    this.raily2 = [this.raily2[3], this.raily2[2], this.raily2[0], random(this.ymin,this.ymax)];

​

  }

  update(){

    var [s1,s2,s3,s4] = this.railx1;

    var [s5,s6,s7,s8] =  this.raily1;

    var [s9,s10,s11,s12] = this.railx2;

    var [s13,s14,s15,s16] = this.raily2;

    var startx = bezierPoint(s1,s2,s3,s4,this.t);

    var starty = bezierPoint(s5,s6,s7,s8,this.t);

    var endx   = bezierPoint(s9,s10,s11,s12, this.t);

    var endy   = bezierPoint(s13,s14,s15,s16,this.t);

    line(startx,starty,endx,endy);

    strokeWeight(1);

    colorMode(RGB);

    stroke(0,0,0,20);

    bezier(s1,s5,s2,s6,s3,s7,s4,s8);

    bezier(s9,s13,s10,s14,s11,s15,s12,s16);

    this.lines.push([startx,starty,endx,endy]);

    if (this.lines.length > this.maxLines){

      this.lines.shift();

    }

    if (this.t > 0.9999){

      this.t=0;

      this.nextSegments();

    }

    this.t+= this.DELTA;

  }

}

​

function draw() {

  background(220);

  for (const o of alive_objects) {

    o.update();

    o.draw();

  }

}