​

var from, to;

var t=0;

var dt =0.005;

​

​

debug = 0;

const b = [];

const left = [];

var lx, ly, rx, ry;

const right = [];

​

function setup() {

  createCanvas(400, 400);

  noFill();

  from = createVector(0,0);

  to = createVector(400,400);

  left.push(createVector(0,0));

  left.push(createVector(100,100));

  left.push(createVector(100,300));

  left.push(createVector(0,400));

  right.push(createVector(400,0));

  right.push(createVector(300,100));

  right.push(createVector(300,300));

  right.push(createVector(400,400));

}

​

function mouseClicked() {

  b.push(createVector(mouseX, mouseY));

  if (b.length>4){b.shift()}

  print(b)

}

​

function draw() {

​

  i = p5.Vector.lerp(from, to, t);

  if(debug) circle(i.x, i.y, 5)

  if( t <0 || t > 1) {dt=-dt;}

  t+=dt;

  for (const c of b){

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

  }

  if (b.length==4){

    const [q,w,e,r]=b;

    bezier(q.x,q.y, w.x,w.y, e.x,e.y, r.x,r.y);

  }

  if (debug && left.length==4){

    const [q,w,e,r]=left;

    bezier(q.x,q.y, w.x,w.y, e.x,e.y, r.x,r.y);

  }

  if (debug && right.length==4){

    const [q,w,e,r]=right;

    bezier(q.x,q.y, w.x,w.y, e.x,e.y, r.x,r.y);

  }

  [q,w,e,r]=left;

  lx = bezierPoint(q.x, w.x, e.x, r.x, t);

  ly = bezierPoint(q.y, w.y, e.y, r.y, t);

  [q,w,e,r]=right;

  rx = bezierPoint(q.x, w.x, e.x, r.x, t);

  ry = bezierPoint(q.y, w.y, e.y, r.y, t);

  if(debug) circle(lx, ly, 3);

  if(debug) circle(rx, ry, 3);

  i.x = bezierPoint(lx, sin(t/6)*400, cos(t/3)*400, rx, t);

  i.y = bezierPoint(ly, sin(t*PI)*400, cos(t/PI)*400, ry, t);

  stroke(lerpColor(color('red'), color('blue'), t))

  line(lx, ly, i.x, i.y);

  stroke(lerpColor(color('blue'), color('red'), t))

  line(rx, ry, i.x, i.y);

}