​

let pts = [];

let dragging = [];

​

function setup() {

  createCanvas(400, 400);

  pts = [

    createVector(50, 50),

    createVector(200, 300),

    createVector(350, 50)

  ];

  dragging = [

    false,

    false,

    false

  ]

}

​

function draw() {

  background(220);

  noFill();

  stroke(0);

  strokeWeight(4);

  beginShape();

  vertex(pts[0].x, pts[0].y);

  quadraticVertex(pts[1].x, pts[1].y, pts[2].x, pts[2].y);

  endShape();

  strokeWeight(1);

  line(pts[0].x, pts[0].y, pts[1].x, pts[1].y);

  line(pts[2].x, pts[2].y, pts[1].x, pts[1].y);

  noStroke();

  fill(255);

  for (let pt of pts) {

    ellipse(pt.x, pt.y, 20, 20);

  }

  for (let i = 0; i < pts.length; i++) {

    if (dragging[i]) {

      pts[i].x = mouseX;

      pts[i].y = mouseY;

      break;

    }

  }

  noStroke();

  fill(0);

  textSize(12);

  text("quadratic curve demo / drag the handles to change the curve", 4, height-4);

}

​

function mousePressed() {

  for (let i = 0; i < pts.length; i++) {

    if (dist(mouseX, mouseY, pts[i].x, pts[i].y) < 20) {

      dragging[i] = true;

      break;

    }

  }

}

​

function mouseReleased() {

  for (let i = 0; i < dragging.length; i++) {

    dragging[i] = false;

  }

}

​