Geometria 2D

A geometria dos objetos gráficos usa linhas e outros conjuntos de pontos, como polígonos ou elipses.

O problema que se coloca aqui é saber como representar essas linhas, conjuntos de pontos, etc.

A representação dos objetos gráficos assenta na aplicação da matemática, em particular da Álgebra Linear e da Geometria Analítica, que proporcionam as definições formais (como ponto, plano, etc) e propriedades relevantes.

Neste capítulo vamos explorar a representação matemática das entidades geométricas:

Sistemas de coordenadas (ou Referenciais).
Equações para retas, circunferências e elipses.
Equações paramétricas.
Caminhos e formas «irregulares».

Referenciais

Referenciais

Referencial Cartesiano x Referencial Ecrã

Um referencial é a ferramenta matemática que permite representar numericamente espaços geométricos.

Uma vez escolhido um referencial, cada ponto do espaço fica identificado por uma lista de números: as coordenadas desse ponto.

Num espaço 2D as coordenadas têm duas componentes, (x, y) e no espaços 3D têm três componentes (x, y, z).

Podemos escolher diferentes referenciais para tratar problemas diferentes. Dois dos referenciais 2D mais comuns são:

O referencial cartesiano, normalmente usado na aulas de matemática.
O referencial do ecrã, normalmente usado em dispositivos gráficos;

Geometrias Primitivas

Algumas geometrias primitivas

Um retângulo e um círculo

Matematicamente, um objeto gráfico, como uma linha reta ou uma circunferência, é um conjunto de pontos.

Ingenuamente, poderíamos pensar em usar (digamos) listas com esses pontos. O problema é que mesmo os objetos gráficos mais simples são formados por infinitos pontos (quantos pontos existem numa linha?).

A solução para representar objetos gráficos consistem em usar equações.

Uma equação tem uma quantidade finita de informação que define um conjunto infinito de pontos.

Por exemplo $(x - 2)^{2} + (y + 1)^{2} = 9$ é um texto finito que define os infinitos pontos da circunferência de raio $3$ centrada em $(2, - 1)$ .

Consideremos as equações mais comuns:

Equações da Reta $A x + B y + C = 0$ ou $X = P + λ v$
Equação da Circunferência $(x - x_{0})^{2} + (y - y_{0})^{2} = R^{2}$
Equação da Elipse $(\frac{x - x _{0}}{a})^{2} + (\frac{y - y _{0}}{b})^{2} = 1$

Mas:

Quantos números são usados para representar uma reta? Quantos pontos estão nessa reta?
Porque não se usa, para as retas, a equação mais comum $y = m x + b$ ?
Ainda para a equação da reta, como é que se obtém a equação da reta que passa em dois pontos dados?
- Solução: Dados dois pontos $A = (x_{A}, y_{A})$ e $B = (x_{B}, y_{B})$ uma equação paramétrica da reta que passa em $A$ e $B$ é $X = A + λ (B - A) = (x_{A}, y_{A}) + λ (x_{B} - x_{A}, y_{B} - y_{A})$ Esta equação tem a seguinte propriedade conveniente: $X = A$ quando $λ = 0$ e $X = B$ quando $λ = 1$ .

As equações dadas acima não são a forma mais adequada de trabalhar com objetos gráficos para efeitos da computação gráfica.

Desafio. Como obter $100$ pontos da circunferência $x^{2} + y^{2} = 3$ ?

Com equações paramétricas, que indicam explicitamente as coordenadas $(x, y)$ dos pontos do objeto.

