Transformaciones Geométricas en 2D

Una transformación es un cambio que se le aplica a una figura o punto para generar otra muy parecida pero con alguna diferencia en cuanto a tamaño, posición, ángulo o despliegue.

Tipos de transformaciones que se pueden aplicar son escalamiento, rotación, reflección, traslación y deformación.

Un punto en 2D se representa como [x , y] y este puede ser almacenado de diferentes formas en alguna estructura, como puede ser en:

Vector unidimensional

Vector Bidimensional

Clase de Puntos

Por ejemplo vamos a almacenar la figura de una flecha que tiene por coordenadas:

200,50

100,100 200,100

300,150

100,200 200,200

200,250

int flecha[ ]={100,100,200,100,200,50,300,150,200,250,200,200,100,200};

int flecha[ ][ ]={{100,100},{200,100},{200,50},{300,150},{200,250},{200,200},{100,200}};

class punto{ int x; int y;}punto flecha[]={new punto(100,100),new punto(200,100),new punto(200,50), new punto(300,150),new punto(200,250),new punto(200,200), new punto(100,200)};

Después de eso entonces ahora sigue mostrar la figura en el plano bidimensional.

Representación de las Transformaciones en 2D

Las transformaciones son representadas a través de matrices.

Un punto dado está representado por: [x,y]

Y las transformaciones por una matriz de 2x2

De tal forma que si se multiplica el punto dado por la matriz identidad nos queda el mismo punto.

[x,y] Pero si modificamos a la matriz identidad por una variable nos queda de la siguiente forma:

[x,y]

Y si es sobre el otro valor queda:

[x,y]

Y para que se produzca un escalamiento uniforme se modifican los dos valores.

[x,y]

Realizar la programación del escalamiento en dos dimensiones.

Rotación

1 00 1

1 00 1

A 00 1

1 00 B

A 00 B

= [x,y]

= [Ax,y] Produciendo un escalamiento sobre el eje x

= [x,By] Produciendo un escalamiento sobre el eje y

= [Ax,By] Produciendo un escalamiento uniforme sobre ambos ejes

La rotación de una figura en dos dimensiones también se realiza por medio de la matriz de transformación de 2*2, como se muestra a continuación:

[x,y]

[x,y]

Deformación o Shear

La deformación de una figura en dos dimensiones modifica la forma de la figura, este cambio puede ser tanto en x como en y o en ambos.

[x,y]

[x,y]

[x,y]

Traslación o TrasladarPara realizar una traslación y que esta funciones como una multiplicación de matrices y no como una suma, la matriz se debe de ampliar a 3x3 y utilizar coordenadas homogéneas.

[x,y,1]

La traslación nos sirve para que podamos escalar, rotar, reflejar y deformar una figura sobre un punto de esta.Secuencia:a) Trasladar la figura al origen –Tx,-Tyb) Realizar la transformación (escalar, rotar, reflejar y deformar)c) Regresar la figura a la posición especificada (Tx,Ty)Reflección

cos α sen α-sen α cos α

cos α -sen αsen α cos α

1 B0 1

1 0A 1

1 0A 1

1 0 00 1 0Tx Ty 1

= [xcosα-ysenα ,xsenα+ycosα] Produciendo un rotación en el sentido de las manecillas del reloj

= [xcosα+ysenα ,-xsenα+ycosα] Produciendo un rotación en contra de las manecillas del reloj

= [x,Bx+y] Produciendo una deformación en el eje y

= [x+Ay,y] Produciendo una deformación en el eje x

= [x+Ay,Bx+y] Produciendo una deformación en ambos ejes

= [x+Tx,y+Ty,1] Trasladando el punto la cantidad especificada por Tx y Ty

Esta transformación permite simular lo que ocurre cuando se refleja una imagen en un espejo.

[x,y]

[x,y]

[x,y]

Coordenadas homogéneas

Las coordenadas homogéneas son un instrumento usado para describir un punto en el espacio. En coordenadas homogéneas, todo punto bidimensional está definido por tres coordenadas. De tal modo que un punto de dimensiones x, y, se lo representa por 3 valores: x / w, y / w, w. Matemáticamente, las coordenadas x y y se hallan dividiendo los dos primeros números entre el tercero, respectivamente. En dos dimensiones, su valor se puede encontrar más fácilmente si w = 1, por simplificación.Básicamente, se trata de ampliar el plano euclídeo (en el caso bidimensional) al plano proyectivo. Una consecuencia de esta escritura es que un punto tiene infinitas formas de escribirlo, todo dependerá de los cocientes x / w y y / w (con w distinto de 0).Coordenadas homogéneas ( 2,4,1)=(4,8,2)=(12,24,6) Objetivo:Convertir la traslación de una suma a una multiplicación, además de permitir concatenar una sucesión de transformaciones en una matriz.

