Free Press

As curvas Bezier são usadas em computação gráfica para desenhar formas, para animação CSS e em muitos outros lugares.

São uma coisa muito simples, vale a pena estudar uma vez e depois sentir-se confortável no mundo dos gráficos vetoriais e animações avançadas.

Pontos de controle

Uma curva bezier é definida por pontos de controle.

Pode haver 2, 3, 4 ou mais.

Por exemplo, curva de dois pontos:

Curva de três pontos:

Curva de quatro pontos:

Se você olhar atentamente para estas curvas, você pode notar imediatamente:

1. Pontos nem sempre estão em curva. Isso é perfeitamente normal, mais tarde veremos como a curva é construída.

2. A ordem da curva é igual ao número de pontos menos um. Para dois pontos temos uma curva linear (que é uma recta), para três pontos – curva quadrática (parabólica), para quatro pontos – curva cúbica.

3. Uma curva está sempre dentro do casco convexo dos pontos de controle:

   

Por causa dessa última propriedade, em computação gráfica é possível otimizar os testes de interseção. Se os cascos convexos não se intersectam, então as curvas também não o fazem. Portanto, verificar primeiro a intersecção dos cascos convexos pode dar um resultado muito rápido de “sem intersecção”. Verificar a intersecção dos cascos convexos é muito mais fácil, porque são rectângulos, triângulos e assim por diante (veja a figura acima), figuras muito mais simples que a curva.

O valor principal das curvas Bezier para desenho – movendo os pontos a curva está mudando de forma intuitivamente óbvia.

Tente mover os pontos de controle usando o mouse no exemplo abaixo:

Como você pode notar, a curva se estende ao longo das linhas tangenciais 1 → 2 e 3 → 4.

Depois de alguma prática torna-se óbvio como colocar os pontos para obter a curva necessária. E ligando várias curvas podemos obter praticamente tudo.

Aqui estão alguns exemplos:

O algoritmo deDe Casteljau

Existe uma fórmula matemática para as curvas de Bezier, mas vamos cobri-la um pouco mais tarde, porque o algoritmo deDe Casteljau é idêntico à definição matemática e mostra visualmente como é construída.

Primeiro vamos ver o exemplo dos 3 pontos.

Aqui está a demonstração, e a explicação segue.

Pontos de controle (1,2 e 3) podem ser movidos pelo mouse. Pressione o botão “play” para executá-lo.

O algoritmo de Casteljau de construir a curva bezier de 3 pontos:

1. Pontos de controle do desenho. Na demonstração acima eles são etiquetados: 1, 2, 3.

2. Segmentos de desenho entre os pontos de controlo 1 → 2 → 3. Na demonstração acima são castanhos.

3. O parâmetro t move-se de 0 para 1. No exemplo acima é utilizado o passo 0.05: o laço passa por 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Para cada um destes valores de t:

   • Em cada segmento castanho tomamos um ponto localizado na distância proporcional a t desde o seu início. Como existem dois segmentos, temos dois pontos.

     Por exemplo, para t=0 – ambos os pontos estarão no início dos segmentos, e para t=0.25 – nos 25% do comprimento do segmento desde o início, para t=0.5 – 50%(o meio), para t=1 – no fim dos segmentos.

   • Conecte os pontos. Na figura abaixo o segmento de ligação está pintado de azul.

Para t=0.25	Para t=0.5

1. Agora no segmento azul tomar um ponto na distância proporcional ao mesmo valor de t. Ou seja, para t=0.25 (a figura da esquerda) temos um ponto no final do quarto esquerdo do segmento, e para t=0.5 (a figura da direita) – no meio do segmento. Nas figuras acima desse ponto é vermelho.

2. As t corre de 0 a 1, cada valor de t adiciona um ponto à curva. O conjunto de tais pontos forma a curva de Bezier. É vermelha e parabólica nas figuras acima.

Foi um processo para 3 pontos. Mas o mesmo é para 4 pontos.

A demo para 4 pontos (pontos podem ser movidos por um mouse):

O algoritmo para 4 pontos:

