Nombre: Galindo Crdenas Enrique Trabajo: reas de Visualizacin Introduccin Para la visualizacin cientfica existen muchas herramientas que

se pueden utilizar con el fin de comprender los fenmenos, sus acciones, sus reacciones, modificaciones y caractersticas en un determinado ambiente y/o contexto. Como consecuencia la ciencia se ayuda de las diferentes reas de visualizacin, que principalmente son las siguientes: Graficacin por computadora, procesamiento de imgenes, visin por computadora, CAD/CAE, interfaces grficas con interaccin humano-mquina, visualizacin de informacin, realidad virtual y aumentada y animacin y video. Este trabajo se enfocar a desarrollar el tema de procesamiento de imagenes, del cual surgen muchas variantes y varias reas de visualizacin involucradas, con el fin de manipular la imagen para obtener efectos, datos, caractersticas y objetos identificados. Procesamiento de Imgenes. Cuando la humanidad empez a procesar imgenes se hacia con pinturas vegetales y otros mtodos para plasmar caractersticas de su entorno y su existencia a travs del tiempo, manejando colores que surgen con la mezcla de otros colores o con la unin en el material en donde se plasmaba la figura; claro es una forma muy primitiva. Rpidamente surgieron los smbolos, cdigos, lenguaje y la representacin grfica de las culturas, de las creencias, de la flora, la fauna, el mar, ocanos, etc. En estos pasos el procesamiento de la imgen era manual e imprecisa debido a la dificultad de los trazos. Adelantndonos con la perfeccin del arte visual surgen los primeros mtodos para obtener cualquier tipo de color con diferentes tipos de materiales, obtener colores de diferente tonalidad, efectos de luz y sombra. Con el desarrollo tecnolgico surgen las cmaras fotogrficas con lo que cambia radicalmente la forma de procesar imgenes, ya que este mtodo utiliza la luz para impregnar una imgen en un rollo con cinta especial, que con un procedimiento especial permite la obtencin de una imgen real. Primero con cmaras en blanco y negro y despus con cmaras a color, lo interesante de todo esto es que el procesamiento surge aqu como acutalmente lo conocemos, porque debido a procedimientos qumicos principalmente, se puede obtener una foto tamao normal, tamao definido ya sea ampliado o reducido, negativo de la imgen, una imgen con marco, opaca, obscura, clara, manipulada, con diferente tono, color, con objetos superpuestos que no correspondan al tiempo en que se haba tomado la foto, etc.

A continuacin se observan unos ejemplos de cmo se hace la manipulacin:

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 imgenes en las computadoras se necesit de un conjunto de elementos fcilmente manipulables para poder plasmar realmente la imgen en el monitor como es en una fotografa. Para esto se establecieron los modelos de color RGB, CMY, CMYK, HSV, entre otros que permitieron la combinacin de colores, de luz, de contraste y valores de transparencia necesarios para plasmar imgenes en monitores e impresoras.

As, un buen programador podra manipular las imgenes a su antojo aplicando funciones matemticas, algebra lineal y mtodos de procesamiento de datos para obtener resultados sorprendentes, sumando a la frmula programas que permiten editar las imgenes con pixeles de forma sencilla y que cuentan con varios tipos de funciones y de efectos especiales. Un pixel es la unidad mnima de representacin de un color cuyas caractersticas estn 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 cuadrcula, en donde cada celda tiene un valor numrico, es un smil comparado con una matriz con el tamao de la imagen en donde se colocan los valores que representan a la misma, si somos ms especficos en el caso del modelo RGB se puede hablar de tres matrices en donde cada una tiene el valor de rojo, verde y azul correspondiente.

Representacin de pixeles en un monitor de televisin.

Pero si son nmeros cmo se qu numero representa a qu color? Es una pregunta que todos nos hacemos cuando vemos estos temas, el concepto es simple, pero para esto hay que hablar un poco sobre las diferentes estructuras de datos que se usan para obtener datos de color. La estructura ms sencilla est compuesta de un bit, en donde se determina slo el valor de blanco o negro a un pixel. Es decir 21 = 2 colores. Ejemplo:

Imagen monocromtica.

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

Imagen hecha con 4 bits - 16 colores.

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

Imagen 8 bits 256 colores.

Y llegamos al estndar que son imgenes de 24 bits, es decir, 224 = 6 millones de colores. Ejemplo:

Imagen de 24 bits 6 millones de colores.

