Teniendo en cuenta el momento álgido que vive la tecnología móvil con un ecosistema cada vez más maduro y con nuevas plataformas como FirefoxOS, Windows Phone 8 o Blackberry 10, la quinta edición de Device Days presentó distintos puntos de vista con especial atención a temas como la Realidad Aumentada, WebGL o Diseño Inclusivo entre otros.

A continuación os presentamos una de las ponencias que tuvo lugar el pasado 1 de marzo dentro del marco de Device Days. Se trata de la conferencia sobre Diseño Inclusivo de Tona Monjo, consultora de la UOC y creadora de Latent, empresa de diseño de interfícies multiplataforma.

Tona Monjo – Diseño Inclusivo

Dentro de WebCat se abordan asuntos diversos, tanto de forma introductoria como especializada, mediante breves exposiciones de no más de quince minutos con el objetivo de trabajar y transmitir una idea concreta al público.

El pasado 13 de febrero tuvo lugar un nuevo encuentro del que a continuación presentamos una breve e interesante muestra. Es la charla de Javier Usobiaga sobre la navegación responsable.

Javier Usobiaga – RWD: dealing with navigation

Realidad aumentada con lenguaje de programación Processing

Gracias a la Realidad Aumentada podemos añadir elementos sintéticos, clásicamente en 3D, a los ya de por sí reales. Con una cámara y gracias a la ayuda de un patrón que ésta interpretará, posicionaremos un objeto en 3D superpuesto a la imagen de video de nuestra escena.

Detección de colisiones con lenguaje de programación Processing

En este ejemplo vamos a detectar si un objeto que llevamos literalmente “pegado” a nuestro cursor del ratón (un círculo rojo), colisiona con un número aleatorio de otros objetos (varios círculos verdes) dispuestos a lo largo de nuestro canvas. Además informaremos al usuario/a mediante texto de si se está produciendo la colisión o no. 

Acceso a WebCam y LUTs en Programación Processing

Una LUT o “Look Up Table” (ver apartado “Lookup tables in image processing” aquí) es un procedimiento por el cual podemos variar las características (pseudocolorear) de una imagen, sea estática o dinámica como en el caso de una webcam. En definitiva se retocan sus píxeles uno a uno.

Acceso a WebCam y procesado en programación Processing

Realizaremos un programa Processing que gracias a la librería Myron nos permitirá disponer de streaming de video en tiempo real vía nuestra webcam, podrá acceder a cada una de las imágenes del streaming y sustituirá los píxeles de la imagen por círculos, discretizándola aún más si cabe. Todo en tiempo real. 

Operaciones con imágenes en programación Processing

Una de las operaciones clásicas en la disciplina del Procesado de Imagen y del Retoque Fotográfico es la resta de imágenes sucesivas. Es muy útil como primer paso en la detección de, por ejemplo, movimiento en una sala.

En nuestro caso realizaremos un sencillo programa Processing que a) Cargará dos imágenes de disco duro, b) Las restará píxel a píxel y c) El resultado lo almacenará como una tercera imagen que se mostrará también por pantalla. En la figura 1 podemos observarlo claramente.

Figura 1. Restamos las imágenes de arriba para obtener la de debajo. Imágenes cortesía de http://www.freeimageslive.com/.

Empecemos por aprender cómo se cargan nuestras imágenes en Processing, gracias al código 1.

// Let's load 2 images and generate
// a third one by substracting them both
// in a per-pixel basis
 
// We create 3 PImage objects for our 3 images
PImage myImage1;
PImage myImage2;
PImage myImage3;
 
// The Setup Function that initializes everything
void setup(){
  // We setup the window with double dimensions than our images
  // in order to fit them 3 inside the canvas
  size(640, 480);
  // We load the 2 original images into their PImage objects
  myImage1 = loadImage("image1_to_test_with.jpg");
  myImage2 = loadImage("image2_to_test_with.jpg");
  // The third image is generated with the same dimensions than the 2nd
  // that, by the way, has the same dimensions than the 1st
  myImage3 = createImage(myImage2.width, myImage2.height, RGB);
}

Código 1. Variables, objetos e inicialización de nuestro programa con carga de imágenes incluida.

Empezamos creándonos tres objetos Pimage de Processing que serán los encargados de almacenar las imágenes en memoria, previa carga de éstas desde disco duro. Dentro de nuestra función de setup()creamos una ventana de 640 por 480 píxeles para poderlas mostrar todas a la vez. A continuación cargamos las dos imágenes a restar, es decir los ficheros image1_to_test_with.jpg e image2_to_test_with.jpg que previamente habremos introducido en un subdirectorio de nombre “data” dentro del directorio de nuestro sketch Processing. Finalmente tenemos las imágenes cargadas dentro de nuestros objetos myImage. El tercer objeto no lo creamos cargando una imagen sino reservando espacio para acomodar la que surgirá de la resta entre las dos anteriores. Se trata de una imagen RGB con la misma anchura y altura que cualquiera de las dos originales (obtenemos esos datos de la segunda imagen, por ejemplo).

El acceso a cada uno de los píxeles de las imágenes así como la aplicación de la resta en sí se observa dentro de la función draw(), en el código 2.

// The infinite loop
void draw(){
  // To determine where each pixel is inside the image's array
  int pixelLocation;
  // The new color that we are calculating from the substraction
  color newColor;
  // Accessing pixels in the window implies loading them
  loadPixels(); 
  // We also access our test image's pixels
  myImage1.loadPixels();
  myImage2.loadPixels();
  // We loop through all the pixels (#pixels = width x height)
  // We use myImage1 or myImage2 interchangeably because of being equal
  for (int x = 0; x < myImage1.width; x++) {
    for (int y = 0; y < myImage1.height; y++ ) {
      // Pixels are located sequentially inside a very long array
      pixelLocation = x + y*myImage1.width;
      // The R,G,B values from our 2 images
      float r1 = red(myImage1.pixels[pixelLocation]);
      float g1 = green(myImage1.pixels[pixelLocation]);
      float b1 = blue(myImage1.pixels[pixelLocation]);
      float r2 = red(myImage2.pixels[pixelLocation]);
      float g2 = green(myImage2.pixels[pixelLocation]);
      float b2 = blue(myImage2.pixels[pixelLocation]);
      // We substract pixel by pixel (RGB values): 3rd image = 2nd - 1st
      float r3 = r2 - r1;
      float g3 = g2 - g1;
      float b3 = b2 - b1;
      // We need our components within the 0-255 window
      r3 = constrain(r3,0,255);
      g3 = constrain(g3,0,255);
      b3 = constrain(b3,0,255);
      // We create a new color with our 3 new components
      newColor = color(r3,g3,b3);
      // We load the new color into the 3rd image
      myImage3.pixels[pixelLocation] = newColor;
    }
  }
  // Everything needs to be updated with the new values
  updatePixels();
  // We are drawing some yellow text to show captions onto the 3 images
  fill(255,255,0);
  // First image and its text
  image(myImage1,0,0);
  String s = "Original First Image";
  text(s, 0, 0, 70, 80);  // Text wraps within text box
  // Second image and its text
  image(myImage2,320,0);
  s = "Original Second Image";
  text(s, 320, 0, 70, 80);  // Text wraps within text box
  // Third image and its text
  image(myImage3,160,240);
  s = "A third image generated by substracting them both!";
  text(s, 160, 240, 70, 100);  // Text wraps within text box
}

Código 2. Aplicación de la resta entre imágenes.

