TEMA 3: Transformaciones 2D

ndice
1.

Transformaciones Bsicas
1.

Traslacin

2.

Rotacin

3.

Escalado

2.

Representacin Matricial y Coordenadas Homogneas

3.

Otras Transformaciones
1.

Reflexin

2.

Afilamiento

4.

Transformacin de Ventana a Pantalla

5.

Algoritmos de Recorte
1.

Recorte de Puntos

2.

Recorte de Lneas

3.

Recorte de Polgonos

Transformaciones geomtricas

Con los algoritmos de primitivas ya podemos dibujar en pantalla

El siguiente paso consiste en permitir modificar o manipular dichas primitivas

Transformaciones Geomtricas

Para poder implementar aplicaciones de diseo

Para poder realizar animaciones

Para interactuar con la escena

Las transformaciones bsicas que se necesitan son:

Traslacin: cambios en la posicin

Rotacin: cambios en la orientacin

Escalado: cambios en el tamao

Traslacin

x' = x + t x

y' = y + t y

P = (x, y)

Reposiciona un objeto desplazndolo a las

nuevas coordenadas

tx

En forma matricial:

P = ( x, y )

P' = ( x' , y ' )

ty

P = (x, y)

T = (t x , t y )

P' = P + T

Es una transformacin rgida el objeto no se deforma

Para trasladar lneas rectas trasladamos slo sus extremos

Para trasladar polgonos, trasladamos slo sus vrtices y

redibujamos

Rotacin con respecto al origen

La posicin de un punto es rotada

alrededor del origen de coordenadas

Cmo sacamos la frmula para obtener

P a partir de P y del ngulo?

P = (x, y)

P = (x, y)

Solucin: expresndolo en polares

x = R cos

y = R sin

x' = R cos( + ) = ... = x cos y sin

y ' = R sin( + ) = ... = x sin + y cos

En forma matricial:

P = ( x, y )

P' = ( x' , y ' )

P' = P R

cos
R =
sin

sin

cos

Rotacin general

P = (x, y)

Cmo ser la frmula general cuando el

punto sobre el que se rota no es el origen,
sino un punto cualquiera (xc, yc)?

x' = xc + ( x xc ) cos ( y yc ) sin

y ' = yc + ( x xc ) sin + ( y yc ) cos

(xc, yc)

Encontrar la forma matricial para este caso es

un poco complicado

Ms tarde lo haremos de otra forma mucho ms

fcil

Es una transformacin rgida el objeto no se deforma

Para rotar lneas rectas rotamos slo sus extremos

Para rotar polgonos, rotamos slo sus vrtices y redibujamos

P = (x, y)

Escalado con respecto al origen

P = (x, y)

La posicin del punto se multiplica por una constante

Hay que especificar dos factores de escala, sx y sy

x' = sx x

y' = sy y

En forma matricial:

P = ( x, y )

P = (x, y)

P' = ( x' , y ' )

Segn el valor del factor de escala s:

Si s > 1 aumento de tamao

Si s==1 no cambia de tamao

Si s < 1 disminucin de tamao

sx
S =
0

s y

P' = P S

Si sx == sy escalado uniforme

Si sx != sy escalado diferencial

Escalado general

NOTA: si el origen de coordenadas no se

encuentra en el interior del objeto, se produce
un desplazamiento!

Para evitarlo, se usa un punto fijo, y se escala a

partir de l

x' = xc + s x ( x xc )

y ' = yc + s y ( y yc )

El punto fijo podra ser el centro del objeto, o uno de sus vrtices,
o tambn un punto arbitrario

Es una transformacin rgida el objeto no se deforma

Para escalar lneas rectas escalamos slo sus extremos

Para escalar polgonos, escalamos slo sus vrtices y

redibujamos

2x

Representacin matricial

Muchas aplicaciones incluyen secuencias de transformaciones geomtricas:

Una animacin requiere que los objetos se trasladen y roten en cada fotograma

Un diseo CAD requiere muchas transformaciones hasta obtener el resultado final

Debemos formular de forma muy eficiente toda la secuencia de transformaciones

Cada transformacin puede representarse como

La matriz M1 contiene la informacin de ngulos y factores de escala

La matriz M2 contiene los trminos de traslacin asociados al punto fijo y al centro de

rotacin

Para producir una secuencia de transformaciones hay que calcular las nuevas
coordenadas en cada transformacin!

P = P M1 + M2

