Explorador de curvas de Bézier

Explore curvas de Bézier de forma interativa. Arraste os pontos de controle e veja a construção de De Casteljau.

A carregar a simulação interativa...

Nenhum ponto de controle intermediário é alcançado 🖖

Arraste um ponto de controle interior bem longe: a curva se inclina para lá, mas nunca chega. O peso de Bernstein de um ponto interior tem um teto rígido — nos exemplos cúbicos é b₁,₃(t) = 3t(1−t)², que atinge o máximo em t = 1/3 com valor de apenas 4/9. Já as extremidades carregam peso exatamente 1 em t = 0 e t = 1, e é por isso que a curva começa e termina precisamente sobre elas. Ao aumentar o grau, a influência interior encolhe ainda mais: no exemplo de grau 5 os tetos são 0,410 e 0,346. É por isso que designers encadeiam cúbicas curtas em vez de ajustar uma única curva de grau alto: quanto mais pontos de controle você adiciona, menos cada um consegue fazer.

Cortar cantos com médias repetidas 🖖

Por trás da curva suave há uma única operação humilde repetida sem parar: a média em linha reta de dois pontos. O algoritmo de De Casteljau pega seus pontos de controle, encontra o ponto a uma fração t de cada segmento de ligação e repete com os novos pontos até restar apenas um — esse é B(t). Arraste o controle deslizante e veja todo o andaime colapsar em um único ponto que traça a curva.

Batizada com o nome do inventor errado 🖖

O algoritmo que esta ferramenta anima foi criado por Paul de Casteljau na Citroën em 1959, três anos antes de Pierre Bézier publicar trabalho semelhante na Renault, a montadora rival. A Citroën tratou a pesquisa de De Casteljau como segredo industrial e a manteve inédita, então as curvas acabaram levando o nome de Bézier. Ambos os engenheiros moldavam a chapa de carros — a matemática das fontes e da animação nasceu no chão de fábrica.

CURVAS DE BÉZIER — O QUE OS PONTOS DE CONTROLE PODEM, E NÃO PODEM, IMPOR

Qual caso de Bézier você está desenhando?

Quantos pontos de controle você usa decide quais formas são sequer alcançáveis; onde você os coloca decide qual delas você obtém. Três pontos só conseguem traçar um pedaço de parábola: nem S, nem cúspide, nem laço, faça o que fizer com o do meio. Acrescente um quarto e os três passam a ser possíveis, separados por fronteiras que dá para calcular. As três cúbicas abaixo compartilham P0, P1 e P2 e diferem apenas em P3, exatamente o ponto que leva uma cúbica do laço, passando pela cúspide, até um S comum.

Quadrática — três pontos, e é sempre uma parábola κ ≠ 0 ∀t
Cúbica com inflexão — o S que uma quadrática não faz κ(0.5) = 0
Cúspide — onde a curva para de vez e volta atrás B′(0.5) = (0, 0)
Laço — um ponto, visitado duas vezes B(0.211) = B(0.789)
Grau 5 — mais pontos, menos controle min |B − P₃| = 134

01

Quadrática — três pontos, e é sempre uma parábola

O que você sabe: Três pontos de controle, grau 2. A curva sai de P0 apontando direto para P1 e chega a P2 vindo direto de P1, e esse único ponto do meio é toda a alavanca que você tem.

Como reconhecer: κ ≠ 0 ∀t

Exemplo resolvido: P0 (50, 250), P1 (250, 30), P2 (450, 250) → B(0,50) = (250, 140), exatamente na metade do caminho entre P1 e o ponto médio da corda (250, 250). A curva nunca chega a menos de 110 px de P1.

Abrir este caso: Quadrática
Quadrática — três pontos, e é sempre uma parábola. O vértice cai em (250, 140) — na metade do caminho entre o ponto de controle e a corda. Três pontos de controle, grau 2. A curva sai de P0 apontando direto para P1 e chega a P2 vindo direto de P1, e esse único ponto do meio é toda a alavanca que você tem.
O vértice cai em (250, 140) — na metade do caminho entre o ponto de controle e a corda.