Quiere decir que nosotros podemos encadenar matrices para formar una sola que realice múltiples transformaciones.

Ejemplo de un escalamiento sobre un punto utilizando coordenadas homogéneas:

-1 00 1

1 00 -1

-1 00 -1

= [-x,y] Reflección en X

= [x,-y] Reflección en Y

= [-x,-y] Reflección en XY

Trasladar al origen Escalar Trasladar a su posición

1 0 0 Sx

0 0 1 0 0

0 1 0 . 0 Sy 0 . 0 1 0 = Matriz de transformación

-Tx -Ty 1 0 0 1 Tx

Ty 1

Sx 0 0[x,y,1] . 0 Sy 0 = [xSx-TxSx+Tx,ySy-TySy+Ty,1]

-Tx*Sx+Sx -Ty*Sy+Sy 1

Trasladar al origen Rotar Trasladar a su posición1 0 0 co

s -sen 0 1 0 0

0 1 0 . sen

cos 0 . 0 1 0 = Matriz de transformación

-Tx -Ty 1 0 0 1 Tx

Ty 1

cos -sen 0[x,y,1] . sen Cos 0 = [xcos+ysen-Txcos-Tysen+Tx,

-Txcos-Tysen+Tx Txsen-Tycos+Ty 1 -xsen+ycos+Txsen-Tycos+Ty,1]

Trasladar al origen Deformar Trasladar a su posición1 0 0 1 B 0 1 0 00 1 0 . A 1 0 . 0 1 0 = Matriz de transformación

-Tx -Ty 1 0 0 1 Tx

Ty 1

1 B 0[x,y,1] . A 1 0 = [x+Ay-ATy,Bx+y-BTx,1]

-ATy -BTx 1

Realizar todas las matrices de transformaciones y programarlas con la figura que debe de contener por lo menos 100 puntos.

Mapeo de Ventana a puerto de Visión

Sx= (Xvisionmax-Xvmin)/(Xwindowmax-Xwmin)Sy= (Yvmax-Yvmin)/(Ywmax-Ywmin)

Sx= (640-500)/(640-0)=140/640=0.21875Sy= (480-350)/(480-0)=130/480=0.270833 factores de escala

Para representarlos en el puerto de visión se les suma los valores de inicio del puerto de visión. 500+Valores en X y 350+Valores en Y.

Como cargar imágenes en Java

Primero hay que obtener la ruta donde se encuentra el proyecto.

- System.getProperty(“user.dir”); obtener el directorio actual mediante una cadena- getClass( ).getResource(“Dire/file.xxx”); obtener el directorio actual mediante un

URL

Definir la imagen mediante un objeto

Image imagen; define un objeto de tipo imagen

ImageIcon icono; define una imagen para un icono

Instanciar el ImageIcon a través de un URL

URL ruta=getClass().getResource("/UnidadIIv2/Imagenes/Dibujar.PNG");

imgdib=new ImageIcon(ruta);

ImageIcon puede recibir en el constructor una imagen o un URL

Para obtener una imagen en un objeto Image se puede hacer:

- A través del método getimage de la clase Toolkit de awt generando un objeto Toolkit tk=Toolkit.getDefaultToolkit(); Imagen=tk.getImage(ruta);

- A través un método devolviendo un objeto de tipo imagenpublic BufferedImage loadImage(String nombre) {

URL url=null;

try {

url = getClass().getResource(nombre);

return ImageIO.read(url);

} catch (Exception e) {

System.out.println("No se pudo cargar la imagen " + nombre +" de "+url);

System.out.println("El error fue : "+e.getClass().getName()+" "+e.getMessage());

//System.exit(0);

return null;

}

}

Como integrar un Menú a una aplicación

1) Generar un Barra de Menú. JMenuBar BarraM;2) Construir la BarraM=new JMenuBar();3) Asignar la barra de Menú a la ventana ventana.setJMenuBar(BarraM);4) Definir los menús JMenu uno,dos;5) Construir los menús uno=new JMenu("Dibujar");

6) Definir las opciones de los Menús JMenuItem el1,el2,el3,el4,el5;7) Construir las opciones de los Menús el1=new JMenuItem("Rectangulo");8) Agregar las opciones a los Menús uno.add(el1);9) Cargar a la Barra de Menú los Menús BarraM.add(uno);

Generar elementos de tipo Action.

Action El1=new AbstractAction( "Rectangulo" , new ImageIcon( Imagen )) {

public void actionPerformed(ActionEvent arg0) {

obj.DibujaRect();

}};

El1.putValue(Action.SHORT_DESCRIPTION,"Dibuja un Rectangulo");

El1.putValue(Action.MNEMONIC_KEY,new Integer('R'));