P = P M3 + M4 = = P M1 M3 + M2 M3 + M4

Buscamos una solucin ms eficiente que permita combinar las transformaciones para
obtener directamente las coordenadas finales a partir de las iniciales

Coordenadas homogneas

Cmo podramos eliminar la matriz M2, y usar una nica matriz para transformacin?

Solucin: pasando a matrices 3x3 en lugar de 2x2

Para ello debemos representar un punto cartesiano (x, y) en coordenadas homogneas

Un punto (x, y) se representa en coordenadas homogneas de la forma

(hx, hy, h), para cualquier h distinto de 0

Esto significa que un mismo punto tiene infinitas representaciones en coordenadas

homogneas

Ejemplo: el punto (4, 6) puede expresarse como

(4, 6, 1)

(8, 12, 2)

(2, 3, 1/2)

(8/3, 4, 2/3)

(-12, -18, -3)

Lo habitual es tomar h=1, con lo que el punto (x, y) pasa a ser (x, y, 1)

Conclusin: el punto (a,b,c) en coordenadas homogneas representa al punto (a/c, b/c)

Coordenadas homogneas

El uso de coordenadas homogneas permite tratar todas las transformaciones

geomtricas como una multiplicacin de matrices

Traslacin:

Rotacin
respecto
al origen

Escalado
respecto
al origen

( x' , y ' ,1) = ( x, y,1) 0

t
x
cos

( x' , y ' ,1) = ( x, y,1) sin

0

sx

( x' , y ' ,1) = ( x, y,1) 0

0

0
1
ty

0
1

sin
cos
0
0
sy
0

0
1

P ' = P T (t x , t y )
0

0
1

P ' = P R ( )

P ' = P S (s x , s y )

Composicin de transformaciones: traslaciones

Para cualquier secuencia de transformaciones, podemos calcular la matriz de

transformacin compuesta, calculando el producto de las transformaciones individuales!
P = (x, y)

Traslaciones sucesivas:

T1

P ' = P T1 (t x1 , t y1 )

P = (x, y)

T2
T

P ' ' = P 'T2 (t x 2 , t y 2 )

P = (x, y)

P ' ' = P 'T2 = P T1 T2 = P T

1 0 0 1

T = 0 1 0 0
t
t
1
t
x
1
y
1

x2

0
1
t y2

0 1

0 = 0
1 t x1 + t x 2

0
1
t y1 + t y 2

0
1

Composicin de transformaciones: rotaciones

P = (x, y)

Rotaciones sucesivas:

P ' = P R ( )

P = (x, y)

P ' ' = P 'R ( )

P = (x, y)

P ' ' = P 'R ( ) = P R ( ) R ( ) = P R

cos

R = sin
0

sin
cos
0

0 cos

0 sin
1 0

sin
cos
0

0 cos( + ) sin ( + ) 0

0 = sin ( + ) cos( + ) 0
1
0
0
1

Composicin de transformaciones: escalados

Escalados sucesivas:

P' = P S1 (s x1 , s y1 )
P ' ' = P'S 2 (s x 2 , s y 2 )
P ' ' = P 'S 2 = P S1 S 2 = P S

s x1

S = 0
0

0 0 sx 2

s y1 0 0
0 1 0

0
sy2
0

0 s x1s x 2

0 = 0
1 0

0
s y1s y 2
0

0
1

Rotacin alrededor de un punto

Para hacer una rotacin general, podemos hacerlo mediante una composicin de
transformaciones bsicas:

P' = P T ( xc , yc ) R ( ) T ( xc , yc )
R(xc, yc, )

Escalado alrededor de un punto

Para hacer un escalago general, procedemos de igual manera:

P' = P T ( xc , yc ) S ( s x , s y ) T ( xc , yc )
S(xc, yc, sx, sy)

Reflexin
Sobre el eje x

Sobre el eje y

1 0 0

0
1
0

0 0 1

1 0 0

1
0

0 0 1

Sobre la recta y = x

Sobre el origen de coordenadas

1 0 0

0 1 0
0 0 1

0 1 0

1
0
0

0 0 1

Reflexin general

Sobre una recta arbitraria

y = mx + b

Reflexin general

Cunto habr que trasladar y rotar?

T (0, -b)

R (-atan(m))

P' = P T (0,b) R( arctan m) F R (arctan m) T (0, b)

F(m, b)

Ejemplo de reflexin