02

Cúbica com inflexão — o S que uma quadrática não faz

O que você sabe: Quatro pontos de controle, grau 3, com P1 puxando acima da corda e P2 abaixo dela. A curva se dobra primeiro para um lado, depois para o outro.

Como reconhecer: κ(0.5) = 0

Exemplo resolvido: P0 (50, 250), P1 (150, 50), P2 (350, 250), P3 (450, 50) → o produto B′ × B″ cai em linha reta de positivo em t = 0 para negativo em t = 1, cruzando o zero em t = 0,50, de modo que a única inflexão fica exatamente em B(0,50) = (250, 150).

Abrir este caso: S cúbico
Cúbica com inflexão — o S que uma quadrática não faz. A curvatura cruza o zero em t = 0,50: a dobra se inverte em (250, 150). Quatro pontos de controle, grau 3, com P1 puxando acima da corda e P2 abaixo dela. A curva se dobra primeiro para um lado, depois para o outro.
A curvatura cruza o zero em t = 0,50: a dobra se inverte em (250, 150).

03

Cúspide — onde a curva para de vez e volta atrás

O que você sabe: Quatro pontos, com P1 e P2 lançados um por cima do outro de modo que as duas componentes da velocidade se esgotam no mesmo instante. Grau 3.

Como reconhecer: B′(0.5) = (0, 0)

Exemplo resolvido: P0 (100, 200), P1 (400, 50), P2 (100, 50), P3 (400, 200) → x′(t) = 900(1 − 2t)² e y′(t) = 450(2t − 1), então B′(0,50) = (0, 0). A curva alcança (250, 87,5), para, e sai na direção de onde tinha vindo.

Abrir este caso: Cúspide
Cúspide — onde a curva para de vez e volta atrás. B′(0,5) = (0, 0): o ponto que traça para em (250, 87,5) e volta atrás. Quatro pontos, com P1 e P2 lançados um por cima do outro de modo que as duas componentes da velocidade se esgotam no mesmo instante. Grau 3.
B′(0,5) = (0, 0): o ponto que traça para em (250, 87,5) e volta atrás.

04

Laço — um ponto, visitado duas vezes

O que você sabe: Exatamente os P0, P1 e P2 da cúspide, com P3 recuado de x = 400 para x = 280, de modo que o polígono de controle cruza a si mesmo de forma mais acentuada. Grau 3.

Como reconhecer: B(0.211) = B(0.789)

Exemplo resolvido: P0 (100, 200), P1 (400, 50), P2 (100, 50), P3 (280, 200) → B(t) = B(1 − t) em t = ½ ∓ √3/6, isto é t ≈ 0,211 e t ≈ 0,789, e ambos caem exatamente em (220, 125).

Abrir este caso: Laço cúbico
Laço — um ponto, visitado duas vezes. Dois parâmetros, um ponto: t ≈ 0,211 e t ≈ 0,789 dão os dois (220, 125). Exatamente os P0, P1 e P2 da cúspide, com P3 recuado de x = 400 para x = 280, de modo que o polígono de controle cruza a si mesmo de forma mais acentuada. Grau 3.
Dois parâmetros, um ponto: t ≈ 0,211 e t ≈ 0,789 dão os dois (220, 125).

05

Grau 5 — mais pontos, menos controle

O que você sabe: Seis pontos de controle, grau 5. Cada um deles tem peso diferente de zero em todo valor de t, então mexer em qualquer um muda a curva inteira.

Como reconhecer: min |B − P₃| = 134

Exemplo resolvido: Os seis pontos vão de y = 20 a 280, mas a curva só cobre y de 150 a 250, e nunca chega a menos de 134 px de P3 (300, 20). Em t = 0,5 os pesos são 0,031, 0,156, 0,313, 0,313, 0,156, 0,031 — todos os pontos contam, nenhum manda.