Existen ms estructuras de datos, pero estas son las principales conforme se desarrollo tecnolgicamente la manera de representar imagenes, an sigue siendo un estandar utilizar imagenes de 24 bits RGB. Para las imagenes estandar tenemos 256 diferentes combinaciones de rojo, verde y azul: R = 9 bits = 0000 1111 => Bits ms significativos G = 9 bits = 1010 1000 B = 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 convierten estos ceros y unos en decimal o hexadecimal, por lo que crea confusin, pero si se transforman a su respectiva base se observar la equivalencia sin problemas. 0000 1111 1010 1000 1110 00002 = 102627210 = FA8E016

Ejemplos de esta tecnologa, que tambin se llama Procesamiento Digital de Imgenes al transformar la imagen en datos con operaciones aplicables, son:

Imgenes manipuladas con programas de edicin especializados.

Con la evolucin de las cmaras tambin se pueden hacer efectos especiales directamente, ya que la mayora hoy en da son digitales y por tanto utilizan pixeles a diferencia de las cmaras convencionales, muchas de las cmaras estn integradas a dispositivos mviles y en las computadoras porttiles. Para manejar las imgenes existen dos formas, una es utilizar mapas de bits, es decir un conjunto de bits cuyo orden es igual a la imgen que interpreta el visualizador de imgenes, mientras que la otra manera es con trazos vectoriales, donde no se necesitan los valores como tal, sino ms bien se necesitan ngulos de las figuras y caractersticas de escala para que al momento de su manipulacin slo la computadora calcule el nuevo tamao y la figura que se crea, esto permite un nivel mucho ms exacto de manipulacin y mucho ms ligero. En especial hay programas para cada tipo de manipulacin, por decir algunos, photoshop y GIMP son para manejar pixeles y mapas de bits, Corel Draw y Adobe Flash son los que manejan los datos con vectores y clculos. Y para cada imagen tambin se asigna un formato con sus caractersticas especiales y se le asigna una extensin estndar, algunas imagenes para procesar requieren de compresin hecha a travs del reconocimiento de patrones, requieren la definicin de valores alfa (transparencia) y de adjuntar datos adicionales.

A continuacin se muestra una imgen que dice las caractersticas de las principales extensiones de imgenes utilizadas cotidianamente:

Aplicaciones. Las aplicaciones del procesamiento de imgenes son muchas, generalmente se utiliza para dar esttica a la imgen, es decir, modificar el brillo, el contraste, el color para eliminar defectos surgidos al momento de que la fotografa es tomada. Se utilizan efectos especiales como son marcos, colores base, enfoque, relieve, rotacin, invertir horizontalmente o verticalmente, realzar bordes, aadir ruido, entre otros muchos, con el fin de detectar elementos que ayuden a entender mejor la imgen, darle un toque artstico o un retoque. A continuacin se muestran varios ejemplos:

Para el procesamiento digital de imgenes cientfico se requieren todas estas funciones con el fin de analizar de forma muy detallada fenmenos o caractersticas del objeto de estudio, un ejemplo es cuando se requiere clasificar los diferentes peces que existen en un arrecife, primero se obtiene la foto con cmara especial que permita una imgen a detalle y amplia dentro del agua, para despus con un programa especializado localizar cada objeto de tipo pez y analizarlo para poder catalogarlo a un tipo que pertenezca. Otro ejemplo:

Avispa adulta enroscada en forma de bola.

La avispa fue iluminada con dos flashes electrnicos para resaltar los colores iridiscentes naturales en su cuerpo, con tecnologa dedicada a este estudio y con la manipulacin de la imagen obtenida se pueden determinar las zonas de calor y de frio segn la estructura de la avispa.

Conclusin. Esta rea de visualizacin siempre ser un tema, incluso en el futuro se seguir utilizando, el motivo principal es que el ser humano absorve mucha informacin a travs de la vista, as que es necesario investigar y hacer tecnologa para mejorar las calidades de imagen, los formatos, los efectos y la resolucin. En la asignatura Procesamiento Digital de Imgenes se ve esto a detalle, por lo general los conceptos son sencillos, lo que es complicado es realizar las frmulas y clculos asociados a la teora, adems al momento de programar hay que pasar de lo aprendido a cdigo, que igualmente es difcil. 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 lo que la imaginacin pueda crear tambin puede ser representado en un dibujo y como dibujo se puede hacer uso de la computadora para manipularlo. Bibliografa. Apuntes de la asignatura Procesamiento Digital de Imgenes. Renderati.com. 25/03/2011 http://www.cs.dartmouth.edu/farid/research/digitaltampering. 25/03/2011 Anexo Para complementar esta investigacin anexo un programa en JAVA realizado para la asignatura Procesamiento Digital de Imagenes que hace la representacin del histograma de R,G,B para cualquier imagen compatible con JPEG, GIF y PNG. Siempre muestra el histograma anterior, as que si se desea observar el histograma de una imagen, hay que cargarla dos veces, tambin muestra la coordenada 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; /** * * @author kike */ 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 funcione this.setSize(1220,670); this.setVisible(true); //No hay imagen imagen=null; } //Inicializa todos los componentes private void initComponents(){ //Ventana this.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 fondo contenedor.setBackground(Color.WHITE); //Inicia la Barra de Menu JMenuBar barraMenu = new JMenuBar(); //Inicia Menu Archivo JMenu archivo = new JMenu("Archivo"); //Se colocan los items del menu JMenuItem 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 menu archivo.add(abrir); archivo.add(cerrar); //Se agregan el menu a la bara de menus barraMenu.add(archivo); //se coloca la barra de menu en la ventana this.setJMenuBar(barraMenu); //Inicializa etiqueta etiqueta = 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 etiqueta panelImagen = new PanelImagen(etiqueta,R,G,B); panelImagen.setBounds(0,0,800,600); //se agrega el panel de la Imagen this.add(panelImagen);

