Graficación

UNIDAD II.- GRAFICACIÓN 2D

___________________________________________________________________
LECCIÓN 2.3.- Transformaciones bidimensionales
___________________________________________________________________

2.3.1.- Definiciones

Transformación geométrica: Una operación u operaciones geométricas que permiten

producir una nueva figura (Homóloga) a partir de otra (Original)

Clasificación:
– Transformación directa: Se conservan el sentido en el plano orientado
– Transformación inversa: Cuando los sentidos de la figura original y la homóloga son
contrarios.

Clasificación en función al aspecto de la figura homóloga:

– Isométrica: Se conservan las dimensiones y ángulos.
Las transformaciones isométricas se denominan movimientos.
– Isomórfica: Cuando se conserva la forma de la figura original (los ángulos)
– Anamórfica: Cuando cambia la forma de la figura original.

Elementos característicos: Definen las correspondencias entre las figuras original y

homóloga en una transformación.

Producto de transformaciones: Es la aplicación sucesiva de dos o más transformaciones.

Tipos de Transformaciones: Simetría Central, Simetría Axial, Traslacion, Giro y Homotecia

Rafael Rivera López

1
Graficación

MODELO: Clase Poligono

package modelos;

import java.awt.*;

public class Poligono extends Polygon implements Dibujable {

private Color color;

private Puntos puntos;

public Poligono(Puntos puntos, Color color) {

this.puntos = puntos;
for (Punto punto : puntos) {
this.addPoint(punto.x, punto.y);
}
this.color = color;
}

@Override
public void dibujar(Graphics g) {
g.setColor(color);
g.fillPolygon(this);
g.setColor(Color.BLACK);
g.drawPolygon(this);
for (Punto punto : puntos) {
punto.dibujar(g);
}
}

public Color getColor() {

return color;
}

Rafael Rivera López

2
Graficación

public void setColor(Color color) {

this.color = color;
}

public Puntos getPuntos() {

return puntos;
}

public void setPuntos(Puntos puntos) {

this.puntos = puntos;
}
}

Clase TransformacionesBidimensionales
package transformacionesbidimensionales;

import controladores.*;
import modelos.*;
import vistas.*;

public class TransformacionesBidimensionales {

public static void main(String[] args) {

VentanaTransformaciones f = new VentanaTransformaciones();
Transformaciones trans = new Transformaciones(); //MODELO
PanelTransformaciones panel =
new PanelTransformaciones(trans); //VISTA

Rafael Rivera López

3
Graficación

OyenteTransformaciones oyente
= new OyenteTransformaciones(trans, panel); //CONTROLADOR
f.addEventos(oyente);
f.setSize(800, 600);
f.setLocation(50, 50);
f.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
f.add(panel);
f.setVisible(true);
}
}

VISTA: Clase VentanaTransformaciones

package vistas;

import java.awt.event.ActionListener;