Abrir este caso: Grau 5
Grau 5 — mais pontos, menos controle. A curva nunca sobe acima de y = 150 enquanto seus próprios pontos de controle alcançam y = 20. Seis pontos de controle, grau 5. Cada um deles tem peso diferente de zero em todo valor de t, então mexer em qualquer um muda a curva inteira.
A curva nunca sobe acima de y = 150 enquanto seus próprios pontos de controle alcançam y = 20.
Referências (3)
  • The Bernstein basis and its weight bounds: Farouki, R. T. (2012). "The Bernstein polynomial basis: A centennial retrospective." Computer Aided Geometric Design 29(6), 379–419.
  • The algorithm the tool animates, and the naming: Farin, G. Curves and Surfaces for CAGD: A Practical Guide, 5th ed. Morgan Kaufmann, 2002 — de Casteljau’s algorithm, the convex-hull property and endpoint interpolation. ISBN 978-1-55860-737-8.
  • De Casteljau’s own account of the unpublished Citroën work: de Casteljau, P. (1999). "De Casteljau’s autobiography: My time at Citroën." Computer Aided Geometric Design 16(7), 583–586. No DOI is linked here because the record could not be resolved to one.

Problemas resolvidos na íntegra

  1. O ponto da curva em t = 0,50 que deixa de curvar para um lado 6 passos

    A cúbica na página tem os pontos de controlo P0 = (50, 250), P1 = (150, 50), P2 = (350, 250), P3 = (450, 50), num quadro de 500 × 300 com y medido para baixo. O painel apresenta o ponto da curva em t = 0,50. Mostre que este ponto é o único local onde a curva deixa de curvar num sentido e passa a curvar no outro.

    1. Em t = 1/2, os quatro pesos de Bernstein são 1/8, 3/8, 3/8, 1/8, pelo que os dois pontos interiores pesam três vezes mais do que as extremidades. Toda a aritmética reduz-se a isto: x = (50 + 450 + 1050 + 450)/8 e y = (250 + 150 + 750 + 50)/8.

    2. A curvatura é dada pela segunda derivada, e derivar uma cúbica duas vezes resulta numa expressão linear em t. Cada um dos dois vetores a partir dos quais é construída é uma segunda diferença de três pontos de controlo consecutivos.

    3. Calcule-os. Revelam-se iguais e opostos — um facto sobre o polígono de controlo, disponível antes de qualquer curva ser desenhada.

    4. Assim, a segunda derivada tem uma direção fixa, (100, 400), escalada por 1 − 2t. Ambas as suas componentes atingem 0 em t = 1/2, e em nenhum outro t no intervalo.

    5. Aceleração nula por si só não origina um ponto de inflexão; uma curva que para subitamente também a apresenta. Por isso, verifique a velocidade. É (450, 0): horizontal e categoricamente não nula, pelo que o ponto se desloca através da zona plana em vez de inverter a marcha nela.

    6. A curvatura tem o sinal de x′y″ − y′x″. Desenvolvendo os produtos, o parêntese simplifica-se — os dois termos dependentes de t cancelam-se dando a constante 3 — restando um numerador exatamente proporcional a 1 − 2t. Uma grandeza linear em t cruza o zero uma única vez, pelo que esta cúbica tem exatamente uma inflexão, que ocorre em t = 1/2.

    Resposta

    (250,0, 150,0) é a única inflexão da curva. A sua posição não é um acaso destes números em particular. A condição que anulou a segunda derivada, P3 − P2 = P1 − P0, reescreve-se como P0 + P3 = P1 + P2 = (500, 300) — e B(t) + B(1 − t) é ela própria uma Bézier cúbica, sobre os pontos de controlo invertidos e somados P0+P3, P1+P2, P2+P1, P3+P0. Os quatro são o mesmo ponto, pelo que essa soma é a constante (500, 300) para todo o t. Verifique-a a um quarto de volta: B(0,25) = (140,625, 162,5) e B(0,75) = (359,375, 137,5) somam exatamente isso. A curva é simétrica em relação ao ponto (250,0, 150,0), e uma forma que se mantém idêntica após meia volta em torno de um ponto não pode estar a curvar para nenhum dos lados nesse ponto. O polígono de controlo tracejado sustenta todo o argumento: o seu primeiro e último segmentos são o mesmo vetor, (100, −200), pelo que a inflexão se situa no ponto médio antes mesmo de a curva existir.

  2. Um canto traçado em B(0,50) por polinómios diferenciáveis 6 passos

    O estado de cúspide usa P0 = (100, 200), P1 = (400, 50), P2 = (100, 50), P3 = (400, 200), e o painel apresenta B(0,50) = (250,0, 87,5). Ambas as coordenadas são polinómios em t, pelo que o movimento é diferenciável tantas vezes quantas se pretender. Mostre que a forma por ele traçada apresenta, ainda assim, um canto nesse ponto.

    1. Os mesmos pesos de qualquer cúbica no parâmetro médio: 1/8, 3/8, 3/8, 1/8. x = (100 + 1200 + 300 + 400)/8 e y = (200 + 150 + 150 + 200)/8.

    2. A derivada de uma Bézier cúbica é construída a partir das três arestas do polígono de controlo, ponderadas pela base quadrática de Bernstein. Derivar nunca necessita dos pontos em si, apenas dos passos entre eles.

    3. Aqui, a aresta do meio aponta para trás. P1 − P0 e P3 − P2 empurram ambas para a direita, enquanto P2 − P1 empurra 300 para a esquerda — e a sua parte vertical é 0, pelo que não pode cancelar nada em y.

    4. Agrupando as componentes, ambas se reduzem a um único termo. A velocidade horizontal é um quadrado perfeito, pelo que nunca se torna negativa; a velocidade vertical é linear e muda de sinal. Ambas se anulam em t = 1/2, o que corresponde à paragem completa do ponto traçador.

    5. Uma paragem não é automaticamente um canto — a direção poderia sobreviver à pausa. Calculando a razão, esta tende para 0 por ambos os lados, pelo que a tangente se coloca na vertical à chegada e na vertical à saída, com y′ a inverter o sinal ao passar por ela. A direção inverte-se em 180°.

    6. Tal como sucede com a segunda derivada, a paragem é uma afirmação sobre o polígono. B′(1/2) resulta em três quartos de (P2 + P3) − (P0 + P1), que se anula exatamente quando o ponto médio da primeira aresta e o ponto médio da última aresta coincidem no mesmo ponto. Ambos são (250, 125).

    Resposta

    O ponto traçador para subitamente em (250,0, 87,5) e regressa a apontar no sentido oposto. Nada na parametrização é irregular — x(t) e y(t) são cúbicas, infinitamente diferenciáveis — e o traçado apresenta, ainda assim, um canto agudo, razão pela qual a continuidade de curvas é avaliada sob dois pontos de vista: C¹ exige que a velocidade seja contínua, G¹ exige que a direção o seja, e uma velocidade nula satisfaz o primeiro critério enquanto destrói o segundo. Há também uma consequência mensurável. Como y′ = 450(2t − 1) é negativo antes da paragem e positivo depois, y = 87,5 é o menor valor que a curva alguma vez toma, pelo que a cúspide é o ponto mais alto no ecrã e toda a curva fica contida abaixo dela. P1 e P2 encontram-se em y = 50; a curva aproxima-se até a uma distância de 37,5 deles e não mais, o que é o preço a pagar por puxar uma cúbica com apenas dois manípulos interiores.

Problemas de exemplo

  • Quadrática - Quadrática: grau 2, vértice em B(0,50) = (250, 140)
  • S cúbico - S cúbica: inflexão em B(0,50) = (250, 150)
  • Cúspide - Cúspide: a tangente se anula em B(0,50) = (250, 87,5)
  • Laço cúbico - Laço cúbico: uma curva de grau 3 que cruza a si mesma
  • Grau 5 - Grau 5 a partir de 6 pontos de controle