Curvas de Bézier

A curva de Bézier é uma curva suave definida por dois pontos de ancoragem, por onde a curva efetivamente passa, e dois pontos de controle, que determinam a direção e a intensidade da curvatura. No p5.js, ela é criada com o comando bezier().

O comando bezier(x1, y1, x2, y2, x3, y3, x4, y4) recebe oito parâmetros. Os dois primeiros (x1, y1) definem o primeiro ponto de ancoragem, onde a curva começa. Os dois últimos (x4, y4) definem o segundo ponto de ancoragem, onde a curva termina. Os quatro parâmetros do meio (x2, y2, x3, y3) definem os dois pontos de controle, que puxam a curva em sua direção sem que ela chegue a tocá-los.

Estrutura básica

bezier(x1, y1, x2, y2, x3, y3, x4, y4);

Exemplo

Para um exemplo de como utilizar esse comando, teste o Código e veja a curva formada.

function setup() {
  createCanvas(800,600);
  noFill();
  strokeWeight(3);
  bezier(100, 500, 200, 100, 600, 100, 700, 500);
}

Visualizando os pontos de controle

Desenhar os pontos de ancoragem, os pontos de controle e as linhas que os conectam ajuda a entender como cada um influencia o formato final da curva.

function setup() {
  createCanvas(800,600);
  let x1 = 100, y1 = 500;
  let x2 = 200, y2 = 100;
  let x3 = 600, y3 = 100;
  let x4 = 700, y4 = 500;

  noFill();
  strokeWeight(3);
  bezier(x1, y1, x2, y2, x3, y3, x4, y4);

  stroke(200,0,0);
  strokeWeight(1);
  line(x1, y1, x2, y2);
  line(x3, y3, x4, y4);

  noStroke();
  fill(200,0,0);
  ellipse(x2, y2, 10, 10);
  ellipse(x3, y3, 10, 10);

  fill(0,100,200);
  ellipse(x1, y1, 10, 10);
  ellipse(x4, y4, 10, 10);
}

Experimente usar bezierVertex() dentro de beginShape() e endShape() para encadear várias curvas de Bézier em sequência, formando contornos complexos e orgânicos, como os usados em ilustração vetorial. As funções bezierPoint() e bezierTangent() também permitem calcular posições e direções específicas ao longo da curva, úteis para animar objetos que devem seguir seu trajeto. Mais detalhes e exemplos podem ser encontrados na documentação do p5.js.