public class VentanaTransformaciones extends javax.swing.JFrame {

public VentanaTransformaciones() {
initComponents();
}

public void addEventos(ActionListener oyente) {

this.opcionSimetriaAxial.addActionListener(oyente);
this.opcionSimetriaCentral.addActionListener(oyente);
this.opcionEscalado.addActionListener(oyente);
this.opcionRotacion.addActionListener(oyente);
this.opcionSalir.addActionListener(oyente);
this.opcionTranslacion.addActionListener(oyente);
}

private void initComponents() {

barraMenu = new javax.swing.JMenuBar();
menuOpciones = new javax.swing.JMenu();
opcionSimetriaCentral = new javax.swing.JMenuItem();
opcionSimetriaAxial = new javax.swing.JMenuItem();
opcionTranslacion = new javax.swing.JMenuItem();
opcionRotacion = new javax.swing.JMenuItem();
opcionEscalado = new javax.swing.JMenuItem();
separador = new javax.swing.JPopupMenu.Separator();
opcionSalir = new javax.swing.JMenuItem();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
setTitle("Transformaciones Bidimensionales");

Rafael Rivera López

4
Graficación

menuOpciones.setText("Transformación");

opcionSimetriaCentral.setText("Simetría Central");
opcionSimetriaCentral.setName("sCentral"); // NOI18N
menuOpciones.add(opcionSimetriaCentral);

opcionSimetriaAxial.setText("Simetría Axial");
opcionSimetriaAxial.setName("sAxial"); // NOI18N
menuOpciones.add(opcionSimetriaAxial);

opcionTranslacion.setText("Translación");
opcionTranslacion.setName("translacion"); // NOI18N
menuOpciones.add(opcionTranslacion);

opcionRotacion.setText("Rotación");
opcionRotacion.setName("rotacion"); // NOI18N
menuOpciones.add(opcionRotacion);

opcionEscalado.setText("Escalado");
opcionEscalado.setName("escalado"); // NOI18N
menuOpciones.add(opcionEscalado);
menuOpciones.add(separador);

opcionSalir.setText("Salir");
opcionSalir.setName("salir"); // NOI18N
menuOpciones.add(opcionSalir);

barraMenu.add(menuOpciones);
setJMenuBar(barraMenu);
pack();
}// </editor-fold>//GEN-END:initComponents

// Variables declaration - do not modify//GEN-BEGIN:variables

private javax.swing.JMenuBar barraMenu;
private javax.swing.JMenu menuOpciones;
private javax.swing.JMenuItem opcionEscalado;
private javax.swing.JMenuItem opcionRotacion;
private javax.swing.JMenuItem opcionSalir;
private javax.swing.JMenuItem opcionSimetriaAxial;
private javax.swing.JMenuItem opcionSimetriaCentral;
private javax.swing.JMenuItem opcionTranslacion;
private javax.swing.JPopupMenu.Separator separador;
// End of variables declaration//GEN-END:variables
}

Rafael Rivera López

5
Graficación

MODELO: Clase Transformaciones

package modelos;

import java.awt.Color;
import java.awt.geom.Line2D;

public class Transformaciones {

public static final int SIMETRIA_CENTRAL = 1;

public static final int SIMETRIA_AXIAL = 2;
public static final int TRASLACION = 3;
public static final int ROTACION = 4;
public static final int HOMOTECIA = 5;
protected Poligono original;
protected Poligono homologa;
protected Line2D ejeSimetria;
protected int tipoTransformacion;

public Transformaciones() {
crearShapeOriginal();
}

public void crearShapeOriginal() {

int x = 200;
int y = 70;
int[] pX = {x, x + 50, x + 50, x + 100, x + 100, x};
int[] pY = {y, y, y + 100, y + 100, y + 150, y + 150};
Puntos puntos = new Puntos();
for (int i = 0; i < pX.length; i++) {
puntos.add(new Punto(pX[i], pY[i], 2, Color.RED));
}
original = new Poligono(puntos, Color.BLUE);
}

public Poligono getOriginal() {

return original;
}

public Poligono getHomologa() {

return homologa;
}

public Line2D getEjeSimetria() {

return ejeSimetria;
}

Rafael Rivera López

6
Graficación

public int getTipoTransformacion() {

return tipoTransformacion;
}

public void aplicarSimetriaCentral(int xC, int yC) {

tipoTransformacion = SIMETRIA_CENTRAL;
}

public void aplicarSimetriaAxial(int x1, int y1, int x2, int y2) {
tipoTransformacion = SIMETRIA_AXIAL;
}

public void aplicarTranslacion(double dX, double dY) {

tipoTransformacion = TRASLACION;
}

public void aplicarRotacion(double angulo) {

tipoTransformacion = ROTACION;
}

public void aplicarEscalado(float factor) {

tipoTransformacion = HOMOTECIA;
}
}

VISTA: PanelTransformaciones
package vistas;

import java.awt.*;
import javax.swing.JPanel;
import modelos.*;
import static modelos.Transformaciones.*;