y = 3x / 4

Cmo lo resolvemos?

Por lo pronto no hay que trasladar

Cunto habr que rotar?

Lo importante no es el ngulo en s,
sino los valores del seno y el coseno

cos = 4/5

5
3

sin = 3/5

continuacin

Comenzamos con la matriz de rotacin

4 / 5 3 / 5 0

R ( ) = 3 / 5 4 / 5 0
0
0
1

Continuamos con la reflexin

1 0 0

F = 0 1 0
0 0 1

Deshacemos la rotacin

4 / 5 3 / 5 0

R ( ) = 3 / 5 4 / 5 0
0
0 1

M = R ( ) F R ( ) =

7 / 25 24 / 25 0

M = 24 / 25 7 / 25 0
0
0
1

continuacin

Para calcular los puntos

transformados, simplemente los
multiplicamos por la matriz final

(4,3,1) M = (4,3,1)
(5,10,1) M = (11,2,1)
(1,7,1) M = (7,1,1)

y = 3x / 4

Afilamiento

Desplaza los puntos en funcin de los valores de sus coordenadas

x' = x + ay

y' = y

En la otra direccin:

x' = x

y ' = y + bx

1 b 0

A = 0 1 0
0 0 1

1 0 0

A = a 1 0
0 0 1

Afilamiento general

Afilar con respecto a la recta y = mx + b

La expresin de la recta despejando x es

x ' = x ( y b) / m

y' = y

x = (y-b) / m

0 0
1

A = 1/ m 1 0
b / m 0 1

Transformacin a la ventana de visin

La escena se almacenan segn un sistema de coordenadas reales (metros, cm, pulgadas)

El usuario ver en cada momento una subrea de la escena, o varias simultneamente

Cada subrea se mapear en zonas distintas de la pantalla

La pantalla viene definida por un sistema de coordenadas enteras (pixels)

Hay que transformar de un sistema a otro

Escena (coordenadas reales)

Pantalla (coordenadas enteras)

Matriz de transformacin

Para pasar de un sistema a otro lo haremos tambin por medio de una matriz

Dicha matriz la obtendremos a partir de una secuencia de transformaciones bsicas

(xmax, ymax)

(umax, vmax)

(xmin, ymin)

coordenadas del mundo

(umin, vmin)

coordenadas de pantalla

umax umin vmax vmin

T (umin , vmin )
M = T ( xmin , ymin ) E
,
xmax xmin ymax ymin

Algoritmos de recorte

Despus de la transformacin, hay que recortar las partes de la escena que queden fuera
de la ventana

Tenemos dos alternativas:

Podemos recortar en el mundo, y solo mapear lo que caiga dentro

Podemos transformar toda la escena, y recortar en la pantalla que es ms rpido

Estos algoritmos tambin se usan para permitir mtodo de copiar y pegar en aplicaciones
grficas, pero a la inversa (recortando el interior)

Recorte de puntos

Es el algoritmo ms sencillo

Asumiendo una ventana rectangular, slo pintaremos los puntos que cumplas estas dos
condiciones simultneamente:
(umax, vmax)

u min x u max

vmin y vmax

(umin, vmin)

Recorte de lneas

Dado un segmento recto, hay que testear qu parte cae dentro de la ventana para
dibujar slo esa parte

Cmo hacemos el test?

5

1
2
3

Existe varios casos:

Si el segmento es completamente visible, lo dibujamos por completo

Si el segmento es completamente invisible, no lo dibujamos

Si slo se ve parcialmente, habr que calcular la interseccin con los bordes de la ventana

Clculo de intersecciones

Cmo se calculan las intersecciones?

En coordenadas explcitas es complicado, porque aparte de calcular el punto, debemos

averiguar si pertenece al interior del segmento o no

Es mucho ms simple si usamos la ecuacin paramtrica de la recta

x = x1 + t ( x2 x1 )

t [0,1]
y = y1 + t ( y2 y1 )

Si la interseccin se produce para un t fuera del

intervalo (0,1), el punto no pertenece al segmento

Habra que aplicar este mtodo para cada borde de

la ventana

Este test es muy costoso hay que resolver 2

ecuaciones para cada uno de los 4 bordes

Tambin hay que tener en cuenta el caso de las

lneas que sean paralelas a un borde

Algoritmo de recorte de Cyrus-Beck

Funciona para cualquier tipo de ventana poligonal