Cuando Processing carga una imagen dentro de un objeto PImage no lo almacena bidimensionalmente, es decir teniendo en cuenta el ancho por el alto, sino que lo hace unidimensionalmente. Se trata en definitiva de un array muy largo donde cada posición almacena el color de un píxel. Lee las sucesivas filas de la imagen y las va concatenando, tal y como podéis observar en el apartado “Pixels, pixels, and more pixels” de este tutorial. Eso implica que para acceder a un píxel en concreto de nuestra imagen, tenemos que calcular su localización dentro del objeto PImage. Para un píxel que tenga coordenadas XY en la imagen, su ubicación dentro del objeto se calculará como X + Y x Ancho de la Imagen. Y ese valor lo almacenaremos en la variable entera pixelLocation que definimos a tal efecto.

Definimos una variable newColor para guardar el nuevo color que obtendremos de restar los colores de nuestros pares de píxeles y después llamamos a la función de acceso a los píxeles de las imágenes (loadPixels()). A continuación accedemos en concreto a los píxeles de cada una de nuestras dos imágenes de partida.

Hay que recorrer todos los píxeles de la imagen y hay tantos como la resolución de ésta (ancho x alto). Lo haremos con dos estructuras de control de tipo bucle FOR, una dentro de otra, de manera que gracias a la primera iteraremos por columnas (width) y gracias a la segunda por filas (height). Dentro del bucle ya podemos suponer que nos encontramos apuntando a un píxel concreto con coordenadas XY. Calculamos su ubicación dentro del objeto (pixelLocation) y obtenemos los valores de sus tres componentes de color RGB (funciones red, green y blue) para cada imagen. Las asociamos a seis variables de nueva creación (r1, g1 y b1 / r2, g2 y b2). Nótese que éstas son de tipo real y por tanto con decimales (float) dado que las componentes de color se retornan en ese formato.

Llegados a este punto procedemos a obtener el color de la tercera imagen a partir de la resta de colores entre las dos originales. Éste, para cada píxel, se almacena en las variables r3, g3 y b3. Además limitamos las componentes de color que acabamos de calcular a un valor máximo de 255 (si en el cálculo hemos obtenido un número por encima quedará automáticamente recortado) para después crear un nuevo color (newColor) a partir de las variables r3, g3 y b3 que introduciremos en el objeto Pimage de la tercera imagen. Además actualizaremos los píxeles de la imagen a continuación.

Por último tenemos que mostrar las tres imágenes por pantalla y asociarles un texto explicativo en color amarillo (fill(255,255,0)). La primera imagen se carga en la esquina superior izquierda de la ventana (image(myImage1,0,0)) mientras que la segunda se muestra desplazada horizontalmente a partir de la mitad de la ventana (image(myImage2,320,0)). La tercera se mostrará debajo de ambas, centrada (image(myImage3,160,240)). En los tres casos modificaremos el texto a introducir dentro de la variable de tipo string s para que se adapte a cada situación. Todo gracias a la función text() de Processing que recibe como parámetros la cadena de texto a mostrar por pantalla así como las dimensiones de la caja de texto que la contiene.

El programa completo podéis observarlo en el código 4 y os invito a que lo modifiquéis a conveniencia para obtener resultados de todo tipo.

// Let's load 2 images and generate
// a third one by substracting them both
// in a per-pixel basis
 
// We create 3 PImage objects for our 3 images
PImage myImage1;
PImage myImage2;
PImage myImage3;
 
// The Setup Function that initializes everything
void setup(){
  // We setup the window with double dimensions than our images
  // in order to fit them 3 inside the canvas
  size(640, 480);
  // We load the 2 original images into their PImage objects
  myImage1 = loadImage("image1_to_test_with.jpg");
  myImage2 = loadImage("image2_to_test_with.jpg");
  // The third image is generated with the same dimensions than the 2nd
  // that, by the way, has the same dimensions than the 1st
  myImage3 = createImage(myImage2.width, myImage2.height, RGB);
}
 
// The infinite loop
void draw(){
  // To determine where each pixel is inside the image's array
  int pixelLocation;
  // The new color that we are calculating from the substraction
  color newColor;
  // Accessing pixels in the window implies loading them
  loadPixels(); 
  // We also access our test image's pixels
  myImage1.loadPixels();
  myImage2.loadPixels();
  // We loop through all the pixels (#pixels = width x height)
  // We use myImage1 or myImage2 interchangeably because of being equal
  for (int x = 0; x < myImage1.width; x++) {
    for (int y = 0; y < myImage1.height; y++ ) {
      // Pixels are located sequentially inside a very long array
      pixelLocation = x + y*myImage1.width;
      // The R,G,B values from our 2 images
      float r1 = red(myImage1.pixels[pixelLocation]);
      float g1 = green(myImage1.pixels[pixelLocation]);
      float b1 = blue(myImage1.pixels[pixelLocation]);
      float r2 = red(myImage2.pixels[pixelLocation]);
      float g2 = green(myImage2.pixels[pixelLocation]);
      float b2 = blue(myImage2.pixels[pixelLocation]);
      // We substract pixel by pixel (RGB values): 3rd image = 2nd - 1st
      float r3 = r2 - r1;
      float g3 = g2 - g1;
      float b3 = b2 - b1;
      // We need our components within the 0-255 window
      r3 = constrain(r3,0,255);
      g3 = constrain(g3,0,255);
      b3 = constrain(b3,0,255);
      // We create a new color with our 3 new components
      newColor = color(r3,g3,b3);
      // We load the new color into the 3rd image
      myImage3.pixels[pixelLocation] = newColor;
    }
  }
  // Everything needs to be updated with the new values
  updatePixels();
  // We are drawing some yellow text to show captions onto the 3 images
  fill(255,255,0);
  // First image and its text
  image(myImage1,0,0);
  String s = "Original First Image";
  text(s, 0, 0, 70, 80);  // Text wraps within text box
  // Second image and its text
  image(myImage2,320,0);
  s = "Original Second Image";
  text(s, 320, 0, 70, 80);  // Text wraps within text box
  // Third image and its text
  image(myImage3,160,240);
  s = "A third image generated by substracting them both!";
  text(s, 160, 240, 70, 100);  // Text wraps within text box
}

Código 4. Programa completo de resta de imágenes.

Figura 1. Diferentes resoluciones de discretización de nuestras imágenes de vídeo.

Es importante tener en cuenta que para asegurar el correcto funcionamiento de la librería Myron de acceso a webcam y reproducción de video, tenemos que colocar los ficheros .DLL que la conforman dentro del directorio Processing de nuestro ordenador. Se trata de los ficheros DSVL.dll y myron_ezcam.dll.

Empecemos por aprender cómo se carga video, gracias al código 1.

// We will access our webcam
// thanks to the Myron library
// available at http://webcamxtra.sourceforge.net/
// Therefore we import it
import JMyron.*;
// We create a JMyron object to manage the video streaming
// that comes from our webcam
JMyron myStream;
 
// Our setup function to be executed once we begin
void setup(){
  // The size of our canvas equals the optimal resolution
  // of our webcam (check out yours to avoid flickering!)
  size(640, 400);
  // We initialize the myStream object
  // and we start streaming from our webcam
  myStream = new JMyron();
  myStream.start(width, height);
  // No strokes for our little circular objects
  noStroke();
}

Código 1. Inicialización de la carga de video en nuestro programa.

