Ela foi desenvolvida em 1962 e seu nome é devido a quem primeiro publicou um trabalho sobre a curva, o francês Pierre Bézier, funcionário da...
Ela foi desenvolvida em 1962 e seu nome é devido a quem primeiro publicou um trabalho sobre a curva, o francês Pierre Bézier, funcionário da Renault, que a usou para o design de automóveis. Esse vídeo mostra, de maneira bem didática, como funciona esse recurso.
O conceito matemático da Curva de Bézier (ou Curvas Bézier, ou ainda Curvas de Casteljau em homenagem ao físico e matemático da Citröen que desenvolveu os algoritmos para essa família de curvas, em 1957) trata de uma forma muito versátil de caracterizar uma curva de forma que os computadores possam desenhá-la. O vídeo a seguir explica como elas funcionam de modo bem simples (em inglês). Logo abaixo, analisamos os principais pontos do vídeo para melhor entendimento.
Inicialmente usadas na indústria automobilística, pois são perfeitas para o design dos suaves contornos dos carros modernos, o conceito dessas curvas se tornou a base de todo o modelo gráfico do Adobe PostScript, sendo hoje largamente utilizado na maioria dos softwares de computação gráfica. Desta forma, tais curvas se tornaram familiares para qualquer usuário de programas de desenho vetorial.
A Curva de Bezier emprega no mínimo 3 pontos para sua definição, podendo chegar a “n” pontos de controle. Entretanto, sua forma mais comumente utilizada é a de terceira ordem, ou seja a curva cúbica de Bézier, que é definida por quatro pontos de controle.
Tais pontos são: 2 “endpoints” (também conhecidos como pontos âncoras, os "vectors points" da animação acima) e dois “control points” (pontos de controle, os "handle control points" no gráfico acima) que não passam pela curva, mas definem sua forma. A linha que une um ponto âncora ao seu ponto de controle corresponde à reta tangente a curva no ponto âncora, e, por isso, é ela que determina a declividade (ou derivada) da curva neste ponto. Esta forma de construção está ilustrada na figura a seguir.
A demonstração feita aqui considera uma curva cúbica de Bézier, isto é, utiliza quatro pontos-chave para sua definição (os dois "vector points" e os dois pontos de controle).
Três pontos imaginários (em verde, na animação) são levados em conta para processar a curva. Um ponto que vai da origem da curva até o primeiro ponto de controle. Outro que vai de primeiro ponto de controle até o segundo ponto de controle. E por fim, um que vai do segundo ponto de controle até o ponto final.
Todos percorrem suas trajetórias indo de 0% a 100% de completude, como um trem de ferro em seu trilho (onde não importa a distância, todos partem e chegam ao destino ao mesmo tempo). Como se formassem um triângulo, cujo lados relevantes estão representados na cor verde.
Dessa forma, o triângulo também se move, como um conjunto.
Outros dois pontos são igualmente importantes (em rosa), esses vão da origem ao destino de cada segmento de reta verde (que compõe o triângulo). Eles percorrem o trajeto indo, adivinhe, de 0% a 100%.
Ligando esses dois pontos temos uma reta que tangencia a curva que queremos desenhar.
Essa reta também percorre os pontos da curva indo de 0% a 100%.
O ponto onde a reta tangente toca a curva funciona como um lápis virtual que a desenhará.
Agora, colocando todo o modelo para funcionar, podemos entender como os pontos de controle conseguem determinar a curvatura a ser desenhada.
Dá vontade até de programar esse algoritmo só para ver tudo isso funcionando na prática. :D
Bem, o autor desse video-tutorial até já fez isso por nós (como parte de seu Mastering the bezier curve in sketch) usando JavaScript e HTML 5 na plataforma CodePen. O código pode ser estudado para se aprender mais sobre a parte da programação. A seguir, um exemplo de aplicação dessas curvas em um aplicativo gráfico.
Fontes:
Curvas de Bezier por Liane R. Maggioni Silva Antunes. Acessado em 03/10/2014.
Mastering the Bézier Curve in Sketch por Peter Nowell. Acessado em 03/10/2014.
Curva de Bézier - Wikipedia
Paul de Casteljau - Wikipedia
[Via BBA]
O conceito matemático da Curva de Bézier (ou Curvas Bézier, ou ainda Curvas de Casteljau em homenagem ao físico e matemático da Citröen que desenvolveu os algoritmos para essa família de curvas, em 1957) trata de uma forma muito versátil de caracterizar uma curva de forma que os computadores possam desenhá-la. O vídeo a seguir explica como elas funcionam de modo bem simples (em inglês). Logo abaixo, analisamos os principais pontos do vídeo para melhor entendimento.
Inicialmente usadas na indústria automobilística, pois são perfeitas para o design dos suaves contornos dos carros modernos, o conceito dessas curvas se tornou a base de todo o modelo gráfico do Adobe PostScript, sendo hoje largamente utilizado na maioria dos softwares de computação gráfica. Desta forma, tais curvas se tornaram familiares para qualquer usuário de programas de desenho vetorial.
A Curva de Bezier emprega no mínimo 3 pontos para sua definição, podendo chegar a “n” pontos de controle. Entretanto, sua forma mais comumente utilizada é a de terceira ordem, ou seja a curva cúbica de Bézier, que é definida por quatro pontos de controle.
 |
