PROGRAMACIÓN: CONCEPTOS || MASTER EN ARTES DIGITALES

Sección 11: Imagen

1. Trabajo con imágenes en Processing: lo básico
2. Analizar y manipular el color: get()
3. De las imágenes fijas al vídeo

Lo primero, antes de empezar con los ejemplos, es conocer a Ramon, que nos servirá para los ejemplos. He aquí un enlace a una imagen suya, tomada en verano de 2006.

Para utilizar archivos de imágen en Processing, hay que utilizar un objeto específico. Es como si fuera un tipo de datos un poco especial, el PImage.

Así, antes de empezar a utilizar un archivo de imágen, hay que declarar un objeto PImage, y después cargar en él el archivo con loadImage:

//creamos objeto
PImage laFoto;
//y cargamos imágen
laFoto = loadImage("ramon.jpg");

Esto equivale más o menos a declarar un tipo de datos y asignarle un valor. Queda pues, utilizarlo. Y ya que estámos con imágenes, de paso la podríamos mostrar, con image():

Your browser does not support the canvas tag.

Source code: ramonsimple

//creamos objeto
PImage laFoto;
//y cargamos imágen
laFoto = loadImage("ramon.jpg");
//la mostramos, en este caso a partir del punto 50,35
image(laFoto,50, 35); 

Como habréis visto, dibujamos la imágen como quien dibuja cualquier otra cosa, básicamente con coordenadas. Así, no es difícil suponer que si ponemos esto en el DRAW podemos darle movimiento a la imágen, por ejemplo ligando su posición a la del mouse, como con los dos ejemplos que siguien:

Your browser does not support the canvas tag.

Source code: ramonmove

Your browser does not support the canvas tag.

Source code: ramonmoveverd

Y no, por una vez, no aplicaremos esto a la pelotita. Claro que si no podéis aguantar y queréis una imágen reboteadora no os será nada difícil crear el sketch...

Algo muy interesante que podemos hacer con imágenes es manipularlas en base a su color. Para esto, primero hay que entender cómo analizamos el color. La base será la función get(), que nos da el valor (en forma de color) de un pixel determinado.

Así, en el ejemplo que sigue podemos pasearnos por la foto de Ramon y ver sobre qué color tenemos el cursor en cada momento.

Your browser does not support the canvas tag.

Source code: ramonpick

//Declaramos una variable del tipo de datos color
// (un objeto color, para ser estrictos)
color theColor;
//y le asignamos, vía la función GET, el color del píxel 
//en el que se encuentra el MOUSE
theColor = get(mouseX,mouseY);

Y si lo podemos analizar, podemos utilizar éste análisis gráficamente. Aquí vamos a utilizar el color en el que estamos para dibujar una ellipse, realizando así una especie de experimento puntillista.

Your browser does not support the canvas tag.

Source code: ramonrounded

Antes de pasar al vídeo, vamos a crear un ejemplo con imágen fija que tenga sentido para hacer el salto:

Your browser does not support the canvas tag.

Source code: ramonsquared

La base del ejemplo es el DOBLE BUCLE que nos permite recorrer los píxels:

  for(int x=0; x<width; x+=salto){
    for(int y=0; y<width; y+=salto){

		//bla, bla, bla...

		}
	}

Y antes de hacer esto con vídeo, veremos un ejemplo básico de vídeo con webcam. La diferencia principal con el primer ejemplo con imágen fija es la sustitución de PImage por Capture. Esto además implica la utilización de la librería de vídeo, que hay que importar.

Nota importante: Processing utiliza la arquitectura QuickTime para trabajar con vídeo. Esto significa que es necesario tener el QuickTime Player instalado (el pro para según qué funciones). Y si estáis en un PC, además es necesario tener un programa que haga de puente entre el divx (vídeo en windows) y el quicktime. La solución gratis es instalar el winvdig (vdig.com). Como la página parece estar inactiva, cuelgo aquí la última versión buena que había.

A parte de eso, lo demás es más o menos igual (el código comentado está en los ejemplos del archivo ZIP):

Y finalmente, podemos pues combinar el vídeo de la webcam con el último ejemplo con imágen fija, hacer sustracción de fondo, color tracking, etc.

Ejemplos de vídeo

Ejemplos de sonido

----------------------------------------------------------------------------------------------------