Se utiliza la ecuacin paramtrica de la lnea

P(t ) = P0 + t (P1 P0 )

Lo que se hace es calcular el valor de t de interseccin con cada borde

Una vez obtenidos los 4 valores, se buscan las intersecciones (x,y) correctas

Cmo se calcula el valor de t interseccin?

t2

t1
P0

P1

Algoritmo de recorte de Cyrus-Beck

Se elige un punto F arbitrario para cada borde

Sea P(t) un punto sobre el segmento, t en [0,1]

Sea v(t) el vector desde F hasta un punto cualquiera del segmento

Sea el producto escalar

La interseccin se produce cuando

Desarrollando y despejando t obtenemos:

P(t ) = P0 + t (P1 P0 )

N i v(t )
N i v(t ) = 0

t=

N i v(t ) = N i (P (t ) F ) = ... = 0
N
v(t)

P1

N i (P0 F )
N i (P1 P0 )

Hay que controlar que el denominador

no se haga cero:

P0

v(t ) = P (t ) F

Ni 0
Siempre se cumple que (P1 P0 ) 0
Puede ocurrir que N i (P1 P0 ) = 0
Siempre se cumple que

En ese caso, la lnea es paralela al

borde y no existe interseccin

Algoritmo de recorte de Cyrus-Beck

Aplicando la frmula obtenemos los 4 valores de t que indican las intersecciones de la

lnea con los 4 bordes.

Cmo identificamos cules son las dos correctas?

Los valores de t fuera del rango (0,1) se descartan

Cada valor de t se etiqueta como entrante (tE) o saliente (tS), segn entre o salga hacia
el lado donde se encuentra la ventana

Cmo saberlo?

NT

S
S

NR

NB

Si es negativo punto entrante

Si es positivo punto saliente

La solucin viene dada por el tramo

de lnea entre el PE ms alto y el PS
ms bajo

Si tE > tL la lnea no se dibuja

Una vez obtenidos los valores de t,

se sustituyen en la ecuacin
parmetrica para obtener las
coordenadas (x,y) de los puntos

NL

Mirando el signo de N i (P1 P0 )

Algoritmo de recorte de Cyrus-Beck

Es muy rpido calcular si es entrante o saliente: el producto escalar ya estaba calculado!

Para implementarlo se usan dos variables, tE y tS, donde se va almacenando el tE ms

grande y el tS ms pequeo que vayamos encontrando

Al acabar los clculos con los 4 bordes, se comparan los tE y tS finales, y se decide si
dibujar o no

Funcion Cyrus_Beck ()
Para cada borde de la ventana
Calcular t
Si t es entrante y t > te entonces te = t
Si t es saliente y t < ts entonces ts = t
Fin Para
Si te < ts entonces
Calcular Pe = P(te)
Calcular Ps = P(ts)
Pintar linea (Pe, Ps)
Fin Si

Ejemplo de recorte
Cyrus-Beck

Algoritmo de recorte de Cohen-Sutherland

Se ejecuta primero un test inicial para

reducir el nmero de intersecciones a
calcular
A cada extremo de la lnea le asignamos
un cdigo de 4 bits
Cada bit indica si el punto est a un lado
o a otro de cada borde

El primer bit indica si el punto est por

encima del borde superior

El segundo bit indica si el punto est por

debajo del borde inferior

El tercer bit indica si el punto est a la

derecha del borde derecho

El cuarto bit indica si el punto est a la

izquierda del borde izquierdo

Cada bit se calcula mediante una resta

Por ejemplo, el primer bit viene dado por

el signo de la resta (y-ymax)

1001

1000

1010

0001

0000

0010

0101

0100

0110

1000

0000

Algoritmo de recorte de Cohen-Sutherland

A continuacin hacemos una operacin AND entre los cdigos de ambos extremos

Si el AND != 0 la lnea es completamente invisible y la descartamos

Si el AND == 0 siendo ambos cdigos 0000 la lnea es totalmente visible y la pintamos ntegra

Si no es ninguno de los casos anteriores, la lnea la catalogamos como parcialmente visible, y slo
en este caso nos ponemos a calcular intersecciones

F
C

F
1001

1000

0101

Lnea CD totalmente invisible

Lnea EF parcialmente visible

1010

0000

Lnea AB totalmente visible

0001

0010

G
0100

0110

Calculamos la interseccin con uno de los

bordes puestos a 1 F

Ahora la lnea se divide en dos: FF y EF