Empezamos importando la librería Myron para poder acceder a sus funciones mediante la sentencia import JMyron.* y creamos un objeto de tipo JMyron que dará soporte a nuestro streaming de video por parte de la webcam (myStream). La función de inicialización setup() crea una ventana de 640 x 400 píxeles porque esa es la resolución de trabajo óptima para la webcam que se ha utilizado para programar este ejemplo por mi parte. Es importante que para vuestro caso concreto os informéis sobre la resolución óptima de vuestro periférico y actuéis en consecuencia. En caso contrario podríais estar trabajando con resoluciones forzadas o no admitidas que inestabilizarían el programa y podrían causar problemas de “flickering” (parpadeo)  como se nos comenta aquí.

Inicializamos nuestro objeto de video myStream y a continuación avisamos al sistema de que puede iniciarse la adquisición de video por parte de la webcam (myStream.start(width, height)) a una resolución idéntica a la definida para nuestra ventana (el video la ocupará por entero). Por último desactivamos el color para los bordes (noStroke()).

El acceso a cada uno de los píxeles de las imágenes sucesivas así como la aplicación del efecto de discretización se observa dentro de la función draw(), en el código 2.

// the infinite loop
void draw(){
  // We ask our myStream object to provide with a new frame
  myStream.update();
  // We define some variables.
  // Note that we store the current webcam image inside an array called frameArray
  int[] frameArray = myStream.image();
  int pixelLocation;
  float r,g,b;
  int ellipseMagnitude = 15;
 
  // We loop all over the pixels inside the captured image
  for (int y=0; y < height; y+=15){
    for (int x=0; x < width; x+=15){
      // Evaluating the 2D coordinates of the current pixel
      pixelLocation = x + y*width;
      // Retrieving the RGB color of the current pixel
      r = red(frameArray[pixelLocation]);
      g = green(frameArray[pixelLocation]);
      b = blue(frameArray[pixelLocation]); 
      // We will substitute the current pixel
      // by a circle (same color)
      // ellipseMagnitude controls the magnitude of the circle
      fill(r,g,b,150);
      ellipse(x,y,ellipseMagnitude,ellipseMagnitude);
    }
  }
}

Código 2. Aplicación del efecto de discretización a nuestras imágenes de video.

Iniciamos actualizando el streaming de video, es decir “pidiendo” una nueva imagen (myStream.update()) que almacenamos convenientemente en un array de enteros que declaramos a tal efecto (int[] frameArray = myStream.image()). Además, definimos tres variables reales, es decir que contendrán datos numéricos con decimales, para almacenar las componentes RGB de cada uno de los píxeles que modifiquemos (float r,g,b) y el diámetro que deseamos para nuestros círculos (ellipseMagnitude).  Es importante tener en cuenta que cuando Processing carga una imagen no la almacena bidimensionalmente, es decir teniendo en cuenta el ancho por el alto, sino que lo hace unidimensionalmente. Se trata en definitiva de un array muy largo donde cada posición almacena el color de un píxel. Lee las sucesivas filas de la imagen y las va concatenando, tal y como podéis observar en el apartado “Pixels, pixels, and more pixels” de este tutorial. Eso implica que para acceder a un píxel en concreto de nuestra imagen, tenemos que calcular su localización dentro del objeto. En este ejemplo necesitamos asociar un círculo a la ubicación física de cada pixel y por tanto tendremos esto en cuenta. Para un píxel que tenga coordenadas XY en la imagen, su ubicación dentro del objeto se calculará como X + Y x Ancho de la Imagen. Y ese valor lo almacenaremos en la variable entera pixelLocation que definimos a tal efecto.

Hay que recorrer todos los píxeles de la imagen y hay tantos como la resolución de ésta (ancho x alto). Lo haremos con dos estructuras de control de tipo bucle FOR, una dentro de otra, de manera que gracias a la primera iteraremos por columnas (width) y gracias a la segunda por filas (height). Dentro del bucle ya podemos suponer que nos encontramos apuntando a un píxel concreto con coordenadas XY. Calculamos su ubicación dentro del objeto (pixelLocation) y obtenemos los valores de sus tres componentes de color RGB (funciones red, green y blue) para asociarlas a tres variables de nueva creación (r, g y b). Nótese que éstas son de tipo real y por tanto con decimales (float) dado que las componentes de color se retornan en ese formato.

Llegados a este punto sólo nos queda fijar un círculo del mismo color que el píxel que se encuentra debajo y que actuará como su centro. Activamos el color de nuestro círculo gracias a la función fill(r,g,b,150) y lo pintamos. El círculo tiene una cierta transparencia, como puede observarse en el cuarto parámetro de la función fill(), que hace referencia al canal alfa.

Por último y como observamos en el código 3, creamos una función pública que es obligatoria para el buen funcionamiento de la librería Myron (public void stop()). Ésta se ejecutará al salir del programa y en ella se detienen tanto la trama de vídeo que se está generando vía nuestro objeto (myStream.stop()) como el proceso en sí (super.stop()).

A continuación se muestran los códigos 3, al que nos referíamos en el último párrafo, así como el código 4 que contiene todo el programa funcional.

// The Myron library demands for a specific method to stop
public void stop() {
  myStream.stop();
  super.stop();
}

Código 3. Método de parada de la librería.

// We will access our webcam
// thanks to the Myron library
// available at http://webcamxtra.sourceforge.net/
// Therefore we import it
import JMyron.*;
// We create a JMyron object to manage the video streaming
// that comes from our webcam
JMyron myStream;
 
// Our setup function to be executed once we begin
void setup(){
  // The size of our canvas equals the optimal resolution
  // of our webcam (check out yours to avoid flickering!)
  size(640, 400);
  // We initialize the myStream object
  // and we start streaming from our webcam
  myStream = new JMyron();
  myStream.start(width, height);
  // No strokes for our little circular objects
  noStroke();
}
 
// the infinite loop
void draw(){
  // We ask our myStream object to provide with a new frame
  myStream.update();
  // We define some variables.
  // Note that we store the current webcam image inside an array called frameArray
  int[] frameArray = myStream.image();
  int pixelLocation;
  float r,g,b;
  int ellipseMagnitude = 15;
 
  // We loop all over the pixels inside the captured image
  for (int y=0; y < height; y+=15){
    for (int x=0; x < width; x+=15){
      // Evaluating the 2D coordinates of the current pixel
      pixelLocation = x + y*width;
      // Retrieving the RGB color of the current pixel
      r = red(frameArray[pixelLocation]);
      g = green(frameArray[pixelLocation]);
      b = blue(frameArray[pixelLocation]); 
      // We will substitute the current pixel
      // by a circle (same color)
      // ellipseMagnitude controls the magnitude of the circle
      fill(r,g,b,150);
      ellipse(x,y,ellipseMagnitude,ellipseMagnitude);
    }
  }
}
 
// The Myron library demands for a specific method to stop
public void stop() {
  myStream.stop();
  super.stop();
}

Código 4. Programa completo de aplicación de discretización a nuestras imágenes de vídeo.

En nuestro caso realizaremos un programa Processing que gracias a la librería Myron a) Nos permitirá disponer de streaming de video en tiempo real vía nuestra webcam, b) Podrá acceder a cada una de las imágenes del streaming y c) Aplicará una LUT sobre ellas que además variará en función de la tecla que hayamos pulsado (0, 1, 2, 3 o 4). En la figura 1 podemos entenderlo mejor.

Figura 1. Dependiendo de qué tecla pulsemos obtendremos diferentes efectos en nuestro streaming de video. De izquierda a derecha se muestran los efectos: original, inversión de rojos y ruido blanco aleatorio.

