As curvas de Bézier são uma das ferramentas mais comuns para desenhar trajetórias suaves em computação gráfica, movimento em interfaces de usuário, ilustração vetorial e renderização de fontes. Mesmo quando uma curva parece feita à mão livre, muitos sistemas a representam com um pequeno conjunto de pontos de controle e uma equação determinística. Isso torna as curvas de Bézier ao mesmo tempo expressivas e confiáveis: artistas e engenheiros podem moldar movimento e geometria com apenas alguns valores.

Este artigo desenvolve uma compreensão prática desde os fundamentos. Você começará com o caso quadrático, conectará a posição dos manipuladores com a direção tangente, comparará diretamente o comportamento dos manipuladores quadrático e cúbico e, em seguida, inspecionará como o algoritmo de De Casteljau calcula pontos em qualquer tipo de curva. Antes de entrar na notação, comece com o comportamento básico: um manipulador móvel altera uma curva suave entre dois pontos fixos.

Arraste o manipulador azul para reformatar a curva enquanto os dois pontos escuros permanecem fixos. O polígono de controle tracejado mostra a estrutura linear que guia a trajetória suave. Mover o manipulador para mais longe do segmento extremo cria um arco mais acentuado, enquanto aproximá-lo achata a curva.

Pontos de Controle das Curvas de Bézier

Uma curva de Bézier é definida por pontos de controle. A curva começa no primeiro ponto de controle e termina no último ponto de controle. Os pontos intermediários geralmente não estão sobre a curva. Em vez disso, eles puxam a direção da curva e o quanto ela se curva. As curvas de Bézier vêm em várias formas, mas este artigo foca nas mais comuns: as curvas de Bézier polinomiais. Nessa família, a quantidade de pontos de controle determina o grau da curva. O polígono de controle é a sequência de segmentos retos que conectam esses pontos. Não é a curva renderizada, mas é a forma mais fácil de ler como a curva sairá do ponto inicial, se curvará no interior e chegará ao ponto final.

Os casos mais comuns são as curvas de Bézier quadráticas e cúbicas. Para uma curva de Bézier quadrática, há três pontos:

• $P_0$: ponto inicial
• $P_1$: ponto de controle
• $P_2$: ponto final

Para uma curva de Bézier cúbica, há quatro pontos:

• $P_0$: ponto inicial
• $P_1$: primeiro manipulador
• $P_2$: segundo manipulador
• $P_3$: ponto final

Esses pontos de controle interiores geralmente atuam como manipuladores em vez de pontos pelos quais a curva deve passar. Mover um manipulador altera a direção tangente e a intensidade da curvatura enquanto os pontos finais permanecem fixos. Essa é a razão prática pela qual as curvas de Bézier são úteis em ferramentas de desenho, trajetórias de animação e fontes: um conjunto pequeno de pontos fornece geometria suave e previsível.

Fórmula da Curva de Bézier Quadrática

Uma curva de Bézier quadrática utiliza três pontos de controle e um parâmetro $t$. A fórmula utiliza um parâmetro $t$ de $0$ a $1$:

$$B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2$$

Você pode interpretar isso como uma combinação ponderada de pontos. Em $t = 0$, todo o peso está em $P_0$, então o ponto da curva está no início. Em $t = 1$, todo o peso está em $P_2$, então o ponto da curva está no final. Entre eles, o peso se desloca suavemente e produz uma trajetória contínua.

Esse comportamento suave vem do fato de que os pesos são polinômios em $t$. À medida que $t$ muda, o ponto na curva se move continuamente em vez de saltar de um local para outro.

Exploração da Forma Quadrática

Vale a pena revisitar a mesma curva editável agora que os rótulos dos pontos têm significado. Esta é a forma de Bézier mais simples: dois pontos finais fixos e um ponto de controle móvel. A curva começa em $P_0$, termina em $P_2$ e se curva em direção a $P_1$. À medida que o manipulador azul $P_1$ se move, o polígono de controle mostra o arcabouço linear enquanto a curva mostra o resultado suavizado. Afastar $P_1$ do segmento de $P_0$ a $P_2$ faz com que a trajetória se arquee fortemente; aproximá-lo desse segmento achata a curva sem mover nenhum dos pontos finais.

