TEMA 3: Transformaciones 2D

ndice
1. Transformaciones Bsicas
1. 2. 3. Traslacin Rotacin Escalado

2. 3.

Representacin Matricial y Coordenadas Homogneas Otras Transformaciones

1. 2. Reflexin Afilamiento

4. 5.

Transformacin de Ventana a Pantalla Algoritmos de Recorte

1. 2. 3. Recorte de Puntos Recorte de Lneas 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
Reposiciona un objeto desplazndolo a las nuevas coordenadas P = (x, y) P = (x, y)

x' = x + t x y' = y + t y
En forma matricial:

ty

tx
T = (t x , t y )

P = ( x, y )

P' = ( x' , 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
En forma matricial:

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

P = ( x, y )

P' = ( x' , y ' )

P' = P R

cos R= sin

sin cos

Rotacin general
Cmo ser la frmula general cuando el punto sobre el que se rota no es el origen, sino un punto cualquiera (xc, yc)? P = (x, y)

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

Encontrar la forma matricial para este caso es un poco complicado Ms tarde lo haremos de otra forma mucho ms fcil

(xc, yc)

P = (x, y)

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

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 ' )

sx S = 0

0 sy

P' = P S

Segn el valor del factor de escala s:

Si s > 1 Si s==1 Si s < 1 aumento de tamao no cambia de tamao disminucin de tamao

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 )

2x

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

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

P = P M1 + M2

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 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:

1 ( 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 0 1
0 0 1

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

Rotacin respecto al origen

sin cos 0 0 sy 0 0 0 1

P ' = P R ( )

Escalado respecto al origen

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:

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

T1 P = (x, y) T T2 P = (x, y)

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

P ' ' = P 'T2 = P T1 T2 = P T
1 0 0 1 T = 0 1 0 0 t t y1 1 t x 2 x1 0 1 0 = 0 1 t x1 + t x 2

0 1 t y2

0 1 t y1 + t y 2

0 0 1

Composicin de transformaciones: rotaciones

Rotaciones sucesivas: P = (x, y) P = (x, y)

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

P = (x, y)

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
P P P

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 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 0 1 0 0 0 1

Sobre el origen de coordenadas

Sobre la recta y = x

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

5 3

cos = 4/5 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

M = R ( ) F R ( ) =

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

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

1 0 0 A = a 1 0 0 0 1

En la otra direccin:

x' = x y ' = y + bx

1 b 0 A = 0 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 = (y-b) / m

x ' = x ( y b) / m y' = y

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)

(umin, vmin)

coordenadas del mundo

coordenadas de pantalla

umax umin vmax vmin M = T ( xmin , ymin ) E x x , y y T (umin , vmin ) min max min max

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

4 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 (P P0 ) 1
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

P1

t1 P0

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]

P(t ) = P0 + t (P P0 ) 1
v(t ) = P (t ) F

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

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

La interseccin se produce cuando

Desarrollando y despejando t obtenemos:

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

t=

N i (P0 F ) N i (P P0 ) 1

P1

Hay que controlar que el denominador no se haga cero:

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

Siempre se cumple que En ese caso, la lnea es paralela al borde y no existe interseccin

P0

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? B NT A
E S S S

Mirando el signo de N i (P P0 ) 1
Si es negativo Si es positivo punto entrante 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

NL
E E

NR F NB E
S E

Una vez obtenidos los valores de t, se sustituyen en la ecuacin parmetrica para obtener las coordenadas (x,y) de los puntos

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

1001

1000

1010

0001

0000

0010

0101

0100

0110

1000

Cada bit se calcula mediante una resta Por ejemplo, el primer bit viene dado por el signo de la resta (y-ymax) 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 la lnea es totalmente visible y la pintamos ntegra Si el AND == 0 siendo ambos cdigos 0000

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 F
1001 1000

Lnea AB Lnea CD Lnea EF

totalmente visible totalmente invisible parcialmente visible

C F E B
0010 1010

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 se pinta La lnea EF es totalmente visible

H
0001

A
0000

G
0101

G
0100 0110

Lnea HG

parcialmente visible
G se descarta se descarta

Calculamos la interseccin La lnea GG es invisible La lnea HG es invisible

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) (xL, yB) (x4, y4)

Para un borde horizontal, la ecuacin es y = yB La ecuacin de la lnea puede ponerse como x = x3 + (y-y3) / m

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

re ncor i

cto

corr ecto

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: S

P T

P Se aade P a la lista

P No se aade ningn vrtice

S Se aaden T y P a la lista

Se aade T a la lista

Ejemplo
V3 B V2 C D A V1 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

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 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

V1 A

V2

V7

V4

B C V5 D

V3

V6

Comenzaremos siempre en un punto exterior (si todos son interiores, el polgono es completamente visible)

Algoritmo de recorte de Weiler-Atherton

Comenzamos con V1 Como cruzamos de fuera hacia adentro, nos quedamos con la interseccin A Al llegar a B (de dentro hacia fuera) unimos B con A y creamos el polgono { A, V2, V3, B } V7

V1 A

V2

V4

B C V5 D

V3

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 } 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