Trabajo Áreas de Visualización - Galindo Cárdenas Enrique

8/4/2019 Trabajo Áreas de Visualización - Galindo Cárdenas Enrique

http://slidepdf.com/reader/full/trabajo-areas-de-visualizacion-galindo-cardenas-enrique 1/16

Nombre: Galindo Cárdenas EnriqueTrabajo: Áreas de Visualización

Introducción

Para la visualización científica existen muchas herramientas que se pueden utilizar con el fin de

comprender los fenómenos, sus acciones, sus reacciones, modificaciones y características en undeterminado ambiente y/o contexto.

Como consecuencia la ciencia se ayuda de las diferentes áreas de visualización, que principalmente son las siguientes: Graficación por computadora, procesamiento de imágenes, visión por computadora, CAD/CAE, interfaces gráficas con interacción humano-máquina, visualización deinformación, realidad virtual y aumentada y animación y video.

Este trabajo se enfocará a desarrollar el tema de procesamiento de imagenes, del cual surgenmuchas variantes y varias áreas de visualización involucradas, con el fin de manipular la imagen paraobtener efectos, datos, características y objetos identificados.

Procesamiento de Imágenes.

Cuando la humanidad empezó a procesar imágenes se hacia con pinturas vegetales y otrosmétodos para plasmar características de su entorno y su existencia a través del tiempo, manejandocolores que surgen con la mezcla de otros colores o con la unión en el material en donde se plasmaba lafigura; claro es una forma muy primitiva.

Rápidamente surgieron los símbolos, códigos, lenguaje y la representación gráfica de lasculturas, de las creencias, de la flora, la fauna, el mar, océanos, etc. En estos pasos el procesamiento dela imágen era manual e imprecisa debido a la dificultad de los trazos.

Adelantándonos con la perfección del arte visual surgen los primeros métodos para obtener cualquier tipo de color con diferentes tipos de materiales, obtener colores de diferente tonalidad,efectos de luz y sombra.

Con el desarrollo tecnológico surgen las cámaras fotográficas con lo que cambia radicalmente laforma de procesar imágenes, ya que este método utiliza la luz para impregnar una imágen en un rollocon cinta especial, que con un procedimiento especial permite la obtención de una imágen real.

Primero con cámaras en blanco y negro y después con cámaras a color, lo interesante de todoesto es que el procesamiento surge aquí como acutalmente lo conocemos, porque debido a procedimientos químicos principalmente, se puede obtener una foto tamaño normal, tamaño definidoya sea ampliado o reducido, negativo de la imágen, una imágen con marco, opaca, obscura, clara,manipulada, con diferente tono, color, con objetos superpuestos que no correspondían al tiempo en quese había tomado la foto, etc.



A continuación se observan unos ejemplos de cómo se hace la manipulación:

General Ulysses S. Grant frente a sus tropas en “City Point”, Virginia durante la guerra civil americana. (1864)

Pesonas excluidas de la foto por una inconformidad en China. 1936

Cuando se implementaron las imágenes en las computadoras se necesitó de un conjunto deelementos fácilmente manipulables para poder plasmar realmente la imágen en el monitor como es enuna fotografía.

Para esto se establecieron los modelos de color RGB, CMY, CMYK, HSV, entre otros que permitieron la combinación de colores, de luz, de contraste y valores de transparencia necesarios para plasmar imágenes en monitores e impresoras.



Así, un buen programador podría manipular las imágenes a su antojo aplicando funcionesmatemáticas, algebra lineal y métodos de procesamiento de datos para obtener resultadossorprendentes, sumando a la fórmula programas que permiten editar las imágenes con pixeles de formasencilla y que cuentan con varios tipos de funciones y de efectos especiales.

Un pixel es la unidad mínima de representación de un color cuyas características están dadas en

coordenadas “x”, y “y” de la pantalla, valores generalmente R (rojo), G (verde), B(azul) y valor Alfa(transparencia).

Para entender mejor este concepto hay que imaginarnos una cuadrícula, en donde cada celdatiene un valor numérico, es un símil comparado con una matriz con el tamaño de la imagen en donde secolocan los valores que representan a la misma, si somos más específicos en el caso del modelo RGBse puede hablar de tres matrices en donde cada una tiene el valor de rojo, verde y azul correspondiente.

