var AMT = 10;

var T = 0;

var dt = 0.015;

​

function setup() {

  createCanvas(400, 400);

  createButton('bob').mousePressed(ptsfromcentre)

  linevas = createGraphics(400,400);

  ptsfromcentre()

  createSlider(1, 50, AMT).input(function(e){

    background(400);

    linevas.clear()

    T = 0; dt = 0.005;

    AMT = this.value();

    ptsfromcentre();

  })

}

​

function ptsfromcentre(){

  pts.splice(0,pts.length)

  const M = width/AMT

  y = 100;

  for (var i = -1 ; i < AMT+1 ; i++){

    pts.push(createVector(M/2+i*M, 200+y+random(-50,50)))

    y = -y;

  }

}

​

​

function draw() {

  background(220);

  image(linevas,0,0);

  T += dt;

  if (T < 0 || T > AMT) dt = -dt;

  var t = T % 1

  for (const [i,p] of pts.entries()){

    if (i < pts.length-1){

      // line between initial points for each point

      line(p.x,p.y, pts[i+1].x, pts[i+1].y)

      // lerp on first line by lepring to next point

      var ax = (1-t)*p.x+t*pts[i+1].x

      var ay = (1-t)*p.y+t*pts[i+1].y

      circle(ax,ay,6);

      if (i < pts.length -2){

        // lerp on next line as well so we can lerp between

        // the lerps on both lines

        bx = (1-t)*pts[i+1].x+t*pts[i+2].x

        by = (1-t)*pts[i+1].y+t*pts[i+2].y

        line(ax,ay,bx,by)

        if (i < pts.length-3){

          cx = (1-t)*pts[i+2].x+t*pts[i+3].x

          cy = (1-t)*pts[i+2].y+t*pts[i+3].y

        }

        if (i < pts.length-6){

        }

        if (Math.floor(T) == i){

          Ax = (1-t)*ax+t*bx

          Ay = (1-t)*ay+t*by

          Bx = (1-t)*bx+t*cx

          By = (1-t)*by+t*cy

          // line on the second lerp

          line(Ax, Ay, Bx, By)

          XX = (1-t)*Ax+t*Bx

          YY = (1-t)*Ay+t*By

          // linevas.circle(XX, YY, 5)

          circle(XX, YY, 5)

        }

      }

    }

    circle(p.x,p.y,5);

  }

// push();

//   noFill()

//   var ii = 0;

//   while ( ii < pts.length ) {

//     if ( ii < pts.length-3){

//       var [p1,p2,p3,p4] = [pts[ii], pts[ii+1], pts[ii+2], pts[ii+3]]

//       bezier(p1.x, p1.y, p2.x, p2.y, p4.x, p4.y, p3.x, p3.y)

//     }

//     ii+=3

//   }

//   pop();

// 

}