• Conectar pontos de controle por segmentos: 1 → 2, 2 → 3, 3 → 4. Haverá 3 segmentos castanhos.
• Para cada t no intervalo de 0 a 1:
  • Temos pontos nestes segmentos na distância proporcional a t desde o início. Estes pontos estão ligados, de modo que temos dois segmentos verdes.
  • Nestes segmentos tomamos pontos proporcionais a t. Temos um segmento azul.
  • No segmento azul tomamos um ponto proporcional a t. No exemplo acima é vermelho.
• Estes pontos juntos formam a curva.

O algoritmo é recursivo e pode ser generalizado para qualquer número de pontos de controlo.

Dado N de pontos de controlo:

1. Conectamo-los para obter inicialmente N-1 segmentos.
2. Então para cada t de 0 a 1, pegamos num ponto em cada segmento na distância proporcional a t e ligamo-los. Haverá segmentos N-2.
3. Repetir o passo 2 até que haja apenas um ponto.

Estes pontos fazem a curva.

Exemplos de execução e pausa para ver claramente os segmentos e como a curva é construída.

Uma curva que se parece com y=1/t:

Pontos de controlo de zig-zag também funcionam bem:

Fazer um loop é possível:

Uma curva Bezier não suave (sim, isso também é possível):

Se houver algo obscuro na descrição do algoritmo, por favor olhe para os exemplos acima para ver como a curva é construída.

Como o algoritmo é recursivo, podemos construir curvas Bezier de qualquer ordem, ou seja: usando 5, 6 ou mais pontos de controle. Mas na prática muitos pontos são menos úteis. Normalmente tomamos 2-3 pontos, e para linhas complexas colamos várias curvas juntas. Isso é mais simples de desenvolver e calcular.

Math

Uma curva Bezier pode ser descrita usando uma fórmula matemática.

Como vimos – na verdade não há necessidade de saber, a maioria das pessoas apenas desenha a curva movendo pontos com o mouse. Mas se você gosta de matemática – aqui está.

Dadas as coordenadas dos pontos de controle Pi: o primeiro ponto de controle tem coordenadas P1 = (x1, y1), o segundo: P2 = (x2, y2), e assim por diante, as coordenadas da curva são descritas pela equação que depende do parâmetro t do segmento .

• A fórmula para uma curva de 2 pontos:

  P = (1-t)P1 + tP2

• Para 3 pontos de controlo:

  >P = (1−t)2P1 + 2(1−t)tP2 + t2P3

• Para 4 pontos de controlo:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Estas são equações vectoriais. Em outras palavras, podemos colocar x e y em vez de P para obter as coordenadas correspondentes.

Por exemplo, a curva de 3 pontos é formada por pontos (x,y) calculados como:

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

Em vez de x1, y1, x2, y2, x3, y3 devemos colocar coordenadas de 3 pontos de controlo, e depois como t passa de 0 para 1, para cada valor de t teremos (x,y) da curva.

Por exemplo, se os pontos de controlo forem (0,0), (0.5, 1) e (1, 0), as equações passam a ser:

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t

Agora como t passa de 0 para 1, o conjunto de valores (x,y) para cada t forma a curva para tais pontos de controlo.

Resumo

As curvas Bezier são definidas pelos seus pontos de controlo.

Vimos duas definições de curvas Bezier:

1. Usando um processo de desenho: O algoritmo de Casteljau.
2. Usando uma fórmula matemática.

Bom propriedades das curvas de Bezier:

• Podemos desenhar linhas suaves com o rato movendo os pontos de controlo.
• Formas complexas podem ser feitas de várias curvas Bezier.

Utilização:

• Em computação gráfica, modelagem, editores gráficos vetoriais. As fontes são descritas pelas curvas Bezier.
• Em desenvolvimento web – para gráficos em Canvas e no formato SVG. A propósito, os exemplos “ao vivo” acima são escritos em SVG. Na verdade, eles são um único documento SVG que recebe pontos diferentes como parâmetros. Você pode abri-lo em uma janela separada e ver a fonte: demo.svg.
• Em animação CSS para descrever o caminho e a velocidade da animação.