A curva geralmente não passa por $P_1$. Em vez disso, os dois segmentos conectados a $P_1$ estabelecem as direções no início e no final da curva. Mover o manipulador portanto altera tanto a quantidade de curvatura quanto a forma como a curva sai de $P_0$ e chega em $P_2$. É por isso que as curvas de Bézier são úteis: você pode direcionar a forma indiretamente e manter a suavidade. Essas mesmas ideias também levam a propriedades formais como a contenção no invólucro convexo e a invariância afim, que as notas de construção da Michigan Tech explicam com mais detalhes.

Fórmula da Curva de Bézier Cúbica

A maioria das ferramentas de design e web prefere as curvas de Bézier cúbicas. Uma cúbica tem quatro pontos de controle:

• $P_0$: início
• $P_1$: primeiro manipulador
• $P_2$: segundo manipulador
• $P_3$: final

Sua equação é:

$$B(t) = (1 - t)^3 P_0 + 3(1 - t)^2 t P_1 + 3(1 - t)t^2 P_2 + t^3 P_3$$

Comparada à quadrática, a cúbica adiciona mais um manipulador e muito mais controle de forma. Você pode criar curvas em S, transições suaves ou curvas fechadas sem precisar encadear múltiplos segmentos prematuramente. Essa liberdade adicional também introduz comportamentos que as curvas quadráticas não conseguem expressar, incluindo pontos de inflexão e, em algumas disposições de pontos de controle, formas similares a cúspides ou auto-interseções.

A vista comparativa torna o manipulador cúbico adicional visível como uma diferença de controle, não apenas como uma equação de grau superior. No painel quadrático, arrastar o único manipulador interior altera todo o arco e acopla as direções tangentes de início e fim. No painel cúbico, mover $P_1$ altera principalmente a saída de $P_0$, enquanto mover $P_2$ altera principalmente a chegada em $P_3$. O controle deslizante Posição de amostra conecta esse comportamento geométrico aos pesos base: três pesos quadráticos se alternam ao longo do trecho, enquanto quatro pesos cúbicos se sobrepõem e dão ao interior da curva mais liberdade.

Mover os dois manipuladores cúbicos para lados opostos da corda de $P_0$ a $P_3$ mostra o benefício prático. Os pontos finais permanecem fixos, mas a curva pode desenvolver uma forma de S porque os dois manipuladores direcionam diferentes partes do segmento. As curvas quadráticas são mais simples e muitas vezes suficientes para um único arco curvo, enquanto as curvas cúbicas permitem ajustar a saída e a chegada de forma mais independente. Esse comportamento local do manipulador é a razão pela qual os editores vetoriais expõem manipuladores de tangente para as âncoras. Cada segmento pode ser ajustado sem redesenhar toda a trajetória manualmente. Se você quiser se aprofundar nessas mudanças qualitativas de forma cúbica, Pomax cobre inflexões e classificações com mais profundidade, e o relatório da Berkeley sobre detecção de cúspides e pontos de inflexão em curvas mostra como essas características derivam da estrutura das derivadas e não de peculiaridades do editor. Se você quiser ver a mesma ideia de curva estendida ao espaço, o artigo complementar sobre visualização de curvas de Bézier 3D e construção de De Casteljau mostra como o polígono de controle, a trajetória amostrada e a escada de interpolação se comportam sob rotação da câmera.

Tangentes e Direção do Movimento

As curvas de Bézier são frequentemente usadas para trajetórias de movimento, não apenas para desenhos estáticos. A vista de manipuladores cúbicos acima torna a ideia da tangente nos pontos finais fácil de ver. Em animação, a direção tangente local importa porque informa para onde um objeto está se movendo naquele instante.

Para uma curva cúbica, a derivada é:

$$B'(t) = 3(1 - t)^2 (P_1 - P_0) + 6(1 - t)t (P_2 - P_1) + 3t^2 (P_3 - P_2)$$

Dois fatos práticos decorrem disso:

• No início ($t = 0$), a direção se alinha com $P_1 - P_0$.
• No final ($t = 1$), a direção se alinha com $P_3 - P_2$.