El1.putValue(Action.ACCELERATOR_KEY,KeyStroke.getKeyStroke(KeyEvent.VK_R, InputEvent.CTRL_MASK));

Integrar las acciones al Menú. uno.add(El1);

Como agregar una Barra de Herramientas a una aplicación.

1) Crear una barra de herramientas JToolBar barh;2) Se construye la barra de herramientas

Barrah=new JToolBar("Operaciones",SwingConstants.VERTICAL); Vertical y Horizontal es el orden de acomodos de los botones.

3) Agregar los botones o acciones a la barra de herramientas Barrah.add(uno);4) Agregar la barra de herramientas al contenedor

cont.add(Barrah,BorderLayout.EAST);

Eventos del Ratón

MouseListener,MouseMotionListener,MouseWheelListener

Métodos y acciones de los eventos del raton.

MouseListener

void mouseClicked(MouseEvent me) cuando se presiona y se libera el ratón

void mouseEntered(MouseEvent me) cuando el ratón entra en un componente

void mouseExited(MouseEvent me) cuando el ratón sale de un componente

void mousePressed(MouseEvent me) cuando se presiona el ratón

void mouseReleased(MouseEvent me) cuando se libera el ratón

MouseMotionListener

void mouseDragged(MouseEvent me) Se llama mientras se arrastra el ratón

void mouseMoved(MouseEvent me) Se llama mientras se mueva el ratón

MouseWheelListener

void mouseWheelMoved(MouseWheelEvent me) Cuando se mueve la rueda del raton.

Métodos mas utilizados de MouseEvent

int getButton( ) indica que boton del raton ha cambiado su estado, se puede hacer la consulta comparando con los valores BUTTON1,BUTTON2 o BUTTON3

int getClickCount( )

Devuelve el número de clicks asociados con el evento.

Point getPoint( ) Devuelve la coordenada x,y donde se presiono.int getX( ) Devuelve la coordenada en x donde se presionoint getY( ) Devuelve la coordenada en y donde se presionoObject getSource( )

Devuelve el nombre del objeto que produjo el evento.

Método más utilizado de MouseWheelEvent

int getWheelRotation( ) Devuelve el número de rotaciones realizadas por la rueda. Devuelve un valor negativo cuando el movimiento es hacia arriba y positivo cuando es hacia abajo.

Cuadros de Dialogoclass Drotation extends JDialog{

JRadioButton rd,ri;JTextField ang;JDialog dialog;JButton b1,b2;

ButtonGroup group;int ret=0;public Drotation(JFrame padre,boolean modal){

super(padre,modal); //modal que debe de seleccionar afuerzas algo

JPanel panel=new JPanel();Icon bug = new ImageIcon(

getClass().getResource("/UnidadII/rec/Fd.png" ) );Icon bug2 = new ImageIcon( getClass().getResource(

"/UnidadII/rec/Fi.png" ) );group = new ButtonGroup();JLabel l1=new JLabel("",bug, SwingConstants.LEFT);JLabel l2=new JLabel("",bug2, SwingConstants.LEFT);JLabel l3=new JLabel(" Angulo a rotar: ");rd=new JRadioButton("",false);ri=new JRadioButton("",false);group.add(rd);group.add(ri);ang=new JTextField();ang.setColumns(5);b1=new JButton("Aceptar");b2=new JButton("Cancelar");panel.add(l2);panel.add(ri);panel.add(l1);panel.add(rd);

panel.add(l3);panel.add(ang);panel.add(b1, BorderLayout.SOUTH);panel.add(b2,BorderLayout.SOUTH);add(panel);this.setSize(600,80);

b1.addActionListener(new ActionListener(){public void actionPerformed(ActionEvent e) {

if(rd.isSelected())ret=1;

elseif(ri.isSelected())

ret=2;else

ret=-1;

Drotation.this.setVisible(false);Drotation.this.dispose();

}

});b2.addActionListener(new ActionListener(){

public void actionPerformed(ActionEvent e) {ret=-1;

Drotation.this.setVisible(false); Drotation.this.dispose();

}

});}public int mostrar(){

this.setVisible(true);return -1;

}public void closeDialog(WindowEvent we){

this.setVisible(false);this.dispose();

}}

Evento mousePressedint cox=arg0.getX();

int coy=arg0.getY();Lienzo.minmax();

System.out.println(Lienzo.menorx+","+Lienzo.mayorx+","+Lienzo.menory+","+Lienzo.mayory);

if((cox>Lienzo.menorx && cox<Lienzo.mayorx) && (coy>Lienzo.menory && coy<Lienzo.mayory))

moverse=true;else

moverse=false;System.out.println(moverse);

Evento mouseDragged

int dx=e.getX();int dy=e.getY();if(moverse)

Lienzo.Trasladar(dx, dy);

Presentaciones de los temas de Java 2D.

