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, 19)

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

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

  // Animate sampling line

  let t_sample = Math.sin(0.025*frameCount)*0.5 + 0.5;

  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_sample)

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

    // Point at parameter t in joining line

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

    // Display parameter lines

    stroke(13, 70, 168, 100);

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

      noStroke()

    fill(13, 70, 168, 255);

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

  // Draw quadratic Bézier curve

  // by sampling points

  let steps = 150

  beginShape();

  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)

    if (t <= t_sample) {

      vertex(t3.x, t3.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, 50);

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

  }

  stroke(13, 70, 168, 255);

  strokeWeight(1.2);

  noFill();

  endShape()

  // 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);

}