Lucas Emanuel Resck Domingues, Introdução à Computação Gráfica
Escolha os parâmetros, clique para definir os pontos e pressione 'delete' para apagá-los.
Experimente mudar os parâmetros quando a curva já estiver desenhada :)
Este é um trabalho avaliado para a disciplina de Introdução à Computação Gráfica, do curso de Matemática Aplicada da Fundação Getulio Vargas.
Curvas de Bézier são amplamentes utilizadas em Computação Gráfica e design, devido à sua facilidade de aproximar praticamente qualquer forma geométrica. Por exemplo, as fontes utilizadas neste site estão definidas em curvas de Bézier. Porém, quando estamos lidando com circunferências, estas curvas conseguem apenas aproximá-las (HAN, 2009).
Neste trabalho, apresento uma solução já estudada na área da Matemática Aplicada, que são as curvas de Bézier cúbicas trigonométricas com dois parâmetros de forma. Elas conseguem representar de forma exata arcos de elipse (HAN, 2009).
Apresentarei uma breve definição das curvas de Bézier tradicionais. Após, entrarei em detalhes sobre as curvas de Bézier trigonométricas, enunciando o teorema de que essas curvas podem representar elipses. A metodologia de implementação, como código e algoritmo, também é apresentada. Ao final, os resultados e as considerações finais são discutidos.
Os resultados por si sós podem ser visualizados de forma imediata no topo desta página.
Dado \(n \in \mathbb{N}\), definimos polinômio de Bernstein: \[B_i^n(t) = {n \choose i} (1 - t)^{n - i} t^i, \space\space\space\space\space i=0,1,\cdots,n\]
Sejam os pontos \(P_i \in \mathbb{R}^2\), \(i=0,1,\cdots,n\). Sendo assim, uma curva de Bézier é uma curva \(P\) com parâmetro \(t\) definida por: \[\begin{equation*} \begin{aligned} P(t) &= \sum_{i=0}^{n} B_i^n(t) P_i \\ &=\sum_{i=0}^{n} {n\choose i} {(1 - t)}^{n - i} t^i P_i, \space\space\space\space\space t \in [0, 1] \end{aligned} \end{equation*}\] Dizemos que a curva \(P(t)\) tem grau \(n\) e pontos de controle \(P_i\). O polígono formado pelos pontos de controle é chamado polígono de controle.
Figura 1: Exemplo de curva de Bézier com grau 3.
Dados \(\lambda, \mu \in [-2, 1]\), definimos as funções base de curvas de Bézier cúbicas trigonométricas com parâmetros de forma \(\lambda\) e \(\mu\): \[\begin{cases} b_0(t) = \left(1-\sin \dfrac{\pi}{2}t\right)^2 \left(1 - \lambda \sin \dfrac{\pi}{2}t\right) \\ b_1(t) = \sin \dfrac{\pi}{2}t \left(1-\sin \dfrac{\pi}{2}t\right) \left(2 + \lambda - \lambda \sin \dfrac{\pi}{2}t\right) \\ b_2(t) = \cos \dfrac{\pi}{2}t \left(1-\cos \dfrac{\pi}{2}t\right) \left(2 + \mu - \mu \cos \dfrac{\pi}{2}t\right) \\ b_3(t) = \left(1-\cos \dfrac{\pi}{2}t\right)^2 \left(1 - \mu \cos \dfrac{\pi}{2}t\right) \end{cases}\]
Sendo assim, dados pontos \(P_i \in \mathbb{R}^2\), \(i = 0, 1, 2, 3\), definimos como curva de Bézier cúbica trigonométrica a curva \(r\) com parâmetro \(t\) dada por: \[r(t) = \sum_{i=0}^3 P_i b_i(t), \space\space\space\space\space t \in [0, 1], \lambda, \mu \in [-2,1]\]
Os parâmetros de forma \(\lambda\) e \(\mu\) têm uma certa interpretação. Observe que, se \(t \in (0, 1)\), podemos reescrever a curva como: \[r(t) = \sum_{i = 0}^3 P_i c_i(t) + \color{blue}\lambda\color{DarkSlateGrey} \sin \dfrac{\pi}{2}t \left(1 - \sin \dfrac{\pi}{2}t\right)^2 \color{blue}(P_1 - P_0)\color{DarkSlateGrey} + \color{red}\mu\color{DarkSlateGrey} \cos \dfrac{\pi}{2}t \left(1 - \cos \dfrac{\pi}{2}t\right)^2 \color{red}(P_3 - P_2)\color{DarkSlateGrey},\] \[\begin{cases} c_0(t) = \left(1 - \sin \dfrac{\pi}{2}t\right)^2 \\ c_1(t) = 2 \sin \dfrac{\pi}{2}t \left(1 - \sin \dfrac{\pi}{2}t\right) \\ c_2(t) = 2 \cos \dfrac{\pi}{2}t \left(1 - \cos \dfrac{\pi}{2}t\right) \\ c_3(t) = \left(1 - \cos \dfrac{\pi}{2}t\right)^2 \end{cases}\]
Assim, podemos perceber que, se \(\color{blue}\lambda\color{DarkSlateGrey}\) aumenta, a curva se move em direção à aresta de controle \(\color{blue}P_1 - P_0\color{DarkSlateGrey}\); se \(\color{blue}\lambda\color{DarkSlateGrey}\) diminui, a curva se move na direção contrária de \(\color{blue}P_1 - P_0\color{DarkSlateGrey}\). O análogo vale para \(\color{red}\mu\color{DarkSlateGrey}\).
Uma característica importante das curvas de Bézier trigonométricas é o fato de que é possível representar arcos de elipses, como o seguinte teorema enuncia:
Teorema: Sejam \(P_0\), \(P_1\), \(P_2\) e \(P_3\) pontos de controle de uma curva de Bézier trigonométrica: \[P_0 = (a, 0), \space\space\space\space\space P_1 = \left(a, \dfrac{b}{2}\right), \space\space\space\space\space P_2 = \left(\dfrac{a}{2}, b\right), \space\space\space\space\space P_3 = (0, b)\] Se \(\lambda = \mu = 0\), a curva é dada por \[r(t) = \left(a \cos \dfrac{\pi}{2}t, b \sin \dfrac{\pi}{2}t\right), \space\space\space\space\space t \in [0, 1]\] ou seja, um arco de elipse com semieixos \(a\) e \(b\).
Para visualizar o teorema, clique aqui.
Além da propriedade de representar arcos de elipses, é demonstrado que as curvas de Bézier trigonométricas se aproximam mais do polígono de controle do que as curvas de Bézier cúbicas tradicionais, para alguns valores de \(\lambda\) e \(\mu\).
O desenho das curvas foi possível a partir do seguinte algoritmo:
Para a animação do desenho das curvas foi estipulado um intervalo de tempo entre o desenho dos segmentos de reta.
O conteúdo desta página foi implementado em HTML, enquanto seu design está em CSS. Além disso, o desenho das curvas é realizado em SVG, e os cálculos relativos às curvas, às animações e aos sliders (que controlam os parâmetros) são feitos em Javascript.
O código foi majoritariamente implementado com o Visual Studio Code, utilizando o Git como ferramenta de versionamento. É utilizada a biblioteca Math.js para cálculos matemáticos, e os símbolos em Latex presentes no texto utilizam da biblioteca MathJax.
Os resultados podem ser observados interagindo com a janela de desenho das curvas, no topo da página. Ao plotar quatro pontos na janela, é realizada uma animação do desenho da curva. Pressionando a tecla 'delete', o desenho some.
Os sliders controlam os valores dos parâmetros \(\lambda\) e \(\mu\). É possível observar que, aumentando \(\lambda\), a curva se move em direção à aresta de controle \(P_1 - P_0\), por exemplo. Além disso, um efeito bem legal é ajustar os parâmetros quando a curva já está desenhada, pois é realizada uma animação que demonstra a variação da curva.
Clicando no texto em azul embaixo do teorema enunciado, surge uma animação que mostra o desenho de uma circunferência utilizando curvas de Bézier trigonométricas. Isso permite visualizar o fato de que essas curvas conseguem representar arcos de elipse muito bem.
O algoritmo implementado obteve sucesso no desenho da curva. Uma possibilidade de continuação do trabalho é a busca por curvas de Bézier trigonométricas de maior grau e sua implementação.
Pudemos observar que, realmente, as curvas trigonométricas são muito boas em representar elipses. Por este fato, além de que sua implementação é muito parecida com a curva tradicional, é sugerido (e às vezes desejado) substituir a curva tradicional pela trigonométrica.