let Point = function(x, y) {

  this.x = x;

  this.y = y;

}

​

let p1, p2, p3, p4;

​

function setup() {  

  createCanvas(400, 400);

  strokeWeight(10);

  setAttributes('antialias', true);

  mouseX = width*0.75

  mouseY = height*0.25

​

  // Override initial control point

  p1 = new Point(width*0.25,height*0.25)

  p2 = p1;

  p3 = new Point(0,0)

  p4 = new Point(width*0.75,height*0.75)

​

}

​

function draw() {

  background(255);

  // if(frameCount == 1){

    p3.x = mouseX  

    p3.y = mouseY

  // }

​

  // Display convex hull

  strokeWeight(0.5);

  stroke(13, 70, 168, 25)

  line(p1.x, p1.y, p3.x, p3.y)

  line(p3.x, p3.y, p4.x, p4.y)

  // Interpolate lines

  let steps = Math.sin(0.01*frameCount)*20 + 50;

  for (let i = 0; i <= steps; i++) {

    let t = i/steps;

    // print(t)

    let v1 = createVector(p1.x, p1.y)

    let v3 = createVector(p3.x, p3.y)

    let v4 = createVector(p4.x, p4.y)

    // Point at parameter t at edges

    let t1 = v1.copy().lerp(v3.x, v3.y, 0, t)

    let t2 = v3.copy().lerp(v4.x, v4.y, 0, t)

    // Point at parameter t in joining line

    let t3 = p5.Vector.lerp(t1, t2, t)

    // Display parameter lines

    stroke(13, 70, 168, 25)

    line(t1.x, t1.y, t2.x, t2.y)

    noStroke();

    fill(13, 70, 168, 25);

    circle(t1.x, t1.y,radius*0.25);

    circle(t2.x, t2.y,radius*0.25);

    noStroke()

    fill(235, 64, 52);

    circle(t3.x, t3.y,radius*0.4);

  }

  // Display quadratic Bézier curve

  strokeWeight(1.5);

  stroke(0);

  noFill();

  beginShape();

  vertex(p1.x, p1.y);

  bezierVertex(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);

  endShape();

  // Display control points

  strokeWeight(1.2);

  stroke(10);

  fill(255);

  circle(p1.x, p1.y,radius);

  circle(p2.x, p2.y,radius);

  circle(p3.x, p3.y,radius);

  circle(p4.x, p4.y,radius);

}