Transformaciones geométricas en 3D

Una transformación es un cambio que se le aplica a una figura o punto para generar otra muy parecida pero con alguna diferencia en cuanto a tamaño, posición, ángulo o despliegue.

Tipos de transformaciones que se pueden aplicar son escalamiento, rotación, reflección, traslación.

Antes de almacenar las coordenadas es necesario obtenerlas y poder calcularlas en base a una representación de una figura en 3D, con sus correspondientes dimensiones llamado Isométrico.

Para poder encontrar las coordenadas primero se debe de definir el origen de la figura y para no tener que trasladar la figura al origen, para aplicarle alguna transformación y esta no cambie de posición, por conveniencia se define dentro de la figura.

Si el Origen está en el centro de cubo las coordenadas Serian:

Puntos del CuboA) x=-20 y=-15 z=15 E) x=-20 y=-15 z=-15 B) x=-20 y=15 z=15 F) x=-20 y=15 z=-15C) x=20 y=-15 z=15 G) x=20 y=-15 z=-15D) x=20 y=15 z=15 H) x=20 y=15 z=-15

Ejercicio:

1) Sacar las coordenadas en tres dimensiones de la figura anterior para cada uno de sus vértices, considere el origen en el punto es decir el centro de la parte de cubo. (No olvide los vértices ocultos).

2) Sacar la vistas ortográficas para la misma figura (Superior, Frontal, Lateral derecha).

3) Transformar las coordenadas 3d en coordenadas 2d y graficarlas. (SX,SY) considere una distancia de 20.

Un punto en 3D se representa como [x , y, z] y este puede ser almacenado de diferentes formas en alguna estructura, como puede ser en:

Vector unidimensional Vector Bidimensional Clase de Puntos

Después de tener los puntos almacenados es necesario para visualizar la figura hacer una proyección en un plano bidimensional, es decir es necesario convertir de coordenadas en 3D a coordenadas en 2D. (Ver presentación Trans de 3D a 2D proyecciones).

Ya que se hizo la proyección de la figura en el plano bidimensional, ahora si ya se le pueden aplicar las transformaciones:

Transformaciones Tridimensionales (3D)

Rotación sobre el eje de la x.

1 0 00 Cos ∞ Sen ∞0 -sen ∞ Cos ∞

Rotación sobre el eje de la y.

Cos ∞ 0 Sen ∞0 1 0-sen ∞ 0 Cos ∞

Rotación sobre el eje de la z.

Cos ∞ Sen ∞ 0-sen ∞ Cos ∞ 00 0 1

A veces es necesario generar una sola matriz de rotación que nos permita rotar en múltiples sentidos de manera simultánea (Rotación en x=20o en y=30o z=50o) por lo que hay que aplicar coordenadas homogéneas concatenar múltiples transformaciones.

1 0 0 0 Cos y 0 Sen y 0 Cos z Sen z 0 0[x,y,z,1]

. 0 Cos x Sen x 0 . 0 1 0 0 . -sen z Cos z 0 0 =

0 -sen x Cos x 0 -sen y 0 Cos y 0 0 0 1 00 0 0 1 0 0 0 1 0 0 0 1

Rotación en x Rotación en y Rotación en z

La matriz resultante me permite generar rotaciones en múltiples sentidos en un solo proceso.

Resultado=

x*(cry*crz)+y*((-srx*sry)*crz+(crx*srz))+z*((crx*sry)*crz+(srx*srz))x*(cry*-srz)+y*((-srx*sry)*-srz+(crx*crz))+z*((crx*sry)*-srz+(srx*crz))x*-sry+y*(-srx*cry)+z*(crx*cry)

Escalar

En tres dimensiones hay dos formas básicas para escalar una figura:

Variando la distancia del observador en la proyección (Centro de proyección) Aplicar la matriz de escalamiento.

Sx 0[x,y,z] . 0 Sy 0 = [x*Sx,y*Sy,z*Sz]

0 0 SzDonde Sx es la cantidad a escalar en X, Sy la cantidad en Y y Sz la cantidad a escalar en Z.

Trasladar

Para trasladar una figura es necesario aplicar coordenadas homogéneas:

1 0 0 0[x,y,z,1]

. 0 1 0 0 = [x+Tx,y+Ty,z+Tz,1]

0 0 1 0Tx Ty Tz 1

Tx es la cantidad a trasladar en X, Ty la cantidad a Trasladar en Y y Tz la cantidad a trasladar en Z.

Vistas

Para poder obtener las vistas ortográficas es necesario quitar algunos valores, por ejemplo si se quiere sacar la vista frontal de una figura se debe de eliminar la profundidad, para generar la vista superior será necesario eliminar y y para la vista lateral eliminar x.

Implementar JSlider para las operaciones de rotación y escalamiento.