La lnea FF es invisible se descarta

La lnea EF es parcialmente visible

calculamos la interseccin y obtenemos F

La lnea FF es invisible se descarta

La lnea EF es totalmente visible se pinta

Lnea HG parcialmente visible

Calculamos la interseccin G

La lnea GG es invisible se descarta

La lnea HG es invisible se descarta

Algoritmo de recorte de Cohen-Sutherland

Para calcular la interseccin con los bordes se utiliza la ecuacin de la lnea

y = y1 + m (x-x1),

siendo m = (y2 y1) / (x2 x1)

Para un borde vertical, la ecuacin es x = xL

Sustituimos en la ecuacin de la lnea y obtenemos el valor de y

(x2, y2)
(x1, y1)

(x3, y3)

Para un borde horizontal, la ecuacin es

y = yB

La ecuacin de la lnea puede ponerse

como
x = x3 + (y-y3) / m

(xL, yB)
(x4, y4)

Ejemplo de recorte

Comparativa de ambos algoritmos

El algoritmo Cyrus-Beck es ms eficiente que Cohen-Sutherland porque slo calcula las

coordenadas cartesianas (x,y) al final

Funciona muy bien cuando la mayora de las lneas cae en el interior de la ventana de
recorte

El algoritmo Cohen-Sutherland es mejor cuando la mayora de las lneas cae fuera de la

ventana, porque se rechazan en el test inicial

Recorte de polgonos

Para recortar polgonos no basta slo con recortar sus aristas

Lo que hace falta es un algoritmo que genere una o ms reas cerradas que puedan
rellenarse si se desea

Es decir, queremos la secuencia de vrtices que represente al polgono recortado

rre
o
c
n
i

corr
ecto

cto

Algoritmo de recorte de Sutherland-Hodgeman

En cada iteracin vamos recortando el polgono frente a uno de los bordes

Vamos recorriendo la lista de vrtices del polgono, y se genera una lista de salida

Existen 4 casos posibles:

P
Se aade P
a la lista

Se aade T
a la lista

P
No se aade
ningn vrtice

Se aaden T
y P a la lista

Ejemplo

Se hace por separado para cada

borde porque si no no se sabra si
estamos dentro o fuera

Borde izquierdo: V1, A, B, V3

Borde derecho: V1, A, B, V3

Borde inferior: C, B, V3, D

Borde superior: C, B, V3, D

V3
B
V2
C
D
A
V1

Existen problemas con los polgonos

cncavos en algunas orientaciones
aparecen lneas falsas!

Algoritmo de recorte de Weiler-Atherton

Arregla el problema de los polgonos

cncavos. Cmo?

El problema del algoritmo anterior es

que devuelve un nico polgono de salida

La solucin consiste en poder devolver

ms de un polgono

En lugar de viajar por los vrtices del

polgono, a veces nos moveremos por los
bordes de la ventana

V1

V2
A

V7

V4

B
C

Las reglas para decidir el movimiento

son:

Si en una arista viajamos de fuera a

dentro, seguimos la arista del polgono

Si la direccin es de dentro a fuera,

seguimos por el borde de la ventana

Comenzaremos siempre en un punto

exterior (si todos son interiores, el
polgono es completamente visible)

V3

V5
D
V6

Algoritmo de recorte de Weiler-Atherton

Comenzamos con V1

Como cruzamos de fuera hacia adentro,

nos quedamos con la interseccin A

V1

Al llegar a B (de dentro hacia fuera)

unimos B con A y creamos el polgono
{ A, V2, V3, B }

Continuamos a partir de B

Como cruzamos de fuera hacia adentro,

nos quedamos con la interseccin C

Al llegar a D (de dentro hacia fuera)

unimos D con C y creamos el polgono
{ C, V5, D }

V2
A

V7

V4

V3

C
V5
D
V6

Corolario

A veces se necesita un recorte externo (recortar lo que caiga dentro de la ventana).

Por ejemplo, en operaciones de cortar y pegar

El algoritmo es similar, pero quedndonos con la parte de fuera

Cuando la ventana no es rectangular, o el objeto

es curvo, se complican un poco los clculos, pero
tambin se puede conseguir

Cuando el nmero de objetos es muy grande, se

suele hacer una etapa previa de Bounding

Rectangle

Figura 1: completamente invisible

Figura 2: completamente visible

Figura 3: hay que calcular el recorte