Representación de pixeles en un monitor de televisión.

¿Pero si son números cómo se qué numero representa a qué color? Es una pregunta que todosnos hacemos cuando vemos estos temas, el concepto es simple, pero para esto hay que hablar un pocosobre las diferentes estructuras de datos que se usan para obtener datos de color.

La estructura más sencilla está compuesta de un bit, en donde se determina sólo el valor de blanco o negro a un pixel. Es decir 21 = 2 colores. Ejemplo:

Imagen monocromática.

Después tenemos a la estructura con 4 bits, es decir, 24 = 16 colores. Ejemplo:

Imagen hecha con 4 bits - 16 colores.



A continuación presento la de 8 bits, es decir, 28 = 256 colores. Ejemplo:

Imagen 8 bits – 256 colores.

Y llegamos al estándar que son imágenes de 24 bits, es decir, 2 24 = 6 millones de colores.Ejemplo:

Imagen de 24 bits – 6 millones de colores.

Existen más estructuras de datos, pero estas son las principales conforme se desarrollotecnológicamente la manera de representar imagenes, aún sigue siendo un estandar utilizar imagenes de24 bits RGB.

Para las imagenes estandar tenemos 256 diferentes combinaciones de rojo, verde y azul:

R = 9 bits = 0000 1111 => Bits más significativosG = 9 bits = 1010 1000B = 9 bits = 1110 0000 => Bits menos significativos

Para hacer un total de RGB = 24 bits = 0000 1111 1010 1000 1110 0000 = valor de color.

Así es como se reconoce qué valor representá a qué color, en muchas ocaciones se conviertenestos ceros y unos en decimal o hexadecimal, por lo que crea confusión, pero si se transforman a surespectiva base se observará la equivalencia sin problemas.

0000 1111 1010 1000 1110 00002 = 102627210 = FA8E016



Ejemplos de esta tecnología, que también se llama Procesamiento Digital de Imágenes altransformar la imagen en datos con operaciones aplicables, son:

Imágenes manipuladas con programas de edición especializados.

Con la evolución de las cámaras también se pueden hacer efectos especiales directamente, ya

que la mayoría hoy en día son digitales y por tanto utilizan pixeles a diferencia de las cámarasconvencionales, muchas de las cámaras están integradas a dispositivos móviles y en las computadoras portátiles.

Para manejar las imágenes existen dos formas, una es utilizar mapas de bits, es decir unconjunto de bits cuyo orden es igual a la imágen que interpreta el visualizador de imágenes, mientrasque la otra manera es con trazos vectoriales, donde no se necesitan los valores como tal, sino más biense necesitan ángulos de las figuras y características de escala para que al momento de su manipulaciónsólo la computadora calcule el nuevo tamaño y la figura que se crea, esto permite un nivel mucho másexacto de manipulación y mucho más ligero.

En especial hay programas para cada tipo de manipulación, por decir algunos, photoshop yGIMP son para manejar pixeles y mapas de bits, Corel Draw y Adobe Flash son los que manejan losdatos con vectores y cálculos.

Y para cada imagen también se asigna un formato con sus características especiales y se leasigna una extensión estándar, algunas imagenes para procesar requieren de compresión hecha a travésdel reconocimiento de patrones, requieren la definición de valores alfa (transparencia) y de adjuntar datos adicionales.



A continuación se muestra una imágen que dice las características de las principales extensionesde imágenes utilizadas cotidianamente:

Aplicaciones.

Las aplicaciones del procesamiento de imágenes son muchas, generalmente se utiliza para dar estética a la imágen, es decir, modificar el brillo, el contraste, el color para eliminar defectos surgidos almomento de que la fotografía es tomada.

Se utilizan efectos especiales como son marcos, colores base, enfoque, relieve, rotación, invertir horizontalmente o verticalmente, realzar bordes, añadir ruido, entre otros muchos, con el fin de detectar elementos que ayuden a entender mejor la imágen, darle un toque artístico o un retoque.

A continuación se muestran varios ejemplos:



Para el procesamiento digital de imágenes científico se requieren todas estas funciones con elfin de analizar de forma muy detallada fenómenos o características del objeto de estudio, un ejemplo escuando se requiere clasificar los diferentes peces que existen en un arrecife, primero se obtiene la fotocon cámara especial que permita una imágen a detalle y amplia dentro del agua, para después con un programa especializado localizar cada objeto de tipo pez y analizarlo para poder catalogarlo a un tipoque pertenezca.

Otro ejemplo:

Avispa adulta enroscada en forma de bola.

La avispa fue iluminada con dos flashes electrónicos para resaltar los colores iridiscentesnaturales en su cuerpo, con tecnología dedicada a este estudio y con la manipulación de la imagenobtenida se pueden determinar las zonas de calor y de frio según la estructura de la avispa.



Conclusión.

Esta área de visualización siempre será un tema, incluso en el futuro se seguirá utilizando, elmotivo principal es que el ser humano absorve mucha información a través de la vista, así que esnecesario investigar y hacer tecnología para mejorar las calidades de imagen, los formatos, los efectosy la resolución.

En la asignatura “Procesamiento Digital de Imágenes” se ve esto a detalle, por lo general losconceptos son sencillos, lo que es complicado es realizar las fórmulas y cálculos asociados a la teoría,además al momento de programar hay que pasar de lo aprendido a código, que igualmente es difícil.

Todo se reduce a operaciones con matrices en donde se pueden manipular datos al antojo del programador, se pueden encontrar patrones, se pueden encontar bordes, figuras, letras, objetos, en fin loque la imaginación pueda crear también puede ser representado en un dibujo y como dibujo se puedehacer uso de la computadora para manipularlo.

Bibliografía.

Apuntes de la asignatura Procesamiento Digital de Imágenes.Renderati.com. 25/03/2011http://www.cs.dartmouth.edu/farid/research/digitaltampering. 25/03/2011

Anexo

Para complementar esta investigación anexo un programa en JAVA realizado para la asignatura“Procesamiento Digital de Imagenes” que hace la representación del histograma de R,G,B paracualquier imagen compatible con JPEG, GIF y PNG. Siempre muestra el histograma anterior, así que sise desea observar el histograma de una imagen, hay que cargarla dos veces, también muestra lacoordenada del pixel junto con los valores RGB de la imagen al pasar el puntero.

/** Histogramas.java** Created on 8 de octubre de 2010, 4:59** To change this template, choose Tools | Template Manager * and open the template in the editor.*/

/**** @author kike*/

import Histograma.Histograma;

import Histograma.PanelImagen;

import java.awt.BorderLayout;import java.awt.Color;import java.awt.Container;import java.awt.Event;import java.awt.Image;import java.awt.Toolkit;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import java.io.File;



import javax.swing.JButton;import javax.swing.JFileChooser;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JMenu;import javax.swing.JMenuBar;import javax.swing.JMenuItem;import javax.swing.JOptionPane;import javax.swing.JPanel;


public class Histogramas extends JFrame{

private File fichero;//private JButton btnPintar;private JPanel histoPanel;private PanelImagen panelImagen;private Image imagen;

private int iAncho, iLargo; private JLabel etiqueta;private Histograma R, G, B;

/** Creates a new instance of ValorRGB */public Histogramas() {

initComponents();//Tamanno de la ventana y posicion en el constructor para que funcionethis.setSize(1220,670);this.setVisible(true);//No hay imagenimagen=null;

}

//Inicializa todos los componentesprivate void initComponents(){

//Ventanathis.setName("Principal");this.setTitle("AbreArchivo 0.0.1 FES-Aragon ICO");

//Evento cerrar this.addWindowListener(new WindowAdapter(){public void windowClosing(WindowEvent evt){

exitForm(evt);}

});

this.setLayout(null);

//btnPintar= new JButton("Histograma");

//btnPintar.setBounds(960,590,100,30);

//this.add(btnPintar);

//Contenedor en donde habita JLabel etiqueta y la imagen

Container contenedor = this.getContentPane();//Color de fondocontenedor.setBackground(Color.WHITE);

//Inicia la Barra de MenuJMenuBar barraMenu = new JMenuBar();//Inicia Menu ArchivoJMenu archivo = new JMenu("Archivo");//Se colocan los items del menuJMenuItem abrir = new JMenuItem("Abrir");JMenuItem cerrar = new JMenuItem("Cerrar");

