Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo,...
Transcript of Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo,...
![Page 1: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/1.jpg)
Gráficos por
Computadora
Mtro. J. Fco. Jafet Pérez L.
Transformaciones Geométricas Bidimensionales
![Page 2: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/2.jpg)
Objetivo
Analizaremos los procedimientos estándares
para realizar transformaciones geométricas
bidimensionales sobre objetos gráficos
inmersos en algún marco de referencia
específico (real o virtual).
![Page 3: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/3.jpg)
Existen básicamente tres operaciones o
transformaciones geométricas básicas, a partir
de las cuales se pueden realizar todas las
demás. Estas transformaciones son la traslación,
el escalamiento y la rotación, todas respecto del
origen.
![Page 4: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/4.jpg)
Traslación o Desplazamiento
La traslación o desplazamiento se refiere a
mover un punto, un conjunto de puntos o un
objeto compuesto, de su ubicación original
hacia una nueva ubicación en su marco de
referencia.
La operación tiene un parámetro: el vector de
desplazamiento.
![Page 5: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/5.jpg)
Como podemos ver en la figura, el cuadro que representaremos de
manera abstracta como P ha sido trasladado en un valor de (3,-1)
(este es el parámetro de la operación).
En su nueva ubicación lo llamaremos P'.
Tomemos su esquina inferior izquierda como base: Su posición
original era (2,3) y la nueva es (5,2). El mismo desplazamiento ha
afectado a todos los demás puntos del cuadro.
![Page 6: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/6.jpg)
Escalamiento
El escalamiento es la operación que nos permiteagrandar o empequeñecer un conjunto de puntos oun objeto compuesto. La operación requiere dedos parámetros: el factor de escalamiento aaplicar en x y el factor de escalamiento a aplicaren y. La operación requiere además, de un puntode referencia, típicamente el origen del marco dereferencia.
En el caso de aplicar escalamiento básico a unpunto, se produce el efecto de acercarlo o alejarlodel punto de referencia.
![Page 7: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/7.jpg)
En la siguiente figura, se muestra un ejemplo de escalamiento.
Escalamos el cuadro representado por P tomando como
referencia al origen y con factores de escalamiento 1/3 en x, y
1/2 en y. El efecto, debido a que ambos factores son menores
que 1, es que todos los puntos del cuadro P se han acercado al
origen (pero más en x que en y).
![Page 8: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/8.jpg)
Ejemplo 2
P (en la misma posición que en el ejemplo anterior) tomando
como referencia a su esquina inferior derecha y con factores de
escalamiento 1/2 en x, y 1/2 en y. (Este es un escalamiento compuesto
ya que para lograrlo, se requiere realizar dos operaciones, escalamiento y
traslación)
![Page 9: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/9.jpg)
Rotación
La rotación es la más compleja de las operaciones otransformaciones geométricas básicas. Consiste en girarun punto, un conjunto de puntos o un cuerpocompuesto, al rededor de un punto de referencia (elcentro de rotación), típicamente el origen del marco dereferencia. Requiere como parámetro el ángulo derotación.
La rotación más simple es aquella que se realiza ensentido antihorario y utiliza como centro de rotación alorigen del marco de referencia.
![Page 10: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/10.jpg)
En la siguiente figura, se ilustra la rotación de P, que está en las
coordenadas (6, 2). La rotación es de π/6 en sentido contrario al de
las agujas del reloj a partir del eje x+. El punto de referencia es el
origen del marco de referencia. Las coordenadas del punto inferior
izquierdo de P' son (4.1962; 4.7321).
![Page 11: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/11.jpg)
Representación matricial.
Aunque existen diversas maneras de representar
las coordenadas de los objetos gráficos y de
representar las transformaciones geométricas
que operan sobre ellos, vamos a elegir la más
estándar y flexible.
Los puntos se representan como vectores
columna de tamaño 3 x 1:
![Page 12: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/12.jpg)
La operación de traslación bidimensional se
representa como una matriz de 3 X 3:
![Page 13: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/13.jpg)
La operación de escalamiento bidimensional
(con el origen como punto de referencia) se
representa similar:
![Page 14: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/14.jpg)
La operación de rotación bidimensional
(respecto del origen, en el sentido opuesto al de
las manecillas del reloj) se representa así:
![Page 15: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/15.jpg)
De este modo, para efectuar transformaciones geométricas
básicas, esas "funciones" en forma de matrices, deben
premultiplicarse por los puntos que se pretende transformar, así:
P' = T(dx, dy) . P significa que P' es P con un
desplazamiento de (dx, dy)
P' = S (sx, sy) . P significa que P' es P con factores de
escalamiento sx en x y sy en y tomando el origen como
referencia.
P' = R(θ) . P significa que P' es P con una rotación de θ
radianes en sentido opuesto al movimiento de las
manecillas del reloj, a partir del eje x+, tomando como
eje de rotación al origen del marco de referencia.
![Page 16: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/16.jpg)
Ejercicio: Escale la siguiente figura en un factor
de 2,3. Traslade la figura resultante con un
vector de 1, -1. Por último rote la figura original
45 grados.
![Page 17: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/17.jpg)
Escale la siguiente figura en un factor de 2,3.
P1 (2,2)
P2 (2,4)
P3 (4,4)
P4 (4,2)
![Page 18: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/18.jpg)
Escale la siguiente figura en un factor de 2,3.
![Page 19: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/19.jpg)
P1’ = 4 P2’= 4
6 12
1 1
P3’ = 8 P4’= 8
12 6
1 1
![Page 20: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/20.jpg)
P1' = 4,6
P2' = 4,12
P3' = 8,12
P4' = 8,6
![Page 21: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/21.jpg)
Traslade la figura resultante con un vector de 1, -1.
P5 = 4,6
P6 = 4,12
P7 = 8,12
P8 = 8,6
![Page 22: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/22.jpg)
P5 = 4,6
P6 = 4,12
P7 = 8,12
P8 = 8,6
![Page 23: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/23.jpg)
P5’ = 5 P6’= 5
5 11
1 1
P7’ = 9 P8’= 9
11 5
1 1
![Page 24: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/24.jpg)
![Page 25: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/25.jpg)
Por último rote la figura original 45 grados.
P1 (2,2)
P2 (2,4)
P3 (4,4)
P5(4,2)
![Page 26: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/26.jpg)
![Page 27: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/27.jpg)
P1’=
P2’ =
(0.7071)·2 + (-0.7071)·2 + 0·1 = (1.4142) + (-1.4142) + 0 = 0
(0.7071)·2 + (0.7071)·2 + 0·1 = (1.4142) + (1.4142) + 0 = 2.8284
0·2 + 0·2 + 1·1 = 0 + 0 + 1 = 1
(0.7071)·2 + (-0.7071)·4 + 0·1 = (1.4142) + (-2.8284) + 0 = -1.4142
(0.7071)·2 + (0.7071)·4 + 0·1 = (1.4142) + (2.8284) + 0 = 4.2426
0·2 + 0·4 + 1·1 = 0 + 0 + 1 = 1
![Page 28: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/28.jpg)
P3’=
P4’ =
(0.7071)·4 + (-0.7071)·4 + 0·1 = (2.8284) + (-2.8284) + 0 = 0
(0.7071)·4 + (0.7071)·4 + 0·1 = (2.8284) + (2.8284) + 0 = 5.6568
0·4 + 0·4 + 1·1 = 0 + 0 + 1 = 1
(0.7071)·4 + (-0.7071)·2 + 0·1 = (2.8284) + (-1.4142) + 0 = 1.4142
(0.7071)·4 + (0.7071)·2 + 0·1 = (2.8284) + (1.4142) + 0 = 4.2426
0·4 + 0·2 + 1·1 = 0 + 0 + 1 = 1
![Page 29: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/29.jpg)
![Page 30: Gráficos por Computadora - ILAPEP - Inicioilapep.mx/g1/unidad2/transformaciones2d.pdfDe este modo, para efectuar transformaciones geométricas básicas, esas "funciones" en forma](https://reader030.fdocuments.mx/reader030/viewer/2022021612/5ba4c62f09d3f264368b7ba3/html5/thumbnails/30.jpg)
Ejercicio: Diseñe la inicial de su nombre en un
plano cartesiano. Escale su figura al doble de
tamaño. Mueva la figura resultante dos
unidades a la derecha y dos hacia arriba. Rote
la figura resultante 30 grados antihorario
tomando como centro de rotación el origen.