Comprimento da curva
Calculadora de Curvas de Bézier
Crie curvas interativamente, analise as etapas da construção de De Casteljau, estime comprimentos e exporte fórmulas de caminho.
Os resultados são calculados automaticamente conforme você informa os dados.
Equações e saída SVG
▼ Veja explicações e dicas abaixo ▼
Calculadoras relacionadas
O que é uma curva de Bézier?
Uma curva de Bézier é uma curva paramétrica suave moldada por um conjunto de pontos de controle. Em vez de traçar a curva diretamente por cada ponto, você define um pequeno grupo de pontos que funcionam como alças. A curva começa no primeiro ponto de controle, termina no último e se curva de acordo com os pontos intermediários.
O parâmetro \(t\) indica em que ponto você está na curva. Para uma curva de Bézier padrão, \(t = 0\) fornece a primeira extremidade, \(t = 1\) fornece a última extremidade, e os valores entre \(0\) e \(1\) fornecem pontos entre elas. O valor de \(t\) não tem unidade: ele não representa distância, ângulo, tempo ou porcentagem, a menos que você escolha interpretá-lo dessa forma.
As curvas de Bézier são amplamente usadas em gráficos vetoriais, contornos de fontes, trajetórias de animação, projetos de curvas no estilo CAD, ícones, ilustrações e gráficos para a web. Elas são úteis porque poucos pontos de controle conseguem descrever uma forma flexível e suave.
Por que as curvas de Bézier são importantes
As curvas de Bézier oferecem a designers, estudantes e desenvolvedores uma forma comum de descrever curvas matematicamente. Uma curva pode ser desenhada, armazenada, animada, exportada e editada alterando seus pontos de controle, em vez de editar manualmente muitos segmentos de reta minúsculos.
Elas são especialmente úteis quando uma forma precisa continuar suave em diferentes tamanhos. Um ícone vetorial, por exemplo, pode ser redimensionado de um botão pequeno para um pôster grande porque seu contorno é descrito por curvas matemáticas, e não por pixels fixos.
As curvas de Bézier também conectam o design visual ao cálculo e à álgebra. A mesma curva pode ser entendida como uma combinação ponderada de pontos, uma fórmula polinomial, uma sequência de interpolações lineares, uma direção tangente e um segmento de caminho SVG.
Termos importantes
- Ponto de controle: ponto usado para definir a forma da curva. O primeiro e o último pontos de controle são as extremidades; os pontos de controle internos geralmente funcionam como alças, e não como pontos pelos quais a curva passa.
- Parâmetro \(t\): valor sem unidade, de \(0\) a \(1\), que seleciona um ponto na curva.
- Grau: grau polinomial da curva. Uma curva de Bézier de grau \(n\) tem \(n + 1\) pontos de controle.
- Curva de Bézier quadrática: curva de grau \(2\) com três pontos de controle.
- Curva de Bézier cúbica: curva de grau \(3\) com quatro pontos de controle. Curvas de Bézier cúbicas são comuns em gráficos vetoriais e caminhos SVG.
- Curvas de Bézier quártica e quíntica: curvas de grau \(4\) e grau \(5\), usando respectivamente cinco e seis pontos de controle.
- Polígono de controle: linha quebrada que conecta os pontos de controle na ordem. Ela ajuda a visualizar como os pontos de controle puxam a curva.
- Base de Bernstein: conjunto de pesos de combinação usados na fórmula padrão de Bézier.
- Algoritmo de De Casteljau: método geométrico para avaliar uma curva de Bézier interpolando repetidamente pontos adjacentes.
- Vetor tangente: direção da curva em um ponto selecionado, obtida a partir da derivada \(B'(t)\).
- Comprimento de arco: distância ao longo da curva. Para a maioria das curvas de Bézier, ele costuma ser calculado numericamente, e não por uma expressão simples em forma fechada.
Como funcionam as curvas de Bézier
Uma curva de Bézier é uma combinação ponderada de seus pontos de controle. Para uma curva de grau \(n\) com pontos de controle \(P_0, P_1, \ldots, P_n\), a fórmula geral é:
$$
B(t) = \sum_{i=0}^{n} \binom{n}{i}(1-t)^{n-i}t^iP_i, \quad 0 \le t \le 1
$$
Em que:
- \(B(t)\) é o ponto da curva no parâmetro \(t\).
- \(n\) é o grau da curva.
- \(P_i\) é o ponto de controle de índice \(i\).
- \(\binom{n}{i}\) é um coeficiente binomial.
- \((1-t)^{n-i}t^i\) determina quanto cada ponto influencia no valor selecionado do parâmetro \(t\).
Para as coordenadas, a mesma fórmula é aplicada separadamente a \(x\) e \(y\):
$$
x(t) = \sum_{i=0}^{n} \binom{n}{i}(1-t)^{n-i}t^ix_i
$$
$$
y(t) = \sum_{i=0}^{n} \binom{n}{i}(1-t)^{n-i}t^iy_i
$$
Para \(0 \le t \le 1\), os pesos de combinação são não negativos e somam \(1\). Por isso, uma curva de Bézier é atraída por seus pontos de controle de maneira previsível e permanece dentro da região geral delimitada pelo polígono de controle.
Interpolação de De Casteljau
O algoritmo de De Casteljau avalia a mesma curva sem expandir o polinômio completo. Ele combina repetidamente pontos adjacentes até restar apenas um ponto.
Comece com os pontos de controle originais:
$$
P_i^{(0)} = P_i
$$
Em seguida, faça a interpolação entre pontos adjacentes em cada nível:
$$
P_i^{(r)} = (1-t)P_i^{(r-1)} + tP_{i+1}^{(r-1)}
$$
Depois de \(n\) níveis, o ponto final é o ponto da curva:
$$
B(t) = P_0^{(n)}
$$
Esse processo é útil visualmente porque mostra como a curva é construída a partir de interpolações repetidas em segmentos de reta.
Tangente, velocidade e rapidez
A derivada de uma curva de Bézier fornece sua direção tangente. Para uma curva de grau \(n\), a derivada pode ser escrita como outra curva no estilo de Bézier, com um grau a menos:
$$
B'(t) = n \sum_{i=0}^{n-1} \binom{n-1}{i}(1-t)^{n-1-i}t^i(P_{i+1} - P_i)
$$
Em um contexto de curvas paramétricas, o vetor derivada costuma ser chamado de velocidade. Seu módulo é a rapidez:
$$
\text{speed} = \left\|B'(t)\right\| = \sqrt{\left(\frac{dx}{dt}\right)^2 + \left(\frac{dy}{dt}\right)^2}
$$
Essa rapidez é medida por unidade de \(t\). Ela não é automaticamente uma velocidade do mundo real, a menos que \(t\) esteja sendo usado como tempo.
Comprimento aproximado da curva
O comprimento de uma curva paramétrica pode ser descrito pela integral do comprimento de arco:
$$
L = \int_0^1 \sqrt{\left(\frac{dx}{dt}\right)^2 + \left(\frac{dy}{dt}\right)^2}\,dt
$$
Em ferramentas gráficas práticas, o comprimento da curva costuma ser estimado amostrando muitos pontos e somando as distâncias em linha reta entre amostras consecutivas:
$$
L \approx \sum_{k=1}^{m} \left\|B\left(\frac{k}{m}\right) - B\left(\frac{k-1}{m}\right)\right\|
$$
Isso fornece uma estimativa numérica útil, mas ainda é uma aproximação. Mais amostras geralmente produzem uma estimativa mais próxima, ao custo de mais processamento.
Exemplos de curvas de Bézier na prática
Exemplo 1: uma curva quadrática simples
Suponha que uma curva de Bézier quadrática tenha estes pontos de controle:
- \(P_0 = (0, 0)\)
- \(P_1 = (50, 100)\)
- \(P_2 = (100, 0)\)
Uma curva de Bézier quadrática é:
$$
B(t) = (1-t)^2P_0 + 2(1-t)tP_1 + t^2P_2
$$
Em \(t = 0.5\), os pesos são:
$$
(1-0.5)^2 = 0.25
$$
$$
2(1-0.5)(0.5) = 0.5
$$
$$
0.5^2 = 0.25
$$
Portanto, o ponto é:
$$
B(0.5) = 0.25(0,0) + 0.5(50,100) + 0.25(100,0)
$$
$$
B(0.5) = (50,50)
$$
A curva passa pelo meio da grade de coordenadas, mas não passa pelo ponto de controle interno \((50,100)\). Esse ponto puxa a curva para cima.
Exemplo 2: uma curva cúbica de design
Considere uma curva de Bézier cúbica com estes pontos de controle:
- \(P_0 = (8, 18)\)
- \(P_1 = (30, 88)\)
- \(P_2 = (68, 8)\)
- \(P_3 = (92, 78)\)
Uma curva de Bézier cúbica é:
$$
B(t) = (1-t)^3P_0 + 3(1-t)^2tP_1 + 3(1-t)t^2P_2 + t^3P_3
$$
Em \(t = 0.5\), os pesos cúbicos são \(0.125\), \(0.375\), \(0.375\) e \(0.125\):
$$
x(0.5) = 0.125(8) + 0.375(30) + 0.375(68) + 0.125(92)
$$
$$
x(0.5) = 49.25
$$
$$
y(0.5) = 0.125(18) + 0.375(88) + 0.375(8) + 0.125(78)
$$
$$
y(0.5) = 48
$$
Portanto:
$$
B(0.5) = (49.25, 48)
$$
Os pontos de controle da derivada dessa cúbica são:
$$
3(P_1-P_0), \quad 3(P_2-P_1), \quad 3(P_3-P_2)
$$
O que resulta em:
$$
(66, 210), \quad (114, -240), \quad (72, 210)
$$
Ao calcular essa curva derivada em \(t = 0.5\), obtemos aproximadamente:
$$
B'(0.5) = (91.5, -15)
$$
A rapidez é:
$$
\sqrt{91.5^2 + (-15)^2} \approx 92.721
$$
Isso significa que, no ponto médio, a curva se move principalmente para a direita, com uma leve direção para baixo no sistema de coordenadas do modelo.
Exemplo 3: comportamento nas extremidades e com limitação de intervalo
Para qualquer curva de Bézier:
$$
B(0) = P_0
$$
$$
B(1) = P_n
$$
Isso significa que o primeiro e o último pontos de controle estão garantidamente na curva. Em geral, os pontos de controle internos não estão.
Nesta calculadora, o controle visível \(t\) é informado em uma escala de \(0\) a \(100\) e depois convertido para o intervalo padrão sem unidade. Um valor bruto de \(50\) se torna:
$$
t = \frac{50}{100} = 0.5
$$
Um valor bruto menor que \(0\) é tratado como \(0\), e um valor bruto maior que \(100\) é tratado como \(1\). Por exemplo, um valor bruto de \(120\) calcula a extremidade em \(t = 1\), e não um ponto além da curva.
Como interpretar o resultado
Ponto \(B(t)\) é a coordenada real na curva para o valor de parâmetro selecionado. Quando \(t = 0\), esse é o primeiro ponto de controle. Quando \(t = 1\), esse é o último ponto de controle.
O valor de \(t\) mostra o parâmetro normalizado após a conversão para o intervalo de \(0\) a \(1\). Um \(t\) maior avança pela parametrização, mas não necessariamente por distâncias iguais ao longo da curva.
Velocidade é o vetor derivada \(B'(t)\). Ele aponta na direção tangente da curva no ponto selecionado e mostra a taxa de variação por unidade de \(t\).
Rapidez é o módulo do vetor velocidade. Um valor maior significa que as coordenadas da curva estão mudando mais rapidamente em relação a \(t\), mas isso não representa uma velocidade física real, a menos que \(t\) esteja sendo usado como tempo.
Comprimento aproximado é a distância estimada ao longo da curva, em unidades de coordenadas. Ele se baseia em segmentos de reta amostrados, portanto deve ser interpretado como uma aproximação prática, e não como um comprimento analítico exato.
A tabela de De Casteljau mostra os níveis intermediários de interpolação. O único ponto final da tabela é o mesmo \(B(t)\) mostrado no resultado.
A saída SVG depende do grau da curva. Curvas quadráticas e cúbicas correspondem a comandos nativos de caminhos Bézier em SVG. Curvas de grau maior, como as quárticas e quínticas, são representadas por segmentos de reta amostrados na saída SVG.
Erros e ideias equivocadas comuns
Supor que todo ponto de controle está na curva. Somente o primeiro e o último pontos de controle têm sua presença garantida em uma curva de Bézier padrão. Os pontos de controle internos geralmente moldam a curva à distância.
Informar \(t\) como se o controle usasse \(0\) a \(1\). Nesta calculadora, o controle visível \(t\) usa uma escala bruta de \(0\) a \(100\). Um valor de \(50\) significa \(t = 0.5\).
Tratar \(t\) como distância ao longo da curva. Variações iguais em \(t\) normalmente não produzem distâncias iguais ao longo da curva. Um ponto em \(t = 0.5\) não fica necessariamente na metade do comprimento de arco da curva.
Ler o comprimento aproximado como exato. O resultado do comprimento é uma aproximação baseada em amostras. Ele é útil para comparação e estimativa, mas não é um comprimento de arco simbólico exato.
Esperar que curvas quárticas ou quínticas sejam exportadas como comandos SVG nativos de grau alto. Os caminhos SVG incluem comandos nativos para segmentos Bézier quadráticos e cúbicos. Curvas de grau maior precisam ser aproximadas ou convertidas para uso em SVG.
Esquecer o intervalo das coordenadas. As coordenadas dos pontos de controle estão limitadas à grade de \(0\) a \(100\). Valores fora desse intervalo são limitados ao intervalo permitido.
Confundir coordenadas do modelo com coordenadas da tela. As coordenadas matemáticas do modelo e as coordenadas usadas para desenhar na tela podem ter direções verticais diferentes. Um canvas frequentemente inverte a direção de \(y\) para que a exibição visual corresponda a uma grade convencional.
Quando usar curvas de Bézier
Use curvas de Bézier quando precisar descrever, editar ou exportar formas suaves com uma quantidade controlável de pontos.
Alguns usos comuns são:
- Criar ícones vetoriais, logotipos e ilustrações.
- Estudar curvas paramétricas, interpolação e derivadas.
- Construir caminhos SVG para gráficos na web.
- Comparar como diferentes pontos de controle alteram curvas do mesmo grau.
- Entender a direção tangente e a rapidez da curva em um valor de parâmetro escolhido.
- Estimar o comprimento da curva para trabalhos de layout, desenho ou gráficos.
- Demonstrar como a interpolação de De Casteljau constrói geometricamente uma curva.
Limitações e pontos importantes
Esta calculadora aceita os graus \(2\), \(3\), \(4\) e \(5\). Ela não aceita segmentos de reta de grau \(1\), graus acima de \(5\), curvas de Bézier racionais ou ponderadas, NURBS, pontos de controle tridimensionais nem sistemas de coordenadas personalizados.
As coordenadas estão limitadas a uma grade normalizada de \(0\) a \(100\) nos dois eixos. Isso torna a ferramenta fácil de usar para visualização, mas também significa que coordenadas fora desse intervalo não podem ser preservadas.
O resultado do comprimento é aproximado. A calculadora estima o comprimento amostrando a curva com uma quantidade fixa de amostras e somando as distâncias em linha reta entre pontos consecutivos. Isso costuma ser prático para trabalhos visuais, mas não deve ser tratado como uma prova matemática exata do comprimento de arco.
O desenho da curva e a exportação para SVG também usam amostragem em alguns casos. Curvas quadráticas e cúbicas podem ser exportadas com comandos Bézier nativos de SVG, enquanto curvas quárticas e quínticas são exportadas como segmentos de reta amostrados.
Os campos de coordenadas dos pontos de controle e as equações instanciadas mantêm os valores finitos atuais das coordenadas. As demais saídas numéricas são arredondadas para facilitar a leitura. Valores muito pequenos podem ser exibidos como \(0\), e valores que não podem ser representados como números finitos podem ser mostrados como indisponíveis.
A derivada e a rapidez são medidas em relação a \(t\). Elas não descrevem movimento físico, a menos que você defina um modelo de tempo que associe \(t\) ao tempo.
Como usar esta calculadora
- Escolha um grau de curva compatível: quadrático, cúbico, quártico ou quíntico.
- Edite as coordenadas dos pontos de controle \(P_0\) a \(P_n\) gerados ou arraste os pontos no canvas.
- Defina o controle bruto \(t\) de \(0\) a \(100\). A calculadora o converte em um valor \(t\) sem unidade, de \(0\) a \(1\).
- Ative a visualização da construção para ver os níveis de interpolação de De Casteljau.
- Ative a visualização da tangente para ver a direção da derivada no ponto selecionado.
- Confira \(B(t)\), o valor \(t\) normalizado, a velocidade, a rapidez e o comprimento aproximado.
- Use capturas para comparar até três curvas.
- Exporte a visualização atual, incluindo qualquer sobreposição de construção ou tangente ativada, como PNG ou SVG quando necessário.
Perguntas frequentes
O que \(t\) significa em uma curva de Bézier?
\(t\) é o parâmetro sem unidade usado para selecionar um ponto na curva. Na fórmula padrão, \(t\) varia de \(0\) a \(1\). Nesta calculadora, o controle visível usa \(0\) a \(100\) e depois converte esse valor para o intervalo padrão de \(0\) a \(1\).
Uma curva de Bézier passa por todos os seus pontos de controle?
Não. Uma curva de Bézier padrão começa em \(P_0\) e termina em \(P_n\), mas os pontos de controle internos geralmente funcionam como alças. Eles influenciam a forma da curva sem necessariamente estar sobre ela.
Qual é a diferença entre curvas de Bézier quadráticas e cúbicas?
Uma curva de Bézier quadrática tem grau \(2\) e usa três pontos de controle. Uma curva de Bézier cúbica tem grau \(3\) e usa quatro pontos de controle. Curvas cúbicas oferecem mais controle sobre a forma e são amplamente usadas em gráficos vetoriais e caminhos SVG.
Por que o comprimento da curva é aproximado?
O comprimento da maioria das curvas de Bézier não se reduz a uma fórmula exata conveniente. Uma forma prática de estimar o comprimento é amostrar a curva em muitos valores do parâmetro e somar as distâncias em linha reta entre amostras vizinhas. O resultado é útil, mas continua sendo uma aproximação numérica.
O que significa o resultado da velocidade?
Velocidade é o vetor derivada \(B'(t)\). Ele aponta na direção tangente e mostra a rapidez com que as coordenadas da curva mudam quando \(t\) muda. Não é uma velocidade do mundo real, a menos que \(t\) esteja associado ao tempo.
Por que as curvas quárticas e quínticas são exportadas de forma diferente das curvas quadráticas e cúbicas?
Os dados de caminho SVG têm comandos nativos para segmentos de curvas de Bézier quadráticos e cúbicos. Curvas quárticas e quínticas têm grau maior, por isso esta calculadora as representa como segmentos de reta amostrados ao exportar para SVG.
Esta calculadora funciona com NURBS ou curvas de Bézier racionais?
Não. Ela funciona com curvas de Bézier não racionais em uma grade de coordenadas bidimensional de \(0\) a \(100\). Pontos de controle ponderados, curvas racionais, NURBS e curvas tridimensionais estão fora do escopo compatível.
Fontes e referências
Livros
- Gerald Farin. Curves and Surfaces for CAGD: A Practical Guide. 5ª ed., Morgan Kaufmann, 2002. Capítulos e seções relevantes: interpolação linear, o algoritmo de De Casteljau, a forma de Bernstein, curvas de Bézier e fundamentos do projeto de curvas e superfícies. Página da editora: https://shop.elsevier.com/books/curves-and-surfaces-for-cagd/farin/978-1-55860-737-8
- Les Piegl e Wayne Tiller. The NURBS Book. 2ª ed., Springer, 1997. Capítulos e seções relevantes: fundamentos de curvas e superfícies, curvas de Bézier, polinômios de Bernstein, derivadas, curvas racionais e introdução a NURBS. Página da Springer: https://link.springer.com/book/10.1007/978-3-642-59223-2
Fontes on-line e oficiais
- Pomax. “A Primer on Bézier Curves.” Acesso em 27 de junho de 2026. Seções relevantes: polinômios de Bernstein, algoritmo de De Casteljau, derivadas, tangentes e normais e aproximação do comprimento de arco. https://pomax.github.io/bezierinfo/
- World Wide Web Consortium SVG Working Group. “Paths — SVG 2.” W3C, acesso em 27 de junho de 2026. Seções relevantes: dados de caminho, comandos de curvas de Bézier cúbicas, comandos de curvas de Bézier quadráticas e comandos de linha. https://www.w3.org/TR/SVG2/paths.html
- MDN Web Docs. “d - SVG.” Última atualização em 18 de dezembro de 2025; acesso em 27 de junho de 2026. Seções relevantes: dados de caminho SVG e comandos de caminho. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d