public class PanelTransformaciones extends JPanel {

protected Transformaciones trans;

public PanelTransformaciones(Transformaciones trans) {

this.trans = trans;
setBackground(Color.CYAN);
}

@Override

Rafael Rivera López

7
Graficación

public void paintComponent(Graphics g) {

super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
trans.getOriginal().dibujar(g);
if (trans.getHomologa() != null) {
trans.getHomologa().dibujar(g);
}
}
}

CONTROLADOR: OyenteTransformaciones
package controladores;

import java.awt.event.*;
import javax.swing.JComponent;
import modelos.Transformaciones;
import vistas.PanelTransformaciones;

public class OyenteTransformaciones implements ActionListener {

protected Transformaciones trans;

protected PanelTransformaciones panel;

public OyenteTransformaciones(
Transformaciones trans, PanelTransformaciones panel) {
this.trans = trans;
this.panel = panel;
}

@Override
public void actionPerformed(ActionEvent e) {
JComponent origen = (JComponent) e.getSource();
switch (origen.getName()) {
case "sCentral":
int xC = 400;
int yC = 300;
trans.aplicarSimetriaCentral(xC, yC);
break;
case "sAxial":
trans.aplicarSimetriaAxial(50, 500, 650, 50);
break;
case "translacion":
trans.aplicarTranslacion(300, 100);
break;

Rafael Rivera López

8
Graficación

case "rotacion":
trans.aplicarRotacion(30);
break;
case "escalado":
trans.aplicarEscalado(2);
break;
case "salir":
System.exit(0);
}
panel.repaint();
}
}

2.3.2.- Transformaciones Isométricas

Simetría central
Se trazan segmentos que unen los puntos de una figura original con el Centro de Simetría
(C.S.) y se prolongan con una longitud igual a la existente entre el punto y el C.S.
• Elemento característico: Centro de simetría
• Propiedades:
◦ Involutivo: Dos simetrías sucesivas producen el elemento original
◦ Directo: Conserva la relación de ordenación en el plano.

Rafael Rivera López

9
Graficación

Método aplicarSimetríaCentral
public class Transformaciones{
...

public void aplicarSimetriaCentral(int xC, int yC) {

Puntos puntos = new Puntos();
for (Punto punto : original.getPuntos()) {
int xH = 2 * xC - punto.x;
int yH = 2 * yC - punto.y;
puntos.add(new Punto(xH, yH, 2, Color.RED));
}
homologa = new Poligono(puntos, Color.GREEN);
tipoTransformacion = SIMETRIA_CENTRAL;
}

...
}

Rafael Rivera López

10
Graficación

Modificar Clase PanelTransformaciones para dibujar líneas

public class PanelTransformaciones{
...
@Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
trans.getOriginal().dibujar(g);
if (trans.getHomologa() != null) {
trans.getHomologa().dibujar(g);
switch (trans.getTipoTransformacion()) {
case ROTACION:
break;
case SIMETRIA_AXIAL:
g2.setColor(Color.MAGENTA);
g2.draw(trans.getEjeSimetria());
default:
dibujarLineas(g2);
}
}
}

private void dibujarLineas(Graphics2D g2) {

g2.setColor(Color.DARK_GRAY);
float[] trama = {2, 2};
BasicStroke s = new BasicStroke(1,
BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, 1, trama, 0);
g2.setStroke(s);
Puntos original = trans.getOriginal().getPuntos();
Puntos homologo = trans.getHomologa().getPuntos();
for (int i = 0; i < original.size(); i++) {
Punto o = original.get(i);
Punto h = homologo.get(i);
g2.drawLine(o.x, o.y, h.x, h.y);
}
}
...
}

Rafael Rivera López

11
Graficación

Simetría axial
Se traza una perpendicular desde un punto al eje de simetría (e.s.) y se prolonga la misma
distancia desde el punto en el eje.

• Elemento característico: Eje de simetría

