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.

      B(12)=18(P0+3P1+3P2+P3)=(250.0, 150.0)\mathbf B(\tfrac12)=\tfrac18\left(P_0+3P_1+3P_2+P_3\right)=(250.0,\ 150.0)
    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.

      B′′(t)=6[(1−t)(P0−2P1+P2)+t(P1−2P2+P3)]\mathbf B''(t)=6\left[(1-t)(P_0-2P_1+P_2)+t(P_1-2P_2+P_3)\right]
    3. Calcule-os. Revelam-se iguais e opostos — um facto sobre o polígono de controlo, disponível antes de qualquer curva ser desenhada.

      P0−2P1+P2=(100, 400),P1−2P2+P3=(−100, −400)P_0-2P_1+P_2=(100,\ 400),\qquad P_1-2P_2+P_3=(-100,\ -400)
    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.

      B′′(t)=6(1−2t) (100, 400)⟹B′′(12)=(0, 0)\mathbf B''(t)=6(1-2t)\,(100,\ 400)\quad\Longrightarrow\quad \mathbf B''(\tfrac12)=(0,\ 0)
    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.

      B′(t)=(300(1+2t−2t2), −600(1−2t)2) ⟹ B′(12)=(450, 0)\mathbf B'(t)=\left(300(1+2t-2t^{2}),\ -600(1-2t)^{2}\right)\ \Longrightarrow\ \mathbf B'(\tfrac12)=(450,\ 0)
    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.

      x′y′′−y′x′′=(1−2t)[720000(1+2t−2t2)+360000(1−2t)2]=1.08×106 (1−2t)x'y''-y'x''=(1-2t)\left[720000(1+2t-2t^{2})+360000(1-2t)^{2}\right]=1.08\times10^{6}\,(1-2t)

    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.

    B′′(12)=3[(P3−P2)−(P1−P0)]=0  ⟺  P0+P3=P1+P2\mathbf B''(\tfrac12)=3\left[(P_3-P_2)-(P_1-P_0)\right]=0\iff P_0+P_3=P_1+P_2
  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.

    Abrir este problema na ferramenta

    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.

      B(12)=18(P0+3P1+3P2+P3)=(250.0, 87.5)\mathbf B(\tfrac12)=\tfrac18\left(P_0+3P_1+3P_2+P_3\right)=(250.0,\ 87.5)
    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.

      B′(t)=3[(1−t)2(P1−P0)+2(1−t)t (P2−P1)+t2(P3−P2)]\mathbf B'(t)=3\left[(1-t)^{2}(P_1-P_0)+2(1-t)t\,(P_2-P_1)+t^{2}(P_3-P_2)\right]
    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.

      P1−P0=(300, −150),P2−P1=(−300, 0),P3−P2=(300, 150)P_1-P_0=(300,\ -150),\quad P_2-P_1=(-300,\ 0),\quad P_3-P_2=(300,\ 150)
    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.

      x′(t)=900(1−2t)2,y′(t)=450(2t−1) ⟹ B′(12)=(0, 0)x'(t)=900(1-2t)^{2},\qquad y'(t)=450(2t-1)\ \Longrightarrow\ \mathbf B'(\tfrac12)=(0,\ 0)
    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°.

      x′(t)y′(t)=2(2t−1) → t→12  0\frac{x'(t)}{y'(t)}=2(2t-1)\ \xrightarrow[\ t\to\frac12\ ]{}\ 0
    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).

      B′(12)=34[(P2+P3)−(P0+P1)]=34[(500,250)−(500,250)]\mathbf B'(\tfrac12)=\tfrac34\left[(P_2+P_3)-(P_0+P_1)\right]=\tfrac34\left[(500,250)-(500,250)\right]

    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.

    B′(12)=0  ⟺  12(P0+P1)=12(P2+P3)=(250, 125)\mathbf B'(\tfrac12)=0\iff \tfrac12(P_0+P_1)=\tfrac12(P_2+P_3)=(250,\ 125)