Las opciones de que disponemos son:

• Pulsando la tecla 0: volver a la imagen de video original.
• Pulsando la tecla 1: LUT que enfatiza los tonos rojos y “cyan”.
• Pulsando la tecla 2: LUT que enfatiza los tonos verdes extremos y lilas.
• Pulsando la tecla 3: LUT que enfatiza los tonos azules y amarillos.
• Pulsando la tecla 4: generamos una imagen en movimiento de ruido blanco aleatorio (como cuando en un televisor no tenemos un canal correctamente sintonizado).

Es importante tener en cuenta que para asegurar el correcto funcionamiento de la librería Myron de acceso a webcam y reproducción de video, tenemos que colocar los ficheros .DLL que la conforman dentro del directorio Processing de nuestro ordenador. Se trata de los ficheros DSVL.dll y myron_ezcam.dll.

Empecemos por aprender cómo se carga video, gracias al código 1.

// We will access our webcam
// thanks to the Myron library
// available at http://webcamxtra.sourceforge.net/
// Therefore we import it
import JMyron.*;
// We create a JMyron object to manage the video streaming
// that comes from our webcam
JMyron myStream;
// We define a mode variable to control
// the video rendering from 5 possibilities
// mode can be 0,1,2,3 or 4
int mode = 0;
 
// Our setup function to be executed once we begin
void setup() {
  // The sizw of our canvas equals the optimal resolution
  // of our webcam (check out yours to avoid flickering!)
  size(640, 400);
  // We initialize the myStream object
  // and we start streaming from our webcam
  myStream = new JMyron();
  myStream.start(width, height);
}

Código 1. Inicialización de la carga de video en nuestro programa.

Por una parte creamos una variable para controlar cual de las dos LUTs queremos aplicar (mode). Además importamos la librería Myron para poder acceder a sus funciones mediante la sentencia import JMyron.* y creamos un objeto de tipo JMyron que dará soporte a nuestro streaming de video por parte de la webcam (myStream). La función de inicialización setup() crea una ventana de 640 x 400 píxeles porque esa es la resolución de trabajo óptima para la webcam que se ha utilizado para programar este ejemplo por mi parte. Es importante que para vuestro caso concreto os informéis sobre la resolución óptima de vuestro periférico y actuéis en consecuencia. En caso contrario podríais estar trabajando con resoluciones forzadas o no admitidas que inestabilizarían el programa y podrían causar problemas de “flickering” (parpadeo)  como se nos comenta aquí.

Inicializamos nuestro objeto de video myStream y a continuación avisamos al sistema de que puede iniciarse la adquisición de video por parte de la webcam (myStream.start(width, height)) a una resolución idéntica a la definida para nuestra ventana (el video la ocupará por entero).

El acceso a cada uno de los píxeles de las imágenes sucesivas así como la aplicación de las distintas  LUTs se observa dentro de la función draw(), en el código 2.

// the infinite loop
void draw() {
  // We ask our myStream object to provide with a new frame
  myStream.update();
  // We get the actual frame and copy it into an array (frameArray)
  int[] frameArray = myStream.image();
  // We will need to access the RGB properties of every pixel in frameArray
  float r,g,b;
  // We draw the pixels for the current frame to the screen
  loadPixels();
  // We loop all over our frameArray
  for (int i = 0; i < width*height; i++){
    // For every pixel, we get its RGB components
    r = red(frameArray[i]);
    g = green(frameArray[i]);
    b = blue(frameArray[i]);
    // Now it's time to apply our special effects menu
    // 5 different modes (0,1,2,3 and 4)
    // 0 = original image
    // 1 = inverting the red component
    // 2 = inverting the green component
    // 3 = inverting the blue component
    // 4 = a random image! unrelated to the one coming from the webcam
    if (mode == 1) r = 255 - r;
    else if (mode == 2) g = 255 - g;
    else if (mode == 3) b = 255 - b;
    else if (mode == 4){
      r = random(255);
      g = random(255);
      b = random(255);
    }
    // We save our pseudocolored image
    pixels[i] = color(r,g,b);
  }
  // We update the image to appear in the canvas
  updatePixels();
  // Some white text to inform user about switching between modes
  String s = "Toggle rendering modes by pressing 0,1,2,3 or 4";
  fill(255);
  text(s, 10, 370, 200, 40);
}

Código 2. Aplicación de las LUTs a nuestras imágenes de video.

Iniciamos actualizando el streaming de video, es decir “pidiendo” una nueva imagen (myStream.update()) que almacenamos convenientemente en un array de enteros que declaramos a tal efecto (int[] frameArray = myStream.image()). Además, definimos tres variables reales, es decir que contendrán datos numéricos con decimales, para almacenar las componentes RGB de cada uno de los píxeles que modifiquemos (float r,g,b) y cargamos los píxeles de la imagen a memoria para poderlos acceder (loadPixels()).  Es importante tener en cuenta que cuando Processing carga una imagen no la almacena bidimensionalmente, es decir teniendo en cuenta el ancho por el alto, sino que lo hace unidimensionalmente. Se trata en definitiva de un array muy largo donde cada posición almacena el color de un píxel. Lee las sucesivas filas de la imagen y las va concatenando, tal y como podéis observar en el apartado “Pixels, pixels, and more pixels” de este tutorial. Eso implica que para acceder a un píxel en concreto de nuestra imagen, tenemos que calcular su localización dentro del objeto PImage. De todas formas en nuestro caso iteraremos a lo largo de todo el array frameArray y aplicaremos la misma condición a cada píxel. Iteramos vía una estructura de control de bucle tipo FOR que recorre todo el largo del array. Su dimensión iguala a la resolución de la imagen, es decir su ancho por su alto (width*height). Una vez dentro del bucle podemos considerar que estamos iterando píxel a píxel. Obtenemos sus componentes de color RGB (r = red(frameArray[i]), g = green(frameArray[i]) y b = blue(frameArray[i])) y dependiendo del modo activo (mode) aplicamos una u otra LUT, gracias a un condicional de tipo IF:

• Si se pulsó la tecla 0: no hacemos nada dado que deseamos mantener o volver a la imagen de video original.
• Si se pulsó la tecla 1: invertimos el canal rojo (r = 255 – r) para nuestra LUT que enfatiza los tonos rojos y “cyan”.
• Si se pulsó la tecla 2: invertimos el canal verde (g = 255 – g) para nuestra LUT que enfatiza los tonos verdes extremos y lilas.
• Si se pulsó la tecla 3: invertimos el canal azul (g = 255 – g) para nuestra LUT que enfatiza los tonos azules y amarillos.
• Si se pulsó la tecla 4: generamos componentes aleatorias para nuestro píxel gracias a la función random.

Hecho esto salvamos el “nuevo” píxel a partir de un color que generamos con las tres componentes (pixels[i] = color(r,g,b)). Una vez se recorre toda la imagen, terminamos el bucle y actualizamos todos los píxeles a la imagen para después mostrar un texto informativo en color blanco (fill(255)) y gracias a la función text().

Por último y como observamos en el código 3, hacemos dos cosas:

1. Creamos una función pública que es obligatoria para el buen funcionamiento de la librería Myron (public void stop()). Ésta se ejecutará al salir del programa y en ella se detienen tanto la trama de vídeo que se está generando vía nuestro objeto (myStream.stop()) como el proceso en sí (super.stop()).
2. Mediante el evento/callback de teclas de Processing (keyPressed()), detectamos aquella que presiona el usuario y actualizamos la variable mode en consecuencia.