| GIF Animado |
Tais pontos são: 2 “endpoints” (também conhecidos como pontos âncoras, os "vectors points" da animação acima) e dois “control points” (pontos de controle, os "handle control points" no gráfico acima) que não passam pela curva, mas definem sua forma. A linha que une um ponto âncora ao seu ponto de controle corresponde à reta tangente a curva no ponto âncora, e, por isso, é ela que determina a declividade (ou derivada) da curva neste ponto. Esta forma de construção está ilustrada na figura a seguir.
 |
| Repare no segmento de reta tracejado entre os dois pontos de controle, ao final da animação. |
A demonstração feita aqui considera uma curva cúbica de Bézier, isto é, utiliza quatro pontos-chave para sua definição (os dois "vector points" e os dois pontos de controle).
 |
| GIF Animado |
Para construir uma curva vários elementos usados no algoritmo precisão percorrer valores entre 0% e 100%. Sendo que 0% de completude corresponde ao ponto inicial e 100% ao ponto final.
 |
| GIF Animado |
Três pontos imaginários (em verde, na animação) são levados em conta para processar a curva. Um ponto que vai da origem da curva até o primeiro ponto de controle. Outro que vai de primeiro ponto de controle até o segundo ponto de controle. E por fim, um que vai do segundo ponto de controle até o ponto final.
 |
| GIF Animado |
Todos percorrem suas trajetórias indo de 0% a 100% de completude, como um trem de ferro em seu trilho (onde não importa a distância, todos partem e chegam ao destino ao mesmo tempo). Como se formassem um triângulo, cujo lados relevantes estão representados na cor verde.
 |
| GIF Animado |
Dessa forma, o triângulo também se move, como um conjunto.
 |
| GIF Animado |
Outros dois pontos são igualmente importantes (em rosa), esses vão da origem ao destino de cada segmento de reta verde (que compõe o triângulo). Eles percorrem o trajeto indo, adivinhe, de 0% a 100%.
 |
| GIF Animado |
Ligando esses dois pontos temos uma reta que tangencia a curva que queremos desenhar.
 |
| GIF Animado |
Essa reta também percorre os pontos da curva indo de 0% a 100%.
 |
| GIF Animado |
O ponto onde a reta tangente toca a curva funciona como um lápis virtual que a desenhará.
 |
| GIF Animado |
Agora, colocando todo o modelo para funcionar, podemos entender como os pontos de controle conseguem determinar a curvatura a ser desenhada.
 |
| Não é elegante? |
Bem, o autor desse video-tutorial até já fez isso por nós (como parte de seu Mastering the bezier curve in sketch) usando JavaScript e HTML 5 na plataforma CodePen. O código pode ser estudado para se aprender mais sobre a parte da programação. A seguir, um exemplo de aplicação dessas curvas em um aplicativo gráfico.
Fontes:
Curvas de Bezier por Liane R. Maggioni Silva Antunes. Acessado em 03/10/2014.
Mastering the Bézier Curve in Sketch por Peter Nowell. Acessado em 03/10/2014.
Curva de Bézier - Wikipedia
Paul de Casteljau - Wikipedia
[Via BBA]
