Tag Archives: Imagen

Manipulación de imágenes con Processing

Dentro de un nuevo post sobre visualización gráfica y tenologías relacionadas, vamos a hacer una pequeña reseña en relación a una potente herramienta de manipulacion de imágenes y diseño gráfico.

No es ni más ni menos que el entorno y lenguaje de programación llamado PROCESSING. Este lenguaje está basado en Java y nos permite, de una manera muy sencilla y potente, relaizar diferentes manipulaciones sobre imágenes, desarrollar elementos gráficos, visualizaciones, interacciones y demás temas relacionados con el diseño gráfico y la visualización de datos.

Esta es la URL oficial de PROCESSING, donde se pueden encontrar tutoriales, ejemplos, distribuibles, etc.

Es una herramienta muy potente usada ampliamente en diferentes sectores como el arte, la visualización de datos, el desarrollo de software o incluso es la base de otros lenguajes de programación y entornos de desarrollo como Arduino.

Los dos ejemplos que se muestran a continuación son sencillas pruebas de lo que se puede hacer con Processing a la hora de manipular y analizar imágenes. Pero con Processing se pueden hacer muchas más cosas, como crear formas, textos, imágenes en 2D y 3D, etc. Se recomienda encarecidamente consultar la web oficial y repasar los tutoriales y ejemplos que alli se encuentran.

1. API de Processing

Como hemos dicho antes, Processing está basado en Java, asi que funciona de forma similar. Proporciona una API y una serie de classes que nos permiten trabajar con imágenes de forma sencilla desde cualquier programa o entorno de desarrollo.

Estos son algunos de los elemento de Processing que veremos en los siguientes ejemplos:

  • PApplet – es un applet Java del que extiende nuestra clase principal y que creará una ventana alrededor de nuestro contenido para una mejor visualización.
  • PImage – representa una imagen.
  • setUp() – inicializa la aplcicación.
  • draw() – es invocado de forma recurrente para refrescar el contenido de la aplicación.
  • loadImage() – carga una imagen en memoria.
  • image() – dibuja una imagen en las coordenadas que le indiquemos.

2. Estructuras básicas

Los elementos básicos de los que debe constar una aplicación implementada con Processing serían los siguientes:

  • El applet de Processing

Una alternativa a extender el applet e invocar nuestra aplicación como tal es usar esto dentro del metodo main:

  • El método setpUp() donde se inicializa nuestra aplicación

  • El método draw() que se invoca de forma repetida mientras la aplicación esté activa

  • Otros métodos de captura de eventos, como por ejemplo el siguiente

 

3. Manipulación de imágenes

Una vez tenemos las imagenes cargadas en memoria, podemos acceder a sus píxeles, a las propiedades de estos y usar la API de Processing para manipularlos.

Los píxeles se representan como un array unidimensional. Para acceder a un píxel basta con calcular el índice que le correspondería en ese array. Antes debemos cargar los píxeles de la imagen en cuestión usando la función loadPixels():

 El resultado es un valor numérico que representa al píxel (en función de su RGB, brillo, etc.).

Para modificarlo, podemos escribir un nuevo valor en el array. Despùés llamamos a la función updatePixels() para que vuelque los valores a la imagen de nuevo:

Existen una serie de métodos que podemos usar para determinar las diferentes propiedades de cada píxel, como son el rgb, el brillo, etc:

 

4. Dibujo

Aunque no forma parte de esta explicación, como se ha mencionado antes, Processing es una potente herramienta a la hora de realizar cualquier tipo de dibujo, diseño gráfico, etc. Por supuesto tiene un conjunto de funciones que nos permiten dibujar formas de manera sencilla:

Finalmente, con lo visto hasta aquí podríamos crear un par de funciones que modifiquen los píxeles de una imagen original para que, en un caso, los cambio a blanco o negro en función de su brillo, y en otro caso, los cambie por elipses de un tamaño determinado y del color del píxel. En este caso, en lugar de cambiar la imagen original, dibujamos dos nuevas imágenes. Puedes descargar el proyecto completo desde aqui.

El resultado sería algo como lo siguiente:

processing

A la izquierda, la imagen original, en el centro en blanco y negro, y a la derecha, con elipses de colores.

¡¡Ahora a jugar con Processing!!

 

 

 

Jugando con imágenes en Java

Pasos sencillos para implementar algunas manipulaciones de imágenes con Java.

1. Recortar una parte de la imagen

/* Cut image */
BufferedImage bi = ImageIO.read(imageFile);
BufferedImage cutImage = bi.getSubimage(x, y, width, height);

2. Escalar una imagen

/* Scale image */
Image scaledImage = originalImage.getScaledInstance(50, 50, Image.SCALE_SMOOTH);
BufferedImage bufferedScaled = new BufferedImage(scaledImage.getWidth(null), scaledImage.getHeight(null), BufferedImage.TYPE_INT_RGB);
bufferedScaled.getGraphics().drawImage(scaledImage, 0, 0, null);

3. Cambiar la paleta de colores de la imagen

/* Usa 1 bit para colores (2 colores máximo) y 6 posibles colores */
IndexColorModel cm = new IndexColorModel(1, 6,
new byte[] {-100, 0, 0, 0, -1, 0 }, // rojo
new byte[] {0, -100, 60, 0, -1, 0 }, // verde
new byte[] {0, 0, 0, -100, -1, 0 }); // azul
BufferedImage img = new BufferedImage(image.getWidth(), image.getHeight(), BufferedImage.TYPE_BYTE_INDEXED, cm);
Graphics2D g2 = img.createGraphics();
g2.drawImage(image, 0, 0, null);
g2.dispose();

4. Crear una imagen pixel a pixel

BufferedImage newImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
... /* Iterar por la matriz de píxeles */
newImage.setRGB(j, i, pixel.getValue());
...
ImageIO.write(newImage, "PNG", destFile);