A continuación se muestran los códigos 3, al que nos referíamos en el último párrafo, así como el código 4 que contiene todo el programa funcional.

// The Myron library demands for a specific method to stop
public void stop() {
  myStream.stop();
  super.stop();
}
 
// We toggle between modes depending on the pressed key
void keyPressed(){
  if (key == '0') mode = 0;
  if (key == '1') mode = 1;
  if (key == '2') mode = 2; 
  if (key == '3') mode = 3;
  if (key == '4') mode = 4;
}
Código 3. Método de parada de la librería y gestión de teclado.
// We will access our webcam
// thanks to the Myron library
// available at http://webcamxtra.sourceforge.net/
// Therefore we import it
import JMyron.*;
// We create a JMyron object to manage the video streaming
// that comes from our webcam
JMyron myStream;
// We define a mode variable to control
// the video rendering from 5 possibilities
// mode can be 0,1,2,3 or 4
int mode = 0;
 
// Our setup function to be executed once we begin
void setup() {
  // The sizw of our canvas equals the optimal resolution
  // of our webcam (check out yours to avoid flickering!)
  size(640, 400);
  // We initialize the myStream object
  // and we start streaming from our webcam
  myStream = new JMyron();
  myStream.start(width, height);
}
 
// the infinite loop
void draw() {
  // We ask our myStream object to provide with a new frame
  myStream.update();
  // We get the actual frame and copy it into an array (frameArray)
  int[] frameArray = myStream.image();
  // We will need to access the RGB properties of every pixel in frameArray
  float r,g,b;
  // We draw the pixels for the current frame to the screen
  loadPixels();
  // We loop all over our frameArray
  for (int i = 0; i < width*height; i++){
    // For every pixel, we get its RGB components
    r = red(frameArray[i]);
    g = green(frameArray[i]);
    b = blue(frameArray[i]);
    // Now it's time to apply our special effects menu
    // 5 different modes (0,1,2,3 and 4)
    // 0 = original image
    // 1 = inverting the red component
    // 2 = inverting the green component
    // 3 = inverting the blue component
    // 4 = a random image! unrelated to the one coming from the webcam
    if (mode == 1) r = 255 - r;
    else if (mode == 2) g = 255 - g;
    else if (mode == 3) b = 255 - b;
    else if (mode == 4){
      r = random(255);
      g = random(255);
      b = random(255);
    }
    // We save our pseudocolored image
    pixels[i] = color(r,g,b);
  }
  // We update the image to appear in the canvas
  updatePixels();
  // Some white text to inform user about switching between modes
  String s = "Toggle rendering modes by pressing 0,1,2,3 or 4";
  fill(255);
  text(s, 10, 370, 200, 40);
}
 
// The Myron library demands for a specific method to stop
public void stop() {
  myStream.stop();
  super.stop();
}
 
// We toggle between modes depending on the pressed key
void keyPressed(){
  if (key == '0') mode = 0;
  if (key == '1') mode = 1;
  if (key == '2') mode = 2; 
  if (key == '3') mode = 3;
  if (key == '4') mode = 4;
}

Código 4. Programa completo de aplicación de LUTs en nuestras imágenes de vídeo.

Figura 1. En nuestro detector de colisiones entre círculos observamos como el sistema detecta si no hay colisión (“Not Collided”, izquierda) o si la hay (“Collided”, derecha).

Se trata de crear un programa que:

• Sitúe un círculo rojo en el lugar del ratón. De hecho el cursor se esconderá.
• Sitúe un número determinado de círculos verdes en posiciones aleatorias.
• Compare, si movemos el ratón, las posiciones relativas entre el círculo rojo y el resto de círculos verdes. Éstos tendrán que estar almacenados en un array (variable que contiene muchas variables) para tener acceso a sus posiciones XY en todo momento.
• Determine si se está produciendo alguna colisión.
• En caso afirmativo, lo reporte. Y en caso negativo, también.
• Nos permita resituar aleatoriamente todos los círculos verdes en nuevas posiciones aleatorias de cara a seguir “jugando” en una “pantalla nueva y diferente”.

Vamos a ello pues y empecemos con la primera porción de código (código 1).

// We will test a collision detector
// by creating several circles (green)
// that might collide, or not, with
// another circle (red) that we are carrying via our mouse
 
// The arrays to store the 2D coordinates
// for the greenish static circles
int[] objects_x_coord;
int[] objects_y_coord;
// The amount of circles to randomly locate
int amount_objects = 10;
// The radius of our circles
int radius_circles = 10;
 
// The setup function to initialize everything
void setup(){
  // Our window
  size(400,400);
  // No strokes for our rendered circles
  noStroke();
  // We create 2 arrays of amount_objects positions
  objects_x_coord = new int[amount_objects];
  objects_y_coord = new int[amount_objects];
  // We initialize the content inside each position
  // of the arrays with a randomly generated number
  // to locate a number equal to amount_objects of circles
  // in random locations
  for(int counter = 0; counter < amount_objects; counter++){
    objects_x_coord[counter] = (int)random(width);
    objects_y_coord[counter] = (int)random(height);
  }
}

Código 1. Variables e inicialización de nuestro detector de colisiones.

Observemos como iniciamos creando diversas variables globales. Además de las variables que permiten definir la cantidad de círculos verdes que deseamos generar así como el radio que deberán tener a la hora de dibujarlos (amount_objects, radius_circles), que por defecto indican 10 objetos de radio 10 píxeles, también creamos una pareja de arrays (objects_x_coord, objects_y_coord) para almacenar las coordenadas X e Y de cada uno de nuestros círculos verdes situados por la escena. Las coordenadas del círculo rojo que “viaja” con el ratón no deberán almacenarse ya que ya las tenemos (son las coordenadas del ratón que en Processing pueden obtenerse en todo momento accediendo a las variables de sistema mouseX y mouseY).

En nuestra función de inicialización setup(), creamos una ventana de 400 x 400 píxeles y eliminamos el color de borde para nuestros círculos (se trata de un criterio puramente estético que podéis variar a gusto lógicamente). A continuación, “reservamos memoria” para nuestros arrays. Observemos que al declararlos como variables globales no definimos de cuantas posiciones los queríamos. Eso mismo hacemos ahora al determinar que deberán tener un número de posiciones igual al número de círculos verdes que deseemos generar en pantalla (amount_objects). Por último utilizamos una estructura de control de tipo FOR para recorrer todas las posiciones de ambos arrays, tantas como marque amount_objects, y situar en ellas sendos números aleatorios para las coordenadas X e Y de cada círculo verde, gracias a la función random(). Tengamos en cuenta que como es lógico, las coordenadas aleatorias en X las generamos entre 0 y el ancho de ventana (width) y de igual forma, las coordenadas en Y las generamos entre 0 y el alto de ésta (height).

En la figura 2 observamos las diferentes configuraciones que pueden producirse dependiendo de los valores que demos a nuestras variables globales amount_objects y radius_circles.

Figura 2. Controlamos el radio de nuestros círculos y cuantos deseamos pintar a voluntad.

En la clásica función draw() de Processing, y para nuestro programa, no reside la mayor “inteligencia” de nuestro reto. La tenemos en el código 2.

