TEMA 3: Transformaciones 2D
ndice1. Transformaciones Bsicas
1. Traslacin2. Rotacin3. Escalado
2. Representacin Matricial y Coordenadas Homogneas
3. Otras Transformaciones1. Reflexin2. Afilamiento
4. Transformacin de Ventana a Pantalla
5. Algoritmos de Recorte1. Recorte de Puntos2. Recorte de Lneas3. 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
),( yxP = )','(' yxP = ),( yx ttT =
TPP +='
+=+=
y
x
tyytxx
''
Traslacin
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
En forma matricial:
xt
yt
Reposiciona un objeto desplazndolo a las nuevas coordenadas
P = (x, y)
P = (x, y)
+==+===+=
cossin...)sin('sincos...)cos('
yxRyyxRx
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?
Solucin: expresndolo en polares
R
==
sincos
RyRx
),( yxP = )','(' yxP =
=
cossinsincos
R
RPP ='
En forma matricial:
P = (x, y)
P = (x, y)
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)?
(xc, yc)
P = (x, y)
P = (x, y)
++=+=
cos)(sin)('sin)(cos)('
ccc
ccc
yyxxyyyyxxxx
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
Encontrar la forma matricial para este caso es un poco complicado
Ms tarde lo haremos de otra forma mucho ms fcil
),( yxP = )','(' yxP = SPP ='
==
ysyxsx
y
x
''
Escalado con respecto al origen
En forma matricial:
La posicin del punto se multiplica por una constante
Hay que especificar dos factores de escala, sx y sy
=
y
x
ss
S0
0
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
Si sx == sy escalado uniforme
Si sx != sy escalado diferencial
Escalado general
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
NOTA: si el origen de coordenadas no se encuentra en el interior del objeto, se produce un desplazamiento!
x 2x
Para evitarlo, se usa un punto fijo, y se escala a partir de l
+=+=
)(')('
cyc
cxc
yysyyxxsxx
El punto fijo podra ser el centro del objeto, o uno de sus vrtices, o tambn un punto arbitrario
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:
=
1010001
)1,,()1,','(
yx ttyxyx ( )yx ttTPP ,' =
Rotacin respecto al origen
=
1000cossin0sincos
)1,,()1,','(
yxyx ( )RPP ='
=
1000000
)1,,()1,','( yx
ss
yxyx ( )yx ssSPP ,' = Escalado respecto al origen
Composicin de transformaciones: traslaciones Para cualquier secuencia de transformaciones, podemos calcular la matriz de
transformacin compuesta, calculando el producto de las transformaciones individuales!
Traslaciones sucesivas:
++=
=
1010001
1010001
1010001
21212211 yyxxyxyx ttttttttT
P = (x, y)( )111 ,' yx ttTPP =P = (x, y)
T1
( )222 ,''' yx ttTPP = P = (x, y)T2
TPTTPTPP === 212'''
T
Composicin de transformaciones: rotaciones
Rotaciones sucesivas:
( ) ( )( ) ( )
++++
=
=
1000cossin0sincos
1000cossin0sincos
1000cossin0sincos
R
)(' RPP =
RPRRPRPP === )()()('''
P = (x, y)
P = (x, y)
)(''' RPP =
P = (x, y)
Composicin de transformaciones: escalados
Escalados sucesivas:
=
=
1000000
1000000
1000000
21
21
2
2
1
1
yy
xx
y
x
y
x
ssss
ss
ss
S
( )111 ,' yx ssSPP =( )222 ,''' yx ssSPP =
SPSSPSPP === 212''' P P P
Rotacin alrededor de un punto
Para hacer una rotacin general, podemos hacerlo mediante una composicin de transformaciones bsicas:
),()(),(' cccc yxTRyxTPP = R(xc, yc, )
Escalado alrededor de un punto
Para hacer un escalago general, procedemos de igual manera:
),(),(),(' ccyxcc yxTssSyxTPP =S(xc, yc, sx, sy)
Reflexin
100010001
Sobre el eje x Sobre el eje y
Sobre el origen de coordenadas Sobre la recta y = x
100010001
100010001
100001010
Reflexin general Sobre una recta arbitraria y = mx + b
1 2
3 4 5
Reflexin general Cunto habr que trasladar y rotar?
R (-atan(m))T (0, -b)
),0()(arctan)arctan(),0(' bTmRFmRbTPP =
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
sin = 3/5
4
3
5
continuacin Comenzamos con la matriz de rotacin
=
10005/45/305/35/4
)(R
Continuamos con la reflexin
=
100010001
F
Deshacemos la rotacin
=
10005/45/305/35/4
)( R
== )()( RFRM
=
100025/725/24025/2425/7
M
continuacin Para calcular los puntos
transformados, simplemente los multiplicamos por la matriz final
)1,3,4()1,3,4( =M)1,2,11()1,10,5( =M
)1,1,7()1,7,1( =M
y = 3x / 4
Afilamiento Desplaza los puntos en funcin de los valores de sus coordenadas
=+=yyayxx
''
=
10001001
aA
En la otra direccin:
+==
bxyyxx
''
=
10001001 b
A
Afilamiento general Afilar con respecto a la recta y = mx + b
==yy
mbyxx'
/)('
b
=
10/01/1001
mbmA
La expresin de la recta despejando x es x = (y-b) / m
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
x
y
(xmin, ymin)
(xmax, ymax)
x
y
u
v
u
v
(umin, vmin)
(umax, vmax)
coordenadas del mundo coordenadas de pantalla
),(,),( minminminmax
minmax
minmax
minmaxminmin vuTyy
vvxxuuEyxTM
=
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:
maxmin
maxmin
vyvuxu
(umin, vmin)
(umax, vmax)
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?
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
12
3
4
5
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
[ ]1,0)()(
121
121
+=+=
tyytyyxxtxx
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
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?
P0
P1
( )010)( PPtPtP +=
t1
t2
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:
P0
P1
F
v(t)
N
( )010)( PPtPtP +=FtPtv = )()(
)(tvNi 0)( = tvNi
( ) 0...)()( === FtPNtvN ii( )( )01
0
PPNFPNt
i
i
=
Hay que controlar que el denominador no se haga cero:
Siempre se cumple que Siempre se cumple que Puede ocurrir que En ese caso, la lnea es paralela al
borde y no existe interseccin
0iN( ) 001 PP( ) 001 = PPNi
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? Mirando el signo de 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 PSms 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
( )01 PPNi
A
B D
F
E
C
NL NR
NT
NB
E
E
E
S
S
S
S
E
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 tSi t es entrante y t > te entonces te = tSi t es saliente y t < ts entonces ts = t
Fin ParaSi 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
00000001
0101
1001
0010
0110
1010
0100
1000
0000
1000
Cada bit se calcula mediante una resta
Por ejemplo, el primer bit viene dado por el signo de la resta (y-ymax)
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
0001
0101
1001
0010
0110
1010
0100
1000
0000 B
A
FC
D
EH
G
Lnea AB totalmente visible
Lnea HG parcialmente visible Calculamos la interseccin G La lnea GG es invisible se descarta La lnea HG es invisible se descarta
Lnea CD totalmente invisible Lnea EF parcialmente visible
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
F
F
G
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
(x1, y1)
(x2, y2)
(xL, yB)
(x3, y3)
(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
incorrecto
correcto
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:
Se aade P a la lista
S
P P
P P
S S
S
Se aade T a la lista
No se aadeningn vrtice
Se aaden Ty P a la lista
T
T
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
V1
V2
V3
A
B
C
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?
V1 V2
V3V4
V5
V6
V7
A
B
C
D
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
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 }
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 }
V1 V2
V3V4
V5
V6
V7
A
B
C
D
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
1 2 3
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