Para a reta: $X = P + t v \Rightarrow (x, y) = (P_{x}, P_{y}) + t (v_{x}, v_{y}) \Rightarrow {x y = P_{x} + t v_{x} = P_{y} + t v_{y}$
Para a circunferência: $(x - x_{0})^{2} + (y - y_{0})^{2} = R^{2} \Rightarrow {x y = x_{0} + R cos t = y_{0} + R sin t$
Para a elipse: $(\frac{x - x _{0}}{a})^{2} + (\frac{y - y _{0}}{b})^{2} = 1 \Rightarrow {x y = x_{0} + a cos t = y_{0} + b sin t$

Equações Paramétricas e Geometria

As equações paramétricas usam um parâmetro (nestes exemplos, a variável $t$ ) que imaginamos que está a percorrer um certo intervalo (digamos $[0, 2 π]$ ) num certo número de passos ( $100$ por exemplo).

Conforme $t$ vai tomando diferentes valores nesse intervalo, vamos também obtendo diferentes valores das coordenadas $(x, y)$ dos pontos que formam a geometria do objeto gráfico.

Uma circunferência desenhada parametricamente

Gerada pelo código abaixo

function parametric_circle(cx, cy, r) {
    return function(t) { return {
        x: cx + r * Math.cos(t),
        y: cy + r * Math.sin(t)
        };
    }
}
const ctx = document.getElementById("2d:geo:parametric").getContext("2d");
const my_circle = parametric_circle(128, 128, 64);
ctx.fillStyle = "steelblue";
const n = 64;
for (let t = 0; t <= n; t++) {
    const angle = t * 2 * Math.PI / n;
    p = my_circle(angle);
    ctx.fillRect(p.x - 2, p.y - 2, 4, 4);
};

Desafio. A equação paramétrica da reta tem um problema: O que acontece quando $B = 0$ ?

Caminhos

As equações permitem representar eficientemente formas «regulares», mas nem sempre existe uma forma «regular» adequada ao objeto que se pretende construir…

Os caminhos permitem definir formas «irregulares» que podem ser tratadas como "objetos básicos".

Uma geometria difícil de representar com equações

Gerada pelo código abaixo

<svg>
    <path
        fill="none"
        stroke="steelblue"
        stroke-width="4"
        stroke-linecap="round"
        fill-rule="evenodd"
        transform="translate(256,128)"
        d="
            M -200 0
            Q 0 -200 200 0
            Q 0 200 -200 0
            M -100 50
            L -100 -50
            L 100 50
            L 100 -50
            L -100 50
            Z
        "/>
</svg>

Pensamos num caminho como (o resultado d)as operações que fazemos com um lápis numa folha de papel:

traçar um contorno;
pintar o interior dum contorno;

Traçar o contorno dum caminho

Um contorno é formado por por vários segmentos. Cada segmento é traçado a partir do fim do segmento anterior, como um lápis numa folha de papel.

Tipos de segmentos curvos

Uma curva quadrática x uma curva cúbica

Há quatro tipos básicos de segmentos:

salto. O lápis salta para uma certa posição.
linha. O lápis desenha uma reta até uma certa posição.
curva quadrática. O lápis desenha uma curva, controlada por um ponto, até uma certa posição.
curva cúbica (ou bezier). O lápis desenha uma curva, controlada por dois pontos, até uma certa posição.

Exemplo da construção do contorno dum caminho, segmento-a-segmento

Pintar o interior dum caminho

Pintar o interior dum caminho (isto é, encher a zona delimitada pelo caminho) é uma tarefa surpreendentemente difícil.

Definido um caminho fechado, como determinar se um dado ponto está dentro ou fora da região delimitada pelo caminho?

Para responder a esta questão é usado um de dois algoritmos (regras) para encher um caminho:

A regra par-ímpar é mais simples e por isso menos controlável.
A regra não-zero é mais complexa do que a regra par-ímpar mas permite tirar partido da orientação dos segmentos para definir o interior do caminho.

Ambas as regras funcionam com base no seguinte princípio:

O retângulo é «varrido de cima para baixo» por linhas que «andam» da esquerda para a direita.
Em cada uma dessas linhas são calculados os pontos que intersectam o caminho.
É aplicada uma das regras para determinar quais segmentos limitados por esses pontos são interiores e quais são exteriores ao caminho.

Par-ímpar	Não-zero
	Os segmentos do caminho têm de ser orientados.
Os pontos de interseção são numerados da esquerda para a direita (a começar em zero).	Os pontos de interseção são:
	Positivos (azuis) se o segmento vem pela direita da linha.
	Negativos (vermelhos) se o segmento vem pela esquerda da linha.
Os segmentos interiores estão entre um ponto par (azul) e um ponto ímpar (vermelho).	Os segmentos interiores estão entre pontos com total acumulado não zero (estritamente positivo ou negativo).

Explore o código SVG sobre caminhos

<path id="thePath"
    d="
        M 50 50
        L 90 10
        Q 10 10 10 50
        L 50 50
        C 10 90 90 90 70 50
        Z" />

Explorar caminhos