//Posicion de los componentes

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

//Metodo para abrir por el menu private void abrirActionPerformed(ActionEvent evt){ //Ventana para escoger el archivo wav JFileChooser abreArchivo = new JFileChooser(); //Indica aceptar o cancelar int seleccion = abreArchivo.showOpenDialog(this); //si es aceptar if (seleccion == JFileChooser.APPROVE_OPTION){ //Cacha el fichero fichero = abreArchivo.getSelectedFile(); //Se muestra el nombre del fichero JOptionPane.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 ICO",JOptionPane.INFORMATION_MESSAGE); } } //Metodo para cerrar Form private void exitForm(WindowEvent evt){ System.exit(0); } //Metodo para cerrar Form por el menu private void cerrarActionPerformed(ActionEvent evt){ System.exit(0); } //Main del programa public static void main(String arg[]){ new Histogramas(); }

un

error,

vuelva

intentarlo","AbreArchivo

0.0.1

FES-Aragon

} /* * 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; /** * * @author kike */ 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); } //Funcin que hace mscara 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); System.out.println(pixel[0]); for(int iContador=0;iContador<pixel.length;iContador++){ 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); System.out.println(pixel[0]); for(int iContador=0;iContador<pixel.length;iContador++){ 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; /** * * @author kike */ 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 etiqueta this.eti = etiqueta; this.Red = R; this.Green = G; this.Blue = B; //Se utiliza un listener de movimiento de mouse this.addMouseMotionListener(this); //Se habilita this.setEnabled(true); //inicializa valores path=""; iAncho=0; iLargo=0; //muestra el panel this.setVisible(true); } //Coloca imagen public void setImagen(Image img, String ruta){ imagen = null; imagen = img;

path = ruta; } //Toma imagen public 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 panel public void paint(Graphics g) { NumberFormat convertir = NumberFormat.getCurrencyInstance(); try{ //Captura tamanno iLargo = imagen.getHeight(this); iAncho = imagen.getWidth(this); //Si es nulo es -1 por eso los if para evitar errores if(iAncho == -1){ iAncho = 0; } if(iLargo == -1){ iLargo = 0; } //encoje la imagen a 800x600 if(iAncho > 800){ iAncho = 800; } if(iLargo > 600){ iLargo = 600; } //El rea de la imagen iArea= iAncho*iLargo; //Arreglo con los valores de cada pixel en la imagen pixel = new int[iArea]; super.paint(g); //Tamanno de la letra y en negritas this.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 pixeles pg.grabPixels(); } catch(InterruptedException e){ } catch(NegativeArraySizeException e){

} catch(ArrayIndexOutOfBoundsException e){ } //Dibuja el string con la posicion y valores RGB g.drawString("Posicin X: "+xPos+" Posicin Y: "+yPos+" R: "+R+" G: "+G+" B: "+B+" A: "+alpha,xPos,yPos); //Coloca el ancho, largo, rea, la posicin y el RGB en la etiqueta eti.setText("Ancho: "+iAncho+" Largo: "+iLargo+" rea: "+iArea+" Posicin X: "+xPos+" Posicin 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 mouse xPos = 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 alpha ARGB(xPos,yPos, pixel); } } //Funcin que hace mscara con los valores para obtener RGB y alpha public void ARGB(int x, int y, int pixel[]) { try{ //Transformacin de arreglo 1 dimension a coordenadas 2d int coord = (x*iAncho)+y; //mientras este en el rango del arreglo if(coord < pixel.length){ //Captura valores alpha=(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; } }