// The infinite loop
void draw(){
  // A black background for our canvas
  background(0);
  // We are to render several (amount_objects) static greenish circles
  fill(0,255,0);
  // We loop to render all the static circles
  // because we define the radius as the variable to use (radius_circles)
  // their magnitude in terms of axes is equal to radius_circles*2
  for(int counter = 0; counter < amount_objects; counter++){
    ellipse(objects_x_coord[counter],objects_y_coord[counter],radius_circles*2,radius_circles*2);
  }
}

Código 2. Función draw() y sus funciones más bien básicas en este ejemplo.

Observemos que básicamente se trata de limpiar el fondo a cada iteración (color negro), definir el color verde como el que deseamos emplear para los círculos generados aleatoriamente y almacenados en nuestros dos arrays y, por último, utilizar una estructura de control en bucle de tipo FOR para recorrerlos (tenemos tantos como “diga” la variable amount_objects) y pintar, para cada uno, una elipse con longitud igual entre ejes (por tanto es un círculo) de valor radius_circles*2 en las posiciones XY de cada uno de nuestros objetos estáticos.

En el código 3 observamos cual es la función que realmente detecta y calcula las colisiones. Se trata del evento de ratón o callback mouseMoved, que será llamado cada vez que movamos el periférico en cualquier dirección. Es más eficiente hacerlo en este evento que dentro de la función draw() porque así sólo realizaremos los cálculos cuando realmente haya posibilidad de colisionar, es decir cada vez que movamos el ratón.

// The callback to be called by the system if the mouse moves
void mouseMoved(){
  // We need several variables to evaluate
  // the distance between our dynamic reddish circle
  // to the rest of static greenish circles
  // plus to print some text to the window
  boolean collided = false;
  float[] distance_between_circles;
  float magnitude_of_distance;
  String s;
 
  // We initialize a float array the will
  // be used when calculating the distance
  // between circle's centers
  distance_between_circles = new float[2];
  // We evaluate the distance from our dynamic circle's center
  // to the centers of all the static circles. If there's a single
  // case where we detect a collision, we set the collided variable
  // to true
  // Colliding implies that the distance between 2 circles is less
  // than the sum of their radius
  for(int counter = 0; counter < amount_objects; counter++){
    distance_between_circles[0] = objects_x_coord[counter] - mouseX;
    distance_between_circles[1] = objects_y_coord[counter] - mouseY;
    magnitude_of_distance = distance_between_circles[0]*distance_between_circles[0]+
    distance_between_circles[1]*distance_between_circles[1];
    magnitude_of_distance = sqrt(magnitude_of_distance);
    if (magnitude_of_distance<radius_circles*2){
      collided = true;
      break;
    }
  }
  // We render our dynamic reddish circle
  // as it moves with the mouse
  fill(255,0,0);
  ellipse(mouseX,mouseY,radius_circles*2,radius_circles*2);
  // We render some text in white
  fill(255);
  // Different text depending on what happened
  if (collided){
    s = "Collided :(";
    text(s, 10, 370, 200, 40);
  }
  else{
    s = "Not collided :)";
    text(s, 10, 370, 200, 40);
  }
}

Código 3. Callback de movimiento de ratón mouseMoved. Detecta y calcula las colisiones.

El fundamento de la detección de colisiones entre dos círculos puede observarse en la figura 3. Es sencillo y se basa en el más puro sentido común. Dos círculos empiezan a colisionar siempre y cuando las distancias entre sus centros sean inferiores a la suma de sus dos radios.

Figura 3. Cómo saber si dos círculos colisionan.

En el callback de movimiento de ratón mouseMoved es donde se realizan estos cálculos. Para calcular una distancia entre dos puntos podemos remitirnos a la Álgebra Euclidiana de forma que: la distancia entre dos puntos de coordenadas (x1,y1) y (x2,y2) se obtiene como la raíz cuadrada de (x2-x1)²+(y2-y1)². Y ese es justamente el cálculo que realiza nuestro código 3 entre los pares de puntos que se obtienen de relacionar el centro de nuestro círculo rojo (coordenadas mouseX y mouseY) con los sucesivos centros de todos los círculos verdes (coordenadas objects_x_coord[counter] y objects_y_coord[counter]). Todo dentro de la estructura de control de tipo FOR que los recorre todos (variable counter que va de 0 a amount_objects).

En el caso que la distancia calculada (magnitude_of_distance) sea inferior a la suma de los dos radios (como en este caso todos son iguales hacemos radius_circles*2), dispondremos que se ha producido una colisión y por lo tanto activaremos nuestra variable de tipo Boolean (variable collided pasa a ser true).

Después del proceso de detección de colisión, procedemos a pintar nuestro círculo rojo como una elipse centrada en las coordenadas del ratón. También imprimimos un texto en pantalla en color blanco que, dependiendo del valor de la variable collided, será uno u otro.

Terminamos con el código 4, que fundamentalmente controla el evento de clic de ratón para que en caso de accionarlo, recalcule las posiciones de todos nuestros círculos verdes tal y como ya hicimos al inicializar en la función setup().

// The callback to be called by the system if the user
// clicks the mouse
void mousePressed(){
  // We will re-generate all static circle's positions
  for(int counter = 0; counter < amount_objects; counter++){
    objects_x_coord[counter] = (int)random(width);
    objects_y_coord[counter] = (int)random(height);
  }
}

Código 4. Callback de clic de ratón mousePressed. Si hacemos clic se recalculan las posiciones.

En el código 5 podemos observar el programa al completo.

// We will test a collision detector
// by creating several circles (green)
// that might collide, or not, with
// another circle (red) that we are carrying via our mouse
 
// The arrays to store the 2D coordinates
// for the greenish static circles
int[] objects_x_coord;
int[] objects_y_coord;
// The amount of circles to randomly locate
int amount_objects = 10;
// The radius of our circles
int radius_circles = 10;
 
// The setup function to initialize everything
void setup(){
  // Our window
  size(400,400);
  // No strokes for our rendered circles
  noStroke();
  // We create 2 arrays of amount_objects positions
  objects_x_coord = new int[amount_objects];
  objects_y_coord = new int[amount_objects];
  // We initialize the content inside each position
  // of the arrays with a randomly generated number
  // to locate a number equal to amount_objects of circles
  // in random locations
  for(int counter = 0; counter < amount_objects; counter++){
    objects_x_coord[counter] = (int)random(width);
    objects_y_coord[counter] = (int)random(height);
  }
}
 
// The infinite loop
void draw(){
  // A black background for our canvas
  background(0);
  // We are to render several (amount_objects) static greenish circles
  fill(0,255,0);
  // We loop to render all the static circles
  // because we define the radius as the variable to use (radius_circles)
  // their magnitude in terms of axes is equal to radius_circles*2
  for(int counter = 0; counter < amount_objects; counter++){
    ellipse(objects_x_coord[counter],objects_y_coord[counter],radius_circles*2,radius_circles*2);
  }
}
 