//Evento de cerrar



cerrar.addActionListener(new ActionListener(){public void actionPerformed(ActionEvent evt){

cerrarActionPerformed(evt);}

});//Evento de Abrir abrir.addActionListener(new ActionListener(){

public void actionPerformed(ActionEvent evt){abrirActionPerformed(evt);

}}

);//annade items al menuarchivo.add(abrir);archivo.add(cerrar);

//Se agregan el menu a la bara de menusbarraMenu.add(archivo);//se coloca la barra de menu en la ventanathis.setJMenuBar(barraMenu);

//Inicializa etiquetaetiqueta = new JLabel("Abre Archivo... ");

etiqueta.setBounds(0,601,800,20);

/////////////////////////////

histoPanel = new JPanel();

histoPanel.setBackground(Color.blue);

histoPanel.setBounds(801,0,410,600);

histoPanel.setLayout(null);

R = new Histograma('R');

R.setForeground(Color.white);R.setBounds(20,20,histoPanel.getWidth()-40,(histoPanel.getHeight()/3)-40);

histoPanel.add(R); G = new Histograma('G');

G.setForeground(Color.white);G.setBounds(20,(histoPanel.getHeight()/3)+20,histoPanel.getWidth()-40,(histoPanel.getHeight()/3)-40);

histoPanel.add(G);

B = new Histograma('B');

B.setForeground(Color.white);B.setBounds(20,((histoPanel.getHeight()/3)*2)+19,histoPanel.getWidth()-40,(histoPanel.getHeight()/3)-40);

histoPanel.add(B);

/////////////////////////////

//Inicializa el panel de la imagen y se manda etiquetapanelImagen = new PanelImagen(etiqueta,R,G,B);

panelImagen.setBounds(0,0,800,600);

//se agrega el panel de la Imagenthis.add(panelImagen);

//Posicion de los componentes



contenedor.add(etiqueta,BorderLayout.SOUTH);contenedor.add(histoPanel,BorderLayout.EAST);

pack();

}

//Metodo para abrir por el menuprivate void abrirActionPerformed(ActionEvent evt){

//Ventana para escoger el archivo wavJFileChooser abreArchivo = new JFileChooser();//Indica aceptar o cancelar int seleccion = abreArchivo.showOpenDialog(this);

//si es aceptar if (seleccion == JFileChooser.APPROVE_OPTION){

//Cacha el ficherofichero = abreArchivo.getSelectedFile();//Se muestra el nombre del ficheroJOptionPane.showMessageDialog(this,fichero.getName(),"AbreArchivo 0.0.1 FES-Aragon ICO",JOptionPane.INFORMATION_MESSAGE);

imagen= Toolkit.getDefaultToolkit().getImage(fichero.getAbsolutePath());

panelImagen.setImagen(imagen,fichero.getAbsolutePath());

panelImagen.histogramaRun();

//////////////////////////////

///////////////////////////////*if(panelImagen.getAnchoImagen()*panelImagen.getLargoImagen()>0){

// System.out.println(panelImagen.getAnchoImagen());R.setDimensionImagen(panelImagen.getAnchoImagen(),panelImagen.getLargoImagen());R.setPixelesImagen(panelImagen.getPixelesImagen());R.repaint();

G.setDimensionImagen(panelImagen.getAnchoImagen(),panelImagen.getLargoImagen());

G.setPixelesImagen(panelImagen.getPixelesImagen());G.repaint();

B.setDimensionImagen(panelImagen.getAnchoImagen(),panelImagen.getLargoImagen());B.setPixelesImagen(panelImagen.getPixelesImagen());B.repaint();

}*/

}//si ocurre un error if(seleccion == JFileChooser.ERROR_OPTION){

JOptionPane.showMessageDialog(this,"Ocurrio un error, vuelva a intentarlo","AbreArchivo 0.0.1 FES-AragonICO",JOptionPane.INFORMATION_MESSAGE);

}}

//Metodo para cerrar Form

private void exitForm(WindowEvent evt){System.exit(0);

}