É por isso que mover os dois pontos de controle interiores altera como a curva sai e se aproxima dos pontos finais. Em editores vetoriais e de trajetórias de movimento, essas direções tangentes são expostas como manipuladores de direção nos pontos finais, de modo que arrastá-los altera como a trajetória parte e chega.

Quando o movimento precisa parecer natural, a geometria da trajetória por si só não é suficiente. Você também precisa de uma função de temporização para como $t$ muda ao longo do tempo. Uma trajetória pode ser suave enquanto a velocidade ainda parece abrupta se a progressão do parâmetro não for suavizada.

Algoritmo de De Casteljau

As equações polinomiais são compactas, mas há outra forma de avaliar curvas de Bézier tanto quadráticas quanto cúbicas: o algoritmo de De Casteljau. Ele calcula um ponto na curva usando interpolação linear repetida, o que significa que cada passo tem a mesma forma simples: mover-se uma fração $t$ do caminho de um ponto a outro. Isso é mais fácil de inspecionar e depurar do que uma expressão polinomial maior porque cada ponto intermediário tem um significado geométrico claro.

Para o caso quadrático em um $t$ escolhido:

1. Interpole entre $P_0$ e $P_1$ para obter $Q_0$.
2. Interpole entre $P_1$ e $P_2$ para obter $Q_1$.
3. Interpole entre $Q_0$ e $Q_1$ para obter $B(t)$.

O ponto final é o mesmo que a fórmula quadrática porque a interpolação linear é em si mesma uma soma ponderada. Se $Q_0 = (1 - t)P_0 + tP_1$ e $Q_1 = (1 - t)P_1 + tP_2$, então interpolar entre eles dá:

$$(1 - t)Q_0 + tQ_1 = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2$$

Esse lado direito é exatamente a equação da curva de Bézier quadrática da seção de fórmula anterior. A vantagem é que este procedimento de interpolação se estende naturalmente a curvas de grau superior e é numericamente estável em muitas implementações. Isso importa porque o mesmo procedimento geométrico funciona tanto para a curva quadrática quanto para a cúbica.

No modo Quadrática, o controle deslizante de interpolação mostra como um ponto da curva é construído para cada valor de $t$. À medida que $t$ se move de 0.00 para 1.00, $Q_0$ desliza entre $P_0$ e $P_1$, $Q_1$ desliza entre $P_1$ e $P_2$, e o ponto interpolado final traça a curva real. Mudando para o modo Cúbica adiciona mais uma rodada de interpolação, mas não adiciona um novo tipo de operação: cada ponto continua sendo uma mistura linear entre dois pontos da rodada anterior.

Esta vista de escada dá uma razão geométrica imediata de por que a curva permanece dentro da região convexa formada pelos pontos de controle. Ela também mostra por que De Casteljau é útil para subdivisão, que significa dividir um segmento de Bézier em dois segmentos de Bézier menores no valor atual de $t$. A metade esquerda pode ser construída a partir dos pontos ao longo de um lado da escada de interpolação, e a metade direita a partir dos pontos ao longo do outro lado. O código de renderização utiliza essa divisão quando uma curva está muito curvada para ser desenhada com precisão com um único segmento reto: continua subdividindo até que cada peça menor seja suficientemente plana para ser aproximada. A mesma operação é útil em tesselação adaptativa e testes de colisão. Para um tratamento visual mais aprofundado da divisão, derivadas e subdivisão, A Primer on Bezier Curves continua sendo uma das referências práticas mais sólidas.

Trajetórias de Bézier por Partes e Continuidade

Desenhos reais geralmente não são uma única curva. São cadeias de segmentos de Bézier. Ao conectar segmentos, a continuidade é a principal preocupação de qualidade. Cada segmento pode ser suave internamente, mas a âncora compartilhada entre dois segmentos vizinhos ainda pode criar um canto, uma mudança na velocidade ou uma mudança repentina na curvatura. O rótulo de continuidade descreve o que exatamente coincide nessa junção.

Quatro níveis úteis de continuidade aparecem na prática:

• $C_0$ continuidade: os segmentos se encontram no mesmo ponto.
• $G_1$ continuidade: as direções tangentes coincidem, então a junção parece suave.
• $C_1$ continuidade: as primeiras derivadas coincidem, então a direção e a magnitude tangente são contínuas.
• $C_2$ continuidade: as segundas derivadas coincidem, então a curvatura muda suavemente.