// The callback to be called by the system if the mouse moves
void mouseMoved(){
  // We need several variables to evaluate
  // the distance between our dynamic reddish circle
  // to the rest of static greenish circles
  // plus to print some text to the window
  boolean collided = false;
  float[] distance_between_circles;
  float magnitude_of_distance;
  String s;
 
  // We initialize a float array the will
  // be used when calculating the distance
  // between circle's centers
  distance_between_circles = new float[2];
  // We evaluate the distance from our dynamic circle's center
  // to the centers of all the static circles. If there's a single
  // case where we detect a collision, we set the collided variable
  // to true
  // Colliding implies that the distance between 2 circles is less
  // than the sum of their radius
  for(int counter = 0; counter < amount_objects; counter++){
    distance_between_circles[0] = objects_x_coord[counter] - mouseX;
    distance_between_circles[1] = objects_y_coord[counter] - mouseY;
    magnitude_of_distance = distance_between_circles[0]*distance_between_circles[0]+
    distance_between_circles[1]*distance_between_circles[1];
    magnitude_of_distance = sqrt(magnitude_of_distance);
    if (magnitude_of_distance<radius_circles*2){
      collided = true;
      break;
    }
  }
  // We render our dynamic reddish circle
  // as it moves with the mouse
  fill(255,0,0);
  ellipse(mouseX,mouseY,radius_circles*2,radius_circles*2);
  // We render some text in white
  fill(255);
  // Different text depending on what happened
  if (collided){
    s = "Collided :(";
    text(s, 10, 370, 200, 40);
  }
  else{
    s = "Not collided :)";
    text(s, 10, 370, 200, 40);
  }
}
 
// The callback to be called by the system if the user
// clicks the mouse
void mousePressed(){
  // We will re-generate all static circle's positions
  for(int counter = 0; counter < amount_objects; counter++){
    objects_x_coord[counter] = (int)random(width);
    objects_y_coord[counter] = (int)random(height);
  }
}

Código 5. Programa de detección de colisiones con Processing al completo.

Gracias a la figura 1, nos hacemos una idea de lo que ocurrirá en nuestro programa. Todo de la mano de la librería específica para Processing NyARToolkit así como de la librería SaitoObjLoader para carga de modelos 3D. Ésta última se compone fundamentalmente de un fichero JAVA (OBJLoader.jar) que contiene todas las funciones Processing que accederemos desde nuestro código.

Figura 1. Una esfera en 3D y con textura flota ante nuestros ojos gracias a la R.A.

Antes de empezar es importante que dentro del directorio de nuestro sketch Processing, creemos dos subdirectorios. Sugiero que lo hagáis de esta forma:

• Subdirectorio “data”. Almacena el modelo y la textura asociada (ficheros “sphere.jpg”, “sphere.mtl” y “sphere.obj”), los ficheros relativos a los marcadores de R.A. que emplearemos (los clásicos que vienen de ejemplo con la librería, es decir los ficheros de patrón “patt.hiro” y “patt.kanji”) y el de configuración de cámara que también nos facilita la librería de R.A. (“camera_para.dat”). Para el caso del modelo 3D, decir que este tipo de ficheros pueden generarse fácilmente desde cualquier programa de edición 2D (textura) y 3D (modelo). De hecho tanto el fichero .MTL como el .OBJ pueden editarse con un editor de texto.

Nota: podemos ver los patrones de R.A. que se adjuntan a la librería en la figura 2.

• Subdirectorio “code”. Almacena las librerías en sí. Todas ellas, es decir los ficheros  “OBJLoader.jar”, “NyAR4psg.jar” y “NyARToolkit.jar” que habremos descargado.

Figura 2. Patrones de R.A. de nuestra librería NyARToolkit.

Vamos a comentar la inicialización de todo el sistema, disponible en el código 1.

// We are testing some Augmented Reality
// features by using the NyARToolkit libraries
// available at http://nyatla.jp/nyartoolkit/wp/
// and loading a 3D model with the SaitoObjLoader
// library available at http://code.google.com/p/saitoobjloader/
// Therefore we import them
import processing.video.*;
import jp.nyatla.nyar4psg.*;
import saito.objloader.*;
// We define several objects:
// A camera, a multimarker and a 3D model
Capture myCam;
MultiMarker myMarkers;
OBJModel model;
// The setup() initialization function to be called once
void setup() {
  // Our window resolution
  // We activate Processing 3D to be able to render the 3D model
  size(640,480,P3D);
  // We define our color mode
  // by using RGB colors within the [0,100] interval
  colorMode(RGB, 100);
  // Augmented Reality initialization
  // We will use some of the markers and files
  // provided by the NyARToolkit library
  // We begin by attaching our webcam captures to the window
  myCam=new Capture(this,640,480);
  // We initialize our multiMarker object myMarkers
  // The file camera_para.dat is provided by the creator of the library:
  // It needs to be placed inside the data folder within the sketch
  myMarkers=new MultiMarker(this,width,height,"camera_para.dat",NyAR4PsgConfig.CONFIG_PSG);
  // We will load 2 markers within our multiMarker object (myMarkers)
  // Both markers are provided by the creator of the library:
  // patt.hiro and patt.kanji (inside the data folder within the sketch)
  myMarkers.addARMarker("patt.hiro",80);
  myMarkers.addARMarker("patt.kanji",80); 
  // We load our 3D model which is placed inside the data folder within the sketch
  model = new OBJModel(this, "sphere.obj", "absolute", TRIANGLES);
  model.enableDebug();
  // We globally scale the 3D model by a factor of 20
  // Plus to that, we center it and we enable texturing onto it
  model.scale(20);
  model.translateToCenter();
  model.enableTexture();
}

Código 1. Variables e inicialización de nuestro sistema de R.A.

Lo primero que hacemos es importar las librerías que necesitamos, tanto en lo relativo al video y al sistema de R.A. (import processing.video.* y import jp.nyatla.nyar4psg.*) como a la carga del modelo 3D (import saito.objloader.*). A continuación, y en nuestra función de inicialización (setup()) creamos una ventana de 640 x 480 píxeles y además activamos la funcionalidad 3D de Processing (P3D). Definimos el modo de color con el que trabajaremos (valores de color RGB restringidos entre los valores de 0, mínimo, y 100, máximo) e inicializamos nuestros objetos myCam, myMarkers y model, llamando a sus constructores:

• myCam: nueva adquisición de vídeo vía webcam de 640 x 480 píxeles por cuadro.

• myMarkers: un objeto que puede contener a más de un patrón de R.A. (en nuestro caso dos), que se configura según valores estándares de la librería (observad como le pasamos al constructor el ancho y alto de nuestra ventana para que se ajuste). Gracias a su método addARMarker le asociaremos los dos patrones de R.A. “patt.hiro” y “patt.kanji”.

NOTA: para imprimir los patrones se utilizan los ficheros en formato .PDF que se adjuntan a la librería de R.A. Es decir, “pattHiro.pdf” y “pattKanji.pdf”. No se utilizan los ficheros “patt.hiro” y “patt.kanji”.

• model: Observemos que estamos determinando que deseamos pintar en base a triángulos y que vamos a cargar el modelo “sphere.obj”, al cual nos referíamos antes. Vale la pena resaltar los métodos scale(20), translateToCenter() y enableTexture(). Gracias a ellos escalamos uniformemente el modelo 3D en sus 3 direcciones XYZ (lo hacemos 20 veces más grande), lo centramos a los ejes de coordenadas de mundo y después activamos las texturas para éste. El escalado nos permite darle el tamaño que deseemos.

En el código 2 empezamos por comprobar que nuestro objeto de tipo cámara myCam se encuentre disponible gracias a un condicional de tipo if (es decir la webcam en funcionamiento normal) de forma que si no es así, cancelamos la ejecución del programa. A partir de ahí, leemos una imagen de ésta (myCam.read()) e iniciamos la detección de los patrones (marcadores) en la imagen (myMarkers.detect(myCam)). Recordemos que tenemos dos posibles en nuestro objeto MultiMarker myMarkers. Pintamos el fondo de negro, aplicamos como fondo la imagen que se obtiene desde la webcam (haciendo que el vídeo ocupe toda nuestra ventana) y definimos un bucle for que dará dos “vueltas”, una por cada marcador.