• Propiedades:
◦ Involutivo: Dos simetrías sucesivas producen el elemento original
◦ Inverso: No conserva la relación de ordenación en el plano.

Rafael Rivera López

12
Graficación

Método aplicarSimetríaAxial
public class Transformaciones{
...
public void aplicarSimetriaAxial(int x1, int y1, int x2, int y2) {
double m1 = (double) (y2 - y1) / (x2 - x1);
Puntos puntos = new Puntos();
for (Punto punto : original.getPuntos()) {
int xO = punto.x;
int yO = punto.y;
int xC = (int) ((xO + m1 * (yO + m1 * x1 - y1)) / (m1 * m1 + 1));
int yC = (int) (m1 * (xC - x1) + y1);
int xH = 2 * xC - punto.x;
int yH = 2 * yC - punto.y;
puntos.add(new Punto(xH, yH, 2, Color.RED));
}
homologa = new Poligono(puntos, Color.GREEN);
double xS = x1 - y1 / m1;
double yI = y1 - m1 * x1;
ejeSimetria = new Line2D.Double(xS, 0, 0, yI);
tipoTransformacion = SIMETRIA_AXIAL;
}
...
}

Rafael Rivera López

13
Graficación

Traslación
Se sitúa el extremo de un segmento paralelo al vector de traslación (v.t.) sobre el punto en la
figura original y el otro extremo en el punto homólogo

• Elemento característico: Vector de traslación

• Propiedades:
◦ No es Involutivo:
◦ Directa: Conserva la relación de ordenación en el plano.

Método aplicarTraslacion
public class Transformaciones{
...
public void aplicarTranslacion(double dX, double dY) {
Puntos puntos = new Puntos();
for (Punto punto : original.getPuntos()) {
int xO = punto.x;
int yO = punto.y;
int xH = (int) (xO + dX);
int yH = (int) (yO + dY);
puntos.add(new Punto(xH, yH, 2, Color.RED));
}
homologa = new Poligono(puntos, Color.GREEN);
tipoTransformacion = TRASLACION;
}
...
}

Rafael Rivera López

14
Graficación

Giro
Se traza por el punto de la imagen original un arco con centro en el centro de giro (C.G.) que
abarque el ángulo de giro
• Elemento característico: Centro de giro, ángulo de giro.
• Propiedades:
◦ No es Involutivo:
◦ Directa: Conserva la relación de ordenación en el plano.

Método aplicarGiro
public class Transformaciones{
...
public void aplicarRotacion(double angulo) {
double rad = Math.toRadians(angulo);
Puntos puntos = new Puntos();
for (Punto punto : original.getPuntos()) {
int xO = punto.x;
int yO = punto.y;
int xH = (int) (xO * Math.cos(rad) - yO * Math.sin(rad));
int yH = (int) (xO * Math.sin(rad) + yO * Math.cos(rad));
puntos.add(new Punto(xH, yH, 2, Color.RED));
}
homologa = new Poligono(puntos, Color.GREEN);
tipoTransformacion = ROTACION;
}
...
}

Rafael Rivera López

15
Graficación

2.3.3.- Transformaciones Isomórfas

Homotecia (Escalado)
Se traza la recta que contiene al punto de la imagen original y al centro de homotecia (C.H.) y
a partir del C.H., la distancia dada por la razón de homotecia (k) por la longitud entre el C.H.
y el punto original.
• Propiedades:
◦ No es Involutivo:

◦ Directa: Conserva la relación de ordenación en el plano.

Método aplicarEscalado
public class Transformaciones{
...
public void aplicarEscalado(float factor) {
Puntos puntos = new Puntos();
for (Punto punto : original.getPuntos()) {
int xO = punto.x;
int yO = punto.y;
int xH = (int) (xO * factor);
int yH = (int) (yO * factor);
puntos.add(new Punto(xH, yH, 2, Color.RED));
}
homologa = new Poligono(puntos, Color.GREEN);
tipoTransformacion = HOMOTECIA;
}
...
}

Rafael Rivera López

16