A distinção entre $G_1$ e $C_1$ é fácil de passar despercebida porque ambas podem eliminar o canto visível. Para um segmento cúbico, a tangente no ponto final aponta ao longo da linha do último manipulador até o ponto final, e a tangente do próximo segmento aponta do ponto final compartilhado em direção ao próximo manipulador. Se essas duas linhas de manipuladores são colineares, a junção tem uma direção suave. Se os manipuladores também estão equilibrados para que os vetores derivados tenham a mesma magnitude, a trajetória parametrizada cruza a junção sem um salto na primeira derivada.

A comparação utiliza um nó compartilhado com um segmento cúbico de entrada laranja e um segmento cúbico de saída azul. No modo C0, as duas curvas se encontram, mas os manipuladores próximos podem apontar em direções não relacionadas, então a junção pode formar um canto. Mudando para G1 ajusta o manipulador próximo de saída para a mesma linha tangente enquanto mantém sua própria distância da junção; o canto desaparece, mas os dois vetores tangentes ainda podem ter comprimentos diferentes. No modo C1, o manipulador próximo é refletido através do nó compartilhado, o que faz com que o vetor tangente de saída coincida com o de entrada tanto em direção quanto em magnitude.

O modo C2 adiciona mais uma restrição ao derivar o manipulador de saída distante da geometria do manipulador do segmento de entrada. Os pequenos pentes de curvatura próximos à junção tornam essa condição mais estrita visível: a coincidência de tangentes controla para onde a curva aponta, enquanto a coincidência de curvatura controla o quão bruscamente a curva está girando ao passar pelo nó. Essa suavidade adicional é útil para superfícies limpas, trajetórias de câmera e trajetórias de movimento onde uma mudança repentina na curvatura seria perceptível. Ela também reduz a liberdade de edição, porque mover um manipulador agora força mais parte do segmento vizinho a se mover com ele.

Em muitos fluxos de trabalho de interface de usuário e ícones, $G_1$ ou $C_1$ é a linha de base prática. Se os manipuladores adjacentes estão dispostos como colineares em torno de uma âncora compartilhada, as junções parecem visualmente suaves, e manipuladores equilibrados fazem com que a derivada matemática também coincida. Para superfícies de alta precisão e trajetórias de simulação, restrições de continuidade mais fortes podem importar porque saltos de curvatura podem afetar a aparência, o movimento ou cálculos posteriores. Se você precisar da distinção entre continuidade algébrica e junções visualmente suaves, a nota da Berkeley sobre continuidade geométrica de curvas paramétricas é uma leitura complementar útil.

Casos de Uso Típicos

As curvas de Bézier aparecem em muitos sistemas, frequentemente por trás de editores amigáveis:

• Comandos de trajetória SVG em gráficos web
• Contornos de glifos tipográficos em renderização de texto
• Trilhos de câmera e trajetórias de objetos em ferramentas 3D
• Curvas de suavização cubic-bezier() em CSS para linhas do tempo de animação
• Ferramentas de interpolação de formas em software de ilustração

Embora as interfaces difiram, o conceito subjacente é o mesmo: os pontos de controle definem trajetórias suaves com comportamento previsível nos pontos finais. A especificação de trajetórias SVG é a referência autoritativa sobre como comandos de trajetória quadráticos e cúbicos são representados em formatos de produção.

Esses formatos de produção podem parecer sucintos, mas codificam a mesma geometria mostrada ao longo do artigo. Um comando de trajetória quadrático armazena um manipulador entre dois pontos finais; um comando de trajetória cúbico armazena dois. Quando você inspeciona ou edita uma trajetória SVG, ainda está decidindo para onde as tangentes dos pontos finais apontam, com que força os manipuladores puxam e como os segmentos vizinhos devem se encontrar.

Depois que você consegue ler o polígono de controle, as curvas de Bézier deixam de parecer abstratas. Os manipuladores mostram como a trajetória vai se curvar, a interpolação explica cada ponto entre os extremos, e desenhos complexos se tornam cadeias de decisões de curva menores que podem ser inspecionadas um segmento de cada vez.