​

function setup() {

  createCanvas(600, 600);

  p0 = createVector(0, height/2)

  p1 = createVector(width/3, height)

  p2 = createVector(width/2, height)

  p3 = createVector(width, height/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)

    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)

  // Controlando o anchor point com o mouse

  p1.x = mouseX;

  p1.y = mouseY;

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

    pC = quadratic(p0, p1, p2, t)

    pD = quadratic(p1, p2, p3, t)

    stroke(t*360, 255, 255)

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

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

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

    //point(pC.x, p.Cy);

    point(px, py);

    //vertex(px, py);

  }

  endShape();

}