1

Universidade Federal de Santa Maria

Departamento de Eletrnica e Computao
Prof. Cesar Tadeu Pozzer
Disciplina: Computao Grfica
pozzer@inf.ufsm.br
9/06/2011


Computao Grfica 2D



1 Transformaes 2D Afins


Uma transformao afim mantm o paralelismo de retas. So exemplos a translao, escala, rotao,
reflexo e cisalhamento. A projeo em perspectiva no uma transformao afim. O mesmo vale para
transformaes de tapering, twist e bend [4].

Transformaes afins envolvendo rotaes, translaes e reflexes preservam ngulos e comprimentos, da
mesma forma como linhas paralelas. Para estas trs transformaes, comprimentos e ngulos entre duas
linhas permanecem o mesmo aps a transformao [2].

Utiliza-se matrizes para representar transformaes. Ver seo de Matrizes.


Translao

Definida pela soma de fatores de translao t
x
e t
y
as coordenadas x e y do ponto. uma soma de matrizes

x = x + T
x

y = y + T
y


P = P + T
(

=
y
x
P
(

=
'
'
'
y
x
P
(

=
y
x
T
T
T
(

+
+
=
(

+
(

=
y
x
y
x
T y
T x
T
T
y
x
P'

Escala

Definida pela multiplicao de fatores de escala S
x
e S
y
as coordenadas do ponto. representada por uma
multiplicao de matrizes.
x = x * S
x

y = y * S
y


P T P = '

(

=
y
x
P
(

=
'
'
'
y
x
P
(

=
y
x
S
S
T
0
0

(

=
(

=
y
x
y
x
yS
xS
y
x
S
S
P
0
0
'


2
Se S
x
> 1 aumenta o tamanho do objeto
S
x
< 1 diminui o tamanho do objeto
S
x
= 1 mantm o tamanho
S
x
= S
y
= n escala uniforme

OBS: a escala pode mudar a posio do objeto. Depende do referencial.








Reflexo

x = -x
y = y

P T P = '

(

=
y
x
P
(

=
'
'
'
y
x
P
(

=
1 0
0 1
T
(

=
(

=
y
x
y
x
P
1 0
0 1
'


Cisalhamento

Transformao que distorce o formato do objeto. Aplica-se um deslocamento aos valores das coordenadas x
ou y do objeto proporcional ao valor das outras coordenadas de cada ponto transformado.

x = x + Sy*y
y = y

(

=
y
x
P
(

=
'
'
'
y
x
P
(

=
1 0
1
y
S
T

P T P = '
(

+
=
(

=
y
y S x
y
x S
P
y y
1 0
1
'


Rotao

Rotacionar um vetor significa mudar sua direo segundo algum eixo de rotao. Para um vetor
bidimensional, ou seja, paralelo ao plano xy, significa reposicion-lo sobre um caminho circular, como
ocorre com o movimento dos ponteiros de um relgio. O eixo de rotao um vetor perpendicular ao plano
xy e passa pelo centro de rotao. A rotao especificada por um ngulo (Coordenadas Polares)
Valores positivos de geram uma rotao no sentido anti-horrio. Neste exemplo, considera-se que o centro
de rotao a origem do sistema de coordenadas.



3










Rotao de um vetor da posio (x,y) para a posio (x, y) segundo um ngulo relativo origem do
sistema de coordenadas.


Em uma rotao, a norma r do vetor permanece inalterada. Usando identidades trigonomtricas, pode-se
expressar as coordenadas transformadas em termo dos ngulos e .



cos sin sin cos ) sin( '
sin sin cos cos ) cos( '
r r r y
r r r x
+ = + =
= + =


As coordenadas iniciais do vetor em coordenadas polares so

sin
cos
r y
r x
=
=


Substituindo na expresso anterior temos



cos sin '
sin cos '
y x y
y x x
+ =
=


Usando-se uma notao matricial, tem-se

RP P = '
(

=
y
x
P


cos sin
sin cos
'

Vetor Perpendicular

Dado um vetor P, para encontrar um vetor Q, perpendicular a P (que forma um ngulo de 90 em sentido
anti-horrio), usa-se a seguinte frmula:

=
x y
P P Q
Esta frmula pode ser demonstrada utilizando-se a notao matricial genrica para rotaes sobre um eixo:
(

=
y
x
P
P
Q
) 90 cos( ) 90 sin(
) 90 sin( ) 90 cos(

| | | |
x y y x y x
y
x
P P P P P P
P
P
Q = + =
(

= 0 1 1 0
0 1
1 0


Deve-se observar que existem dois vetores perpendiculares em um espao 2D. Para um vetor em trs
dimenses, a determinao de um vetor perpendicular mais vaga. Podem existir infinitos vetores


(x, y)
(x, y)
r
r
x
y
4
perpendiculares (qualquer vetor no plano perpendicular ao vetor P). Em um plano 3D existem 2 vetores
perpendiculares.


Coordenadas Homogneas

Todas as transformaes apresentadas, exceto a translao so representadas como multiplicaes de
matrizes. Como ser visto na seqncia, comum fazer a combinaes de vrias transformaes em uma
nica matriz. Como a translao est presente em quase todas as transformaes, fundamental que ela
possa ser representada por meio de multiplicao de matrizes. Para isso introduziu-se o conceito de
coordenadas homogneas.

Consiste em adicionar mais uma dimenso matriz. Cada ponto 2D representado por (x,y,h). Caso o valor
de h no seja 1, deve-se dividir cada componente do vetor por h. Assim, o ponto (2, 3, 6) e (4, 6, 12)
representam a mesma informao

( ) |

\
|
= 1
h
y
h
x
h y x

Este processo chamado de homogenizao. Neste caso, x/h e y/h so as coordenadas cartesianas do ponto
homogneo.

A terceira coordenada do ponto pode ser interpretada geometricamente como um plano h=1 no R
3
, como
mostrado na figura. O ponto P=(x/h, y/h) a projeo do ponto P(x, y, h) no plano h=1. Desta forma,
qualquer mltiplo do ponto P homogneo representa o mesmo ponto.

















Fazendo uso de coordenadas homogneas, a translao definida como

P = TP

(
(
(

=
1
y
x
P
(
(
(

=
1
'
'
' y
x
P
(
(
(

=
1 0 0
1 0
0 1
y
x
T
T
T
(
(
(

+
+
=
(
(
(

(
(
(

= =
1 1 1 0 0
1 0
0 1
'
y
x
y
x
T y
T x
y
x
T
T
TP P

Escala:
P S P = '
Plano h=1
h
x
y
P = (x, y, h)
x/h
y/h
5

(
(
(

=
1
y
x
P
(
(
(

=
1
'
'
' y
x
P
(
(
(

=
1 0 0
0 0
0 0
y
x
S
S
S
(
(
(

=
(
(
(

(
(
(

= =
1 1 1 0 0
0 0
0 0
'
y
x
y
x
yS
xS
y
x
S
S
SP P


Rotao:

(
(
(

=
(
(
(

(
(
(

=
1
cos sin
sin cos
1 1 0 0
0 cos sin
0 sin cos
'



y x
y x
y
x
P


Matrizes em Transformaes Geomtricas


Matriz Ortogonal

Uma matriz quadrada A ortogonal se MM
T
= I. Portanto, se M ortogonal ento

M
-1
= M
T


Uma outra conseqncia que se M ortogonal ento det M igual a 1 ou -1.

Propriedades:
- Se A e B so ortogonais ento C = AB tambm ortogonal.
- Se A ortogonal ento A
-1
tambm ortogonal.

Uma matriz dita dita ortonormal se o comprimento de cada linha ou coluna, tomados como vetores, tem
comprimento 1 (normalizado). Esses vetores tambm so mutuamente ortogonais (formam um ngulo de
90
o
cada (perpendiculares) ver definio de produto interno/escalar).

Teorema: Se M uma matriz ortogonal, ento M preserva comprimentos e ngulos. [1]

Uma vez que matrizes ortonormais preservam ngulos e comprimentos, elas preservam a estrutura geral do
sistema de coordenadas. Deste modo, podem apenas representar combinaes de rotaes e reflexes.
Matrizes de translao no so ortonormais.


(
(
(

=
1 0 0
0 cos sin
0 sin cos


R

| |
0
45 , sin cos = = V
2 2
) sin ( cos + = V
2 2
) 707 . 0 ( 707 . 0 + = V
1 1 5 . 0 5 . 0 = = + = V

| | cos sin = V
| | sin cos = V
6


(
(
(

=
1 0 0
0 1 0
0 0 1
R



(
(
(

=
1 0 0
0 cos sin
0 sin cos


R
(
(
(

= =

1 0 0
0 cos sin
0 sin cos
1


T
R R


Combinaes de Transformaes

Quando se deseja aplicar vrias transformaes a vrios pontos, ao invs aplicar vrias transformaes a
cada ponto, pode-se combinar todas as transformaes em uma nica matriz e ento aplicar esta matriz
resultante aos pontos do objeto, reduzindo-se assim o custo computacional.

Este processo chamado de concatenao de matrizes, e executado multiplicando-se as matrizes que
representam cada transformao.

OBS: a multiplicao de matrizes no comutativa, porm associativa.
ABBA (no comutativa)
A(BC) = (AB)C (associativa)
(FG)
T
= G
T
F
T


OBS: Deve-se observar a terceira propriedade: (FG)
T
= G
T
F
T
. Ou seja, a forma como a multiplicao
aplicada indica na ordem que os elementos devem estar dispostos.


A seguinte matriz representa a concatenao de uma translao seguida de uma rotao. A rotao deve
vir antes na multiplicao.

RTP P = ' (Concatenao Correta)
(
(
(

(
(
(

(
(
(

=
1 1 0 0
1 0
0 1
1 0 0
0 cos sin
0 sin cos
' y
x
T
T
P
y
x



(
(
(

(
(
(

+

=
1 1 0 0
cos sin cos sin
sin cos sin cos
' y
x
T T
T T
P
y x
y x





TRP P = ' (errado)

(
(
(

(
(
(

(
(
(

=
1 1 0 0
0 cos sin
0 sin cos
1 0 0
1 0
0 1
' y
x
T
T
P
y
x



| | 1 0 = V
| | 0 1 = V
7
(
(
(

(
(
(

=
1 1 0 0
cos sin
sin cos
' y
x
T
T
P
y
x




Observa-se que a transformao TRPRTP e que (FG)
T
= G
T
F
T
.

Considerando-se P como P
T
, R como R
T
e T como T
T
, temos:

T T T
R T P P = '

| |
(
(
(

(
(
(

=
1 0 0
0 cos sin
0 sin cos
1
0 1 0
0 0 1
1 '

y x
T T
y x P

| |
(
(
(

+
=
1 cos sin sin cos
0 cos sin
0 sin cos
1 '



y x y x
T T T T
y x P



No seguinte exemplo deseja-se aplicar uma rotao sobre o eixo do retngulo, ou seja, uma rotao no
sistema de coordenadas local do objeto. Para isso, deve-se fazer uma mudana de sistema, ou seja, levar a
origem (piv) do sistema de coordenadas do objeto para a origem do sistema de coordenadas do mundo,
aplicar a rotao, e transladar o objeto para seu sistema de coordenadas.










Neste tipo de aplicao, necessrio fazer transformaes diretas e inversas, ou seja, deve-se aplicar uma
matriz de transformao T e em seguida a sua inversa T
-1
. O clculo de matrizes inversas complexo, porm
fcil determinar matrizes inversas de transformaes geomtricas.

No caso da rotao, por ser uma matriz ortonormal, sua inversa de R() a transposta (o mesmo vale para
matrizes de reflexo), o que equivalente a R(-).

No caso de uma matriz de translao T = [T
x
T
y
1]
T
, T
-1
dada por T
-1
=[-T
x
-T
y
1]
T
.

Para uma matriz de escala S = [S
x
S
y
1]
T
, S
-1
= [1/S
x
1/S
y
1]
T



Assim, para o exemplo anterior temos a seguinte matriz M que representa a concatenao de matrizes de
transformao:

M = TRT
-1
Sistema de
coordenadas
local
8
(
(
(

(
(
(

(
(
(

=
1 0 0
1 0
0 1
1 0 0
0 cos sin
0 sin cos
1 0 0
1 0
0 1
y
x
y
x
T
T
T
T
M



onde T
x
e T
y
representam as coordenadas do sistema de coordenadas do objeto em relao ao sistema de
coordenadas do mundo.

No caso de rotaes sucessivas em um mesmo eixo

P= R(
1
)R(
2
)P

Por serem aditivas, a composio das duas rotaes pode ser dada por

P= R(
1
+
2
)P

Outros exemplos:
Escala sem alterar a posio do objeto
Rotao em um eixo arbitrrio
Rotaes consecutivas no mesmo eixo
Rotaes consecutivas em diferentes eixos


Implementao de Transformaes

Como ilustrado no exemplo anterior, em muitas situaes necessrio aplicar (concatenar) vrias
transformaes, incluindo rotao, escala e translaes. Neste caso, para criar a matriz de rotao final M
deve-se multiplicar vrias matrizes.

Antes de partir para uma implementao direta, deve-se observar como a API OpenGL faz para trabalhar
com matrizes de transformao. Ele define uma nica matriz global, que atualizada a cada chamada de
comandos glRotate(), glTranslate(), glScale(). A matriz corrente ento multiplicada pela nova matriz
correspondente a transformao chamada. O seguinte cdigo em C++ ilustra como criar uma classe para
gerenciar a matriz de transformao.

Class Matrix
{
float m[3][3]; //em coordenadas homogneas
public:
Matrix();
void operator *(Matrix m); //multiplica por outra matriz
void loadIdentity(); //carrega matriz identidade
void rotate(float ang); //concatena matriz de rotao
void translate(float dx, float dy); //concatena matriz de translao
void scale(float sx, float sy); //concatena matriz de escala
Vector operator*(Vector v); //multiplica um ponto v pela matriz
void push(); //empilha matriz (duplica o valor do topo)
void pop(); //desempilha matriz (remove o topo da pilha)
}

Na prtica, ao invs de ter uma nica matriz, o OpenGL define uma pilha de matrizes de transformao, cuja
posio topo pode ser modificada pelas funes glPushMatrix() e glPopMatrix(). Esse recurso
extremamente til quando se tem em uma mesma cena um objeto que sofre movimentao relativa a outro
objeto. Como exemplo, pode-se ter um carro que est em cima de um navio. Quando o navio se move, o
veculo sofre a mesma transformao, porm nada impende que o veculo ande sobre o navio j em
movimento.

9

Outros usos das transformaes de Escala e Translao

Muitas vezes necessrio fazer a transformao de dados para um correto processamento ou exibio em
um dispositivo.

Exemplo 1:
Considere por exemplo que seja necessrio armazenar vetores de dados sinalizados em vetores no
sinalizados. Considerando um tipo char, em um intervalo sinalizado temos valores entre [-128, 127].
Aplicando-se uma translao nos valores de 128, temos os valores no intervalo [0, 255]. Adicionalmente
pode-se aplicar uma escala nos valores, por exemplo, de 0.5, para transformar os valores no intervalo [0,
128]. O processo inverso pode ser usado para levar os valores ao intervalo original.

Exemplo 2:
Suponha que se deseje desenhar na tela um crculo paramtrico (em coordenadas esfricas). As funes seno
e cosseno geram valores entre [-1. 1]. Na tela, tem-se, por exemplo, valores entre [0, 1024]. Para se desenhar
um crculo em tela cheia, deve-se fazer as seguintes transformaes:
- translao em 1 para levar o intervalo entre [0, 2]
- escala em 512 para levar o intervalo entre [0, 1024]



2 Primitivas Grficas 2D


Formas de Representao de primitivas:
Analtica (funo):
o Gasta menos espao
o Maior preciso (resoluo)
o Facilidade para calculo de pontos intermedirios
o Representao de Figuras vetoriais.
o Ex: MS Word.
Discreta (pontos/pixels - Amostragem)
o Usado para fazer a representao grfica em dispositivos, como monitores ou impressoras.
o Representaes poligonais.
o Ex: Modelos de personagens em jogos 3D, imagens BMP, arquivo de impresso, figuras na
tela do computador



















Analtica Discreta
Discretizao
amostragem
Interpolao
Reconstruo
Representao discreta e
analtica de um crculo

Erro de reconstruo
10
Representao analtica:
1. Paramtrica: cada coordenada de um ponto representado como uma funo de um nico
parmetro.
2. No Paramtrica
a. Explcita y = mx + b
para cada x, obtm-se apenas 1 valor de y. Ex: retas, senoides, etc.
b. Implcita x
2
+ y
2
= r
2

para cada x, obtm-se 2 valores para y. Pode ser usado para representar crculos.

Linha

Usos
Geralmente disponibilizado em APIs (Java, OpenGL, Directx, etc)
Representao paramtrica ou por funo


Representao por funo Explcita

y = mx + b
m = inclinao da reta
b = interseo com o eixo y.

1 2
1 2
x x
y y
x
y
m

=
1 1
mx y b =
m
y
x x m y

= = ,


Algoritmo DDA (Digital Differiential Analyser)

1 0 ,
1
< < + =
+
m m y y
k k

1 ,
1
1
> + =
+
m
m
x x
k k


Algoritmo DDA

dx = x2 - x1
dy = y2 - y1
if (|dx| > |dy|)
steps = |dx|
else
steps = |dy|
incx = dx/steps
incy = dy/steps

pixel(x1, y1)
for(k=0; k< steps; k++)
{
x += incx;
y += incy
pixel(x, y)
}


(x
1
,y
1)
(x
2
,y
2)
11
Representao Paramtrica

x = x(t)
y = y(t)
P(t) = (x(t), y(t))

1 0 ), ( ) (
1 2 1
+ = t P P t P t P (Uma multiplicao)
1 2 1
) ( tP tP P t P + =
2 1
) 1 ( ) ( tP P t t P + = (Duas multiplicaes)

ou

0 , ) (
0
+ = t tV P t P (representao de um raio)

se t=0, P(t) = P
1

se t=1, P(t) = P
2

se t=0.5, P(t) = 0.5P
1
+ 0.5P
2




Independente da representao, deve-se observar que quando a linha representada graficamente por um
conjunto de pontos amostrados.
Dependendo da resoluo do dispositivo, pode ser visvel a formao de bordas dentadas (Alias).
Uma soluo para evitar este problema, espacialmente em monitores onde a resoluo menor que
100 DPI, deve-se utilizar algum algoritmo de anti-aliasing.
Na seguinte figura ilustrado como um algoritmo de anti-aliasing pode ser usado para gerar linhas que se
paream mais suaves.
Faz uso de pixels com intensidades diferentes, dependendo de sua rea de projeo sobre a linha.
Pixels que so cobertos pela linha tem cor mais escura e pixels que so parcialmente cobertos pela
linha tem cor mais clara.














Crculo

Funo implcita do crculo
2 2 2
r y x = +
2 2 2
x r y =
2 2
x r y =

No centrado na origem
y
c
x
c
-r x
c
+r
P
1
P
2
1
2
3
4
1 2 3 4 5 6 7 8 9 10
Vetor direo
12
) ( ) ( , ) ( ) (
2 2 2
r x x r x r y y x x
c c c c
+ = +
2 2 2
) ( ) (
c c
x x r y y =
2 2
) ( ) (
c c
x x r y y =
2 2
) (
c c
x x r y y =

Equao paramtrica do crculo

cos r x x
c
+ = (variao constante entre pontos na curva)
sin r y y
c
+ =

Anti-aliasing para crculos: O processo o mesmo utilizado para retas. As seguintes figuras ilustram
curvas geradas com dois tipos de algoritmos de anti-aliasing (imagens de lentes de cmeras -
http://nikonimaging.com/global/products/lens/af/dx/index.htm). As figuras da direita so ampliaes das
figuras da esquerda. Pode-se claramente notar a diferena de qualidade das imagens. Deve-se observar que
se estas imagens fossem geradas sem algoritmos de anti-aliasing, o resultado seria bem pior.





Assim como primitivas, algoritmos de anti-aliasing tambm so muito utilizados para gerao de
caracteres. A seguinte figura ilustra a gerao de caracteres gerados pelo editor Word. Pode-se
observar a adio de pixels coloridos nas bordas dos caracteres.



Bom algoritmo de
anti-aliasing
Algoritmo ruim de
anti-aliasing
13


Elipse

cos a x = (variao no constante entre pontos na curva) [4] pg. 220
sin b y =








Superqudricas

Superelpse

1
2
2
=
|
|

\
|
+
|
|

\
|
s
y
s
x
r
y
r
x


paramtrica

s
x
r x cos =

s
y
r y sin =


Poligonal

Vetor ordenado de coordenadas que definem a forma do objeto. Pode ser usado para representar qualquer
figura. Apresenta limitaes para desenho de curvas.








Preenchimento de Polgonos

Scan-line

Faz o preenchimento da cena de linha em linha






s=1.5 s=1 s=2 s=0.5 s=3
scan-line
sentido de deslocamento
da scan-line
y mnimo
y mximo

14

Faz uso da inclinao de cada reta para otimizar o processo.

z-buffer

Usado pelo OpenGL para preenchimento de polgonos em 3D. Faz o preenchimento da cena de polgono em
polgono.


Flood/Boundary fill

Contorno boundary fill
Cor de fundo flood fill


void boundaryFill4(int x, int y, int fill, int boundary)
{
int cur = getPixel(x, y)
if( cur!=boundary && curr!=fill)
{
setPixel(x, y, fill)
boundaryFill4(x+1, y, fill, boundary)
boundaryFill4(x-1, y, fill, boundary)
boundaryFill4(x, y+1, fill, boundary)
boundaryFill4(x, y-1, fill, boundary)
}
}

void floodFill4(int x, int y, int fill, int oldColor)
{
if(getPixel(x, y) == oldColor)
{
setPixel(x, y, fill)
floodFill4(x+1, y, fill, oldColor)
floodFill4(x-1, y, fill, oldColor)
floodFill4(x, y+1, fill, oldColor)
floodFill4(x, y-1, fill, oldColor)
}
}


3 Visualizao Bidimensional

Window rea selecionada do sistema de coordenadas do mundo para ser exibida no display (rea que ser
vista). Deve-se observar que nem toda rea de um ambiente pode ser exibida em uma nica window. Esta
rea determinada pela configurao e posicionamento da cmera sinttica.

Viewport rea do display (monitor) na qual a window mapeada. Corresponde a posio na tela onde
mostrar. Ex: janela grfica de uma aplicao grfica.

Viewing transformation (ou windowing transformation) mapeamento de uma parte da cena em
coordenadas do mundo para coordenadas do dispositivo.
Deve-se observar que as coordenadas do mundo podem estar no intervalo entre [1, 1] e que as
coordenadas da viewport sempre esto em resoluo de tela.
A principal transformao a escala, que pode no ser uniforme.

Passos:
Definir a rea da window
4-connected 8-connected
15
Recortar o que est fora (clipping)
Ajustar posio e escala dentro da viewport (mapeamento)












Algoritmos de Clipping

Linhas (Cohen-Sutherland)
Polgonos (Weiler-Atherton)
curvas
strings


Mapeamento na tela

Sistema cartesiano define origem no canto inferior esquerdo
Sistema de tela define a origem no canto superior esquerdo
o Ex: OpenGL/Glut, Java, etc.
o









cartesiano tela
x x =
cartesiano tela
y h y =


Referncias:

[1] Lengyel, E.. Mathematics for 3D Game Programming and Computer Graphics. Charles River
Media, 2002.

[2] Hearn, D., Baker, M. P. Computer Graphics, C Version (2
nd
Edition), Prentice Hall, New Jersey, 1997

[3] Foley, J.D., van Dam, A., Feiner, S.K. and Hughes, J.F. Computer Graphics: Principles and Practice
in C (2
nd
Edition), Addison-Wesley Pub. Co., Reading, MA, 1995.

[4] Watt, A. 3D Computer Graphics, Addison Wesley; 3 edition,1999.

[5] Rogers, D., Adams, J. Mathematical Elements for Computer Graphics, 2
nd
Edition. Mc Graw Hill, 1990.
mundo dispositivo
window viewport
cartesiano
window
(0,0)
(0,0)
viewport
(0,0)
h