//Metodo para cerrar Form por el menuprivate void cerrarActionPerformed(ActionEvent evt){

System.exit(0);}

//Main del programapublic static void main(String arg[]){

new Histogramas();}



}

/** Histograma.java** Created on 11 de octubre de 2010, 4:08** To change this template, choose Tools | Template Manager * and open the template in the editor.

*/

package Histograma;

import java.awt.Color;import java.awt.Graphics;import java.awt.Image;import java.awt.image.PixelGrabber;import javax.swing.JPanel;


public class Histograma extends JPanel{

private int xPos, yPos;private int[] alpha, R, G, B;private int[] pixel;private int iAncho, iLargo;private char color;

/** Creates a new instance of Histograma */public Histograma(char colorRGB) {

this.setEnabled(true);

this.iAncho = 0;this.iLargo = 0;

this.color = colorRGB;this.alpha = new int[256];this.R = new int[256];

this.G = new int[256];this.B = new int[256];

this.repaint();}

public void setPixelesImagen(int[] pixeles){

this.pixel = pixeles;}

public void setDimensionImagen(int largo, int ancho){

this.iAncho = ancho;this.iLargo = largo;this.pixel = new int[iAncho*iLargo];

}

public void paint(Graphics g){

g.fillRect(0,0,this.getWidth(),this.getHeight());

ARGB(g);

}//Función que hace máscara con los valores para obtener RGB y alpha

public void ARGB(Graphics g) {

try{

switch(color){case 'R':



g.setColor(Color.red);

System.out.println(pixel[0]);for(int iContador=0;iContador<pixel.length;iContador++){

R[(pixel[iContador]>>16)&0xff]++;//System.out.println("Contador: "+iContador+":"+pixel[iContador]);

}

for(int iContador=0;iContador<=255;iContador++){

g.fillRect(iContador+2,2,2,R[iContador]/32);System.out.println(iContador+":"+R[iContador]);

}

for(int iContador=0;iContador<=255;iContador++){R[iContador]=0;//System.out.println("Contador: "+iContador+":"+pixel[iContador]);

}

break;case 'G':

g.setColor(Color.green);


G[(pixel[iContador]>>8)&0xff]++;//System.out.println("Contador: "+iContador+":"+pixel[iContador]);

}

for(int iContador=0;iContador<=255;iContador++){g.fillRect(iContador+2,2,2,G[iContador]/32);System.out.println(iContador+":"+G[iContador]);

}

for(int iContador=0;iContador<=255;iContador++){G[iContador]=0;//System.out.println("Contador: "+iContador+":"+pixel[iContador]);

}

break;case 'B':

g.setColor(Color.blue);


B[pixel[iContador]&0xff]++;//System.out.println("Contador: "+iContador+":"+pixel[iContador]);

}

for(int iContador=0;iContador<=255;iContador++){g.fillRect(iContador+2,2,2,B[iContador]/32);System.out.println(iContador+":"+B[iContador]);

}

for(int iContador=0;iContador<=255;iContador++){B[iContador]=0;//System.out.println("Contador: "+iContador+":"+pixel[iContador]);

}break;

}

}catch(NullPointerException e){}catch(NegativeArraySizeException e){}catch(ArrayIndexOutOfBoundsException e){}

}



}

/** PanelImagen.java** Created on 8 de octubre de 2010, 5:01** To change this template, choose Tools | Template Manager * and open the template in the editor.*/

package Histograma;

import java.awt.Font;import java.awt.Graphics;import java.awt.Image;import java.awt.event.MouseEvent;import java.awt.event.MouseMotionListener;import java.awt.image.PixelGrabber;import java.text.NumberFormat;import javax.swing.JLabel;import javax.swing.JPanel;import javax.swing.JToolTip;


public class PanelImagen extends JPanel implements MouseMotionListener{

private JToolTip posicion;private Image imagen;private String path;private PixelGrabber pg;private JLabel eti;private int iLargo, iAncho, iArea;private int pixel[];private int xPos, yPos;private int R, G, B;private int alpha;

private Histograma Red,Green,Blue;

/** Creates a new instance of frameInterno */public PanelImagen(JLabel etiqueta, Histograma R, Histograma G, Histograma B) {

//Se usa la etiquetathis.eti = etiqueta;

this.Red = R;this.Green = G;this.Blue = B;

//Se utiliza un listener de movimiento de mousethis.addMouseMotionListener(this);//Se habilitathis.setEnabled(true);

//inicializa valorespath="";iAncho=0;iLargo=0;

//muestra el panelthis.setVisible(true);

}

//Coloca imagenpublic void setImagen(Image img, String ruta){

imagen = null;imagen = img;



path = ruta;}//Toma imagenpublic Image getImagen(){

