//https://gorillasun.de/blog/Simulating-brush-strokes-with-Hooke's-Law-in-P5JS-and-Processing

class AnimatedLine {

  constructor(x1, y1, x2, y2, segmentLength, spaceLength) {

    this.x1 = x1;

    this.y1 = y1;

    this.x2 = x2;

    this.y2 = y2;

    this.segmentLength = segmentLength;

    this.spaceLength = spaceLength;

​

    // Calculate length

    this.L = sqrt(

      pow((this.x1 - this.x2), 2) +

      pow((this.y1 - this.y2), 2));

    console.log(this.L)

​

    // calculate angle

    this.S = atan2(this.y2 - this.y1, this.x2 - this.x1)

​

    // calculate number of segments

    this.numS = this.L / (this.segmentLength + this.spaceLength)

​

    this.beginningLength = 0;

  }

​

  move(rate) {

    this.beginningLength += rate

    if (this.beginningLength >= this.segmentLength + this.spaceLength) {

      this.beginningLength = 0;

    }

  }

​

​

  display() {

    if (this.beginningLength > this.spaceLength) {

      stroke(255, 0, 255)

      line(this.x1, 

           this.y1, 

           this.x1 + (this.beginningLength - this.spaceLength) * cos(this.S), 

           this.y1 + (this.beginningLength - this.spaceLength) * sin(this.S)

          )      

    }

    for (let i = 0; i < this.numS; i++) {

      stroke(0)

      var distCheck = sqrt(

        pow(

          (this.segmentLength + this.spaceLength) * (i + 1) 

          * cos(this.S) - this.spaceLength * cos(this.S) 

          + this.beginningLength * cos(this.S), 2) 

        + pow((this.segmentLength + this.spaceLength) * (i + 1) 

          * sin(this.S) - this.spaceLength * sin(this.S) 

              + this.beginningLength * sin(this.S), 2))

​

      if (distCheck <= this.L) {

        line(

          this.x1 + (this.segmentLength + this.spaceLength) * i 

              * cos(this.S) + this.beginningLength * cos(this.S),

          this.y1 + (this.segmentLength + this.spaceLength) * i 

              * sin(this.S) + this.beginningLength * sin(this.S),

          this.x1 + (this.segmentLength + this.spaceLength) * (i + 1) 

              * cos(this.S) - this.spaceLength * cos(this.S)

              + this.beginningLength * cos(this.S),

          this.y1 + (this.segmentLength + this.spaceLength) * (i + 1) 

              * sin(this.S) - this.spaceLength * sin(this.S) 

              + this.beginningLength * sin(this.S)

        )

      } else {

​

        stroke(255,255,0)

        var distCheck = 

            sqrt(

              pow((this.segmentLength + this.spaceLength) * i 

                  * cos(this.S) + this.beginningLength * cos(this.S), 2) 

              + pow((this.segmentLength + this.spaceLength) * i 

                    * sin(this.S) + this.beginningLength * sin(this.S), 2))

        if (distCheck  < this.L) {

          line(

            this.x1 + (this.segmentLength + this.spaceLength) * i 

                * cos(this.S) + this.beginningLength * cos(this.S),

            this.y1 + (this.segmentLength + this.spaceLength) * i 

                * sin(this.S) + this.beginningLength * sin(this.S),

            this.x2, this.y2

          )

        }

      }

    }

  }

}

​

function setup() {

  createCanvas(1000, 1000);

​

  als = [];

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

    let y = random(height);

    als.push(new AnimatedLine(100, y, width-100, y*2, random(1, 35), random(1, 35)));

  }

}

​

function draw() {

  background(220);

​

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

    stroke(0)

    strokeWeight(3);

    als[i].display();

    als[i].move(0.2)

​

    strokeWeight(5);

    stroke(255, 0, 0)

    point(100, 100 + i * 10);

    point(300, 100 + i * 10);

  }

}

​

// function slope(p1, p2) {

//   return (p2.y-p1.y)/(p2.x-p1.x);

// }

​

// function setup() {

//   createCanvas(1000,1000);

// }

​

// // brushSize simply is the thikness of the brush stroke

// let brushSize = 40;

// let f = 0.5;

// let spring = 0.4;

// let friction = 0.45;

// let v = 0.5;

// let r = 0;

// let vx = 0;

// let vy = 0;

// let splitNum = 100;

// let diff = 8;

​

// function draw() {

//   let p1 = createVector(random(width), random(height));

//   let p2 = createVector(random(width), random(height));

//   let m = slope(p2, p1);

//   // let x = p1.x;

//   let y = p1.y;

//   for (let x = p1.x+1; x < p2.x; x++) {

//     y = 

//   }

//   if(mouseIsPressed) {

//     if(!f) {

//       f = true;

//       x = mouseX;

//       y = mouseY;

//     }

//     vx += ( mouseX - x ) * spring;

//     vy += ( mouseY - y ) * spring;

//     vx *= friction;

//     vy *= friction;

//     v += sqrt( vx*vx + vy*vy ) - v;

//     v *= 0.6;

//     oldR = r;

//     r = brushSize - v;

//     for( let i = 0; i < splitNum; ++i ) {

//       oldX = x;

//       oldY = y;

//       x += vx / splitNum;

//       y += vy / splitNum;

//       oldR += ( r - oldR ) / splitNum;

//       if(oldR < 1) { oldR = 1; }

//       strokeWeight( oldR+diff );  // AMEND: oldR -> oldR+diff

//       line( x, y, oldX, oldY );

//       strokeWeight( oldR );  // ADD

//       line( x+diff*1.5, y+diff*2, oldX+diff*2, oldY+diff*2 );  // ADD

//       line( x-diff, y-diff, oldX-diff, oldY-diff );  // ADD

//     }

//   } else if(f) {

//     vx = vy = 0;

//     f = false;

//   }

// }