const pointRadius = 10;

let points = [];

let pointBeingDragged = null

​

function setup() {

  createCanvas(600, 600);

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

    let x = random(width);

    let y = random(height);

    points.push(createVector(x, y))

  }

}

​

function mousePressed() {

  for (let p = points.length - 1; p >= 0; p-- ) {

    if (pointClicked(points[p], pointRadius)) {

      pointBeingDragged = points[p]

      pointBeingDragged.x = mouseX;

      pointBeingDragged.y = mouseY;

      break;

    }

  }

}

​

function mouseDragged() {

  if (pointBeingDragged !== null) {

    pointBeingDragged.x = mouseX;

    pointBeingDragged.y = mouseY;

  }

}

​

function mouseReleased() {

  pointBeingDragged = null;

}

​

const pointClicked = (point, radius) => {

   distMouseToPointCenter = dist(mouseX, mouseY, point.x, point.y) 

   return distMouseToPointCenter < radius * 2;

}

​

const quadratic = (p0, p1, p2, t) => {

    pAx = lerp (p0.x, p1.x, t);

    pAy = lerp (p0.y, p1.y, t);

    pBx = lerp (p1.x, p2.x, t);

    pBy = lerp (p1.y, p2.y, t);

    stroke(t*360, 255, 255)

    strokeWeight(1)

    line(pAx, pAy, pBx, pBy)

    pCx = lerp (pAx, pBx, t)

    pCy = lerp (pAy, pBy, t)

  return createVector(pCx, pCy)

}

​

function draw() {

  background(0);

  stroke(255)

  strokeWeight(1)

  colorMode(HSB)

​

  for (let p of points) {

    fill(255)

    circle(p.x, p.y, pointRadius)

  }

  // Fazer lerp para p0-p1 e p1-p2

  noFill()

  beginShape();

  const delta = 0.05

  for(t = 0; t< 1.0001; t+= delta) {   // 1.0001 é para evitar erro de arrendondamento do JS e fazer a última linha ligando os últimos dois pA e pB

    let qua = []

    let cub = []

    pC = quadratic(points[0], points[1], points[2], t)

    pD = quadratic(points[1], points[2], points[3], t)

    stroke(t*360, 255, 255)

    strokeWeight(1)

    line(pC.x, pC.y, pD.x, pD.y)

    px = lerp(pC.x, pD.x, t);

    py = lerp(pC.y, pD.y, t);

    stroke(255)

    strokeWeight(4)

    vertex(px, py);

  }

  endShape();

}