return imagen;}

public void histogramaRun(){

Red.setDimensionImagen(iAncho,iLargo);

Red.setPixelesImagen(pixel);Red.repaint();

Green.setDimensionImagen(iAncho,iLargo);Green.setPixelesImagen(pixel);Green.repaint();

Blue.setDimensionImagen(iAncho,iLargo);Blue.setPixelesImagen(pixel);Blue.repaint();

}

//Pinta en el panelpublic void paint(Graphics g) {

NumberFormat convertir = NumberFormat.getCurrencyInstance();

try{//Captura tamannoiLargo = imagen.getHeight(this);iAncho = imagen.getWidth(this);

//Si es nulo es -1 por eso los if para evitar erroresif(iAncho == -1){

iAncho = 0;}if(iLargo == -1){

iLargo = 0;}//encoje la imagen a 800x600if(iAncho > 800){

iAncho = 800;}if(iLargo > 600){

iLargo = 600;}

//El área de la imageniArea= iAncho*iLargo;//Arreglo con los valores de cada pixel en la imagenpixel = new int[iArea];

super.paint(g);

//Tamanno de la letra y en negritasthis.setFont(new Font("",Font.BOLD,18));

//Dibuja Imagen en el panel

g.drawImage(imagen,0,0,iAncho,iLargo,this);

//Inicializa el PixelGrabber pg = new PixelGrabber(imagen,0,0,iAncho,iLargo,pixel,0,iAncho);

try{

//Toma los pixelespg.grabPixels();

}catch(InterruptedException e){}catch(NegativeArraySizeException e){



}catch(ArrayIndexOutOfBoundsException e){}//Dibuja el string con la posicion y valores RGBg.drawString("Posición X: "+xPos+" Posición Y: "+yPos+" R: "+R+" G: "+G+" B: "+B+" A: "+alpha,xPos,yPos);//Coloca el ancho, largo, área, la posición y el RGB en la etiquetaeti.setText("Ancho: "+iAncho+" Largo: "+iLargo+" Área: "+iArea+" Posición X: "+xPos+" Posición Y: "+yPos+" R: "+R+" G: "+G+" B: "+B);

this.setOpaque(false);this.paintComponent(g);

}catch(NullPointerException e){}catch(NegativeArraySizeException e){}catch(ArrayIndexOutOfBoundsException e){}

}

public void mouseDragged(MouseEvent e) {}

public void mouseMoved(MouseEvent e) {

//Posicion X y Y del mousexPos = e.getX();yPos = e.getY();

//Si la posicion del mouse sobrepasa al ancho o al largo lo evita

if((xPos<=iAncho)&&(yPos<=iLargo)){

//Captura valores RGB y alphaARGB(xPos,yPos, pixel);

}}

//Función que hace máscara con los valores para obtener RGB y alphapublic void ARGB(int x, int y, int pixel[]) {

try{

//Transformación de arreglo 1 dimension a coordenadas 2dint coord = (x*iAncho)+y;//mientras este en el rango del arreglo

if(coord < pixel.length){ //Captura valoresalpha=(pixel[coord]>>24)&0xff;R = (pixel[coord]>>16)&0xff;G = (pixel[coord]>>8)&0xff;B = (pixel[coord])&0xff;

}}catch(NullPointerException e){}catch(NegativeArraySizeException e){}catch(ArrayIndexOutOfBoundsException e){}

}

public int[] getPixelesImagen(){return pixel;

}

public int getAnchoImagen(){return iAncho;

}

public int getLargoImagen(){return iLargo;

} }

Trabajo Áreas de Visualización - Galindo Cárdenas Enrique

Documents

Transcript of Trabajo Áreas de Visualización - Galindo Cárdenas Enrique