De nuevo se utiliza un condicional if para validar que efectivamente existe un patrón en la imagen dado que en caso contrario no es necesario hacer nada (si no hay marcador, no hay modelo 3D a cargar).  A continuación se inician las transformaciones asociadas a la aparición de uno cualquiera de los dos patrones. Éstas operan entre los métodos myMarkers.beginTransform(i) y myMarkers.endTransform(), dónde la variable i hace referencia al marcador que se esté empleando. Observemos como las transformaciones, que afectarán al modelo 3D, consisten en una traslación en Z (sumamos 20 unidades a la profundidad) y de escalado (dividimos sus dimensiones entre 10). Finalmente procedemos a pintar el modelo 3D en sí, gracias al método draw() del objeto model.

// The infinite loop
void draw()
{
  // Our 3D model will be a textured sphere
 
  // First thing we need to evaluate that the webcam is working properly
  if (myCam.available() !=true) {
      return;
  }
  // If our webcam works as it should, we read an image from it
  myCam.read();
  // We start the detection of markers
  myMarkers.detect(myCam);
  // Black background for our window
  background(0);
  // We apply the background
  myMarkers.drawBackground(myCam);
  // We analyze if any of our 2 markers is present
  for(int i=0;i<2;i++){
    if((!myMarkers.isExistMarker(i))){
      continue;
    }
    // If any of the 2 markers was present
    // we will render our 3D model (textured sphere)
    // We will apply two 3D transformations
    // to scale and translate our 3D model properly
    myMarkers.beginTransform(i);
      translate(0,0,20);
      scale(0.1);
      // We render our 3D model!
      model.draw();
    myMarkers.endTransform();
  }
}

Código 2. Bucle de iteración draw().

Disponéis del programa completo en el código 3. Disfrutadlo y variadlo a voluntad! Saludos.

// We are testing some Augmented Reality
// features by using the NyARToolkit libraries
// available at http://nyatla.jp/nyartoolkit/wp/
// and loading a 3D model with the SaitoObjLoader
// library available at http://code.google.com/p/saitoobjloader/
// Therefore we import them
import processing.video.*;
import jp.nyatla.nyar4psg.*;
import saito.objloader.*;
// We define several objects:
// A camera, a multimarker and a 3D model
Capture myCam;
MultiMarker myMarkers;
OBJModel model;
// The setup() initialization function to be called once
void setup() {
  // Our window resolution
  // We activate Processing 3D to be able to render the 3D model
  size(640,480,P3D);
  // We define our color mode
  // by using RGB colors within the [0,100] interval
  colorMode(RGB, 100);
  // Augmented Reality initialization
  // We will use some of the markers and files
  // provided by the NyARToolkit library
  // We begin by attaching our webcam captures to the window
  myCam=new Capture(this,640,480);
  // We initialize our multiMarker object myMarkers
  // The file camera_para.dat is provided by the creator of the library:
  // It needs to be placed inside the data folder within the sketch
  myMarkers=new MultiMarker(this,width,height,"camera_para.dat",NyAR4PsgConfig.CONFIG_PSG);
  // We will load 2 markers within our multiMarker object (myMarkers)
  // Both markers are provided by the creator of the library:
  // patt.hiro and patt.kanji (inside the data folder within the sketch)
  myMarkers.addARMarker("patt.hiro",80);
  myMarkers.addARMarker("patt.kanji",80);  
  // We load our 3D model which is placed inside the data folder within the sketch
  model = new OBJModel(this, "sphere.obj", "absolute", TRIANGLES);
  model.enableDebug();
  // We globally scale the 3D model by a factor of 20
  // Plus to that, we center it and we enable texturing onto it
  model.scale(20);
  model.translateToCenter();
  model.enableTexture();
}
// The infinite loop
void draw()
{
  // Our 3D model will be a textured sphere
  // First thing we need to evaluate that the webcam is working properly
  if (myCam.available() !=true) {
      return;
  }
  // If our webcam works as it should, we read an image from it
  myCam.read();
  // We start the detection of markers
  myMarkers.detect(myCam);
  // Black background for our window
  background(0);
  // We apply the background
  myMarkers.drawBackground(myCam);
  // We analyze if any of our 2 markers is present
  for(int i=0;i<2;i++){
    if((!myMarkers.isExistMarker(i))){
      continue;
    }
    // If any of the 2 markers was present
    // we will render our 3D model (textured sphere)
    // We will apply two 3D transformations
    // to scale and translate our 3D model properly
    myMarkers.beginTransform(i);
      translate(0,0,20);
      scale(0.1);
      // We render our 3D model!
      model.draw();
    myMarkers.endTransform();
  }
}

Código 3. Programa completo de R.A.

Carga de un Modelo 3D con Lenguaje de Programación Processing

En este ejemplo vamos a cargar un modelo 3D en formato OBJ con textura JPG gracias a Processing. Le dotaremos de un par de funcionalidades. Por una parte, rotará alrededor de su eje de simetría. Además, podremos hacer clic con el ratón alternando la funcionalidad de vista de los triángulos que conforman el modelo.

Imágenes y LUTs en Programación Processing

Una LUT o “Look Up Table” es un procedimiento por el cual podemos variar las características de una imagen al retocar sus píxeles, uno a uno. Se trata de recorrerlos todos, obtener su valor y, precisamente en base a la LUT que diseñemos, retocarlo de manera que pase a ser diferente. Las LUTs se utilizan en todos los programas de edición y retoque fotográfico e incluso en algunas cámaras digitales para aplicar filtros a nuestras imágenes: pasarla de color a blanco y negro, pasarla a tono sepia, variar su brillo, etc.

Efecto dinámico de “Puntillismo” en Imágenes vía Programación Processing

Vamos a realizar un sencillo programa Processing que cargará una imagen de disco duro y le aplicará un efecto de “Puntillismo” siempre y cuando pulsemos una vez uno de los botones del ratón (siempre dentro de la imagen). Un efecto de filtro como si, por ejemplo, estuviéramos mirando desde el otro lado de un curioso cristal tallado.

Sonido con Lenguaje de Programación Processing. Primer ejemplo.

Utilizamos la librería Minim para cargar y reproducir un fichero de extensión y formato .MP3 en nuestro equipo. Además vamos a visualizar “la canción” por lo que respecta a las amplitudes de sus canales izquierdo y derecho. La librería Minim se instala por defecto con Processing aunque es recomendable actualizarla.

Sonido con Lenguaje de Programación Processing. Segundo ejemplo.

En este ejemplo vamos a utilizar la librería Minim para cargar y reproducir un fichero de extensión y formato .MP3 en nuestro equipo. Además vamos a cargar una imagen de fondo y a visualizar “la canción” con dos “altavoces” que generaremos vía código, por lo que respecta a las amplitudes de sus canales.

Dentro de WebCat se abordan asuntos diversos, tanto de forma introductoria como especializada, mediante breves exposiciones de no más de quince minutos con el objetivo de trabajar y transmitir una idea concreta al público.

El pasado 13 de febrero tuvo lugar un nuevo encuentro del que a continuación presentamos una breve e interesante muestra. Es la charla de Máximo Gavete sobre el concepto ‘esqueuomorfismo’ aplicado a los dispositivos móviles.

Máximo Gavete – Esqueuomorfismo: La ruptura de la metáfora