const h = 400

​

let start;

let end;

let ctrl;

​

let tSlider;

​

function setup() {

  createCanvas(w, h)

  .mouseClicked(x => {

    ctrl = createVector(mouseX, mouseY); 

    draw()

  });

​

  start = createVector(20, 20);

  end = createVector(380, 380);

  ctrl = createVector(200, 200);

​

  tSlider = createSlider(0, 1, 0.5, 0.1).input((x) => {

    ctrl.x = tSlider.value() * w;

    ctrl.y = h - tSlider.value() * h;

    draw();

  });

}

​

function draw() {

  background(220);

​

  const r = 8;

  fill(255, 0, 0);

  circleVec(start, r);

  circleVec(end, r);

​

  fill(0, 0, 255);

  circleVec(ctrl, r);

​

  stroke(0, 255, 0);

​

  let pv = start;

  for (let t = 0; t < 1.0; t += 0.1) {

    const ac = lerpVec(start, ctrl, t);

    const cb = lerpVec(ctrl, end, t);

    const acb = lerpVec(ac, cb, t);

    circle(acb.x, acb.y, 2)

    // lineVec(pv, acb);

    pv = acb;

  }

  noLoop();

}

​

function lerpVec(a, b, t) {

  return createVector(lerp(a.x, b.x, t), lerp(a.y, b.y, t));

}

​

function lineVec(s, e) {

  line(s.x, s.y, e.x, e.y);

}

​

function circleVec(a, r) {

  circle(a.x, a.y, r);

}

​