Realidad Aumentada aplicada a la Matemática

Luego de algún tiempo retomo la escritura en el blog, para comentarles el emprendimiento que se ha iniciado en favor de aplicar la tecnología de la Realidad Aumentada para poder reforzar los aprendizajes en matemática, fundamentalmente en los primeros grados.  El Informe Horizon 2010 elaborado por el eLearn Center de la UOC y el New Media Consortium   vaticinó que la realidad aumentada sencilla sólo tardaría de dos a tres años en imprimir una fuerte influencia en la educación; esta vaticinio se ha ido cumpliendo en estos cerca de 3 años; el grato reto que asumí fue poder ser referentes en el uso de esta tecnología; por fortuna se coincidió con la empresa mexicana  M.C. Ar  en este empeño y en estos meses estoy trabajando para ellos en el desarrollo de un sistema que pueda apoyar la enseñanza de las Matemáticas basándonos en la curricula de primer grado en México, que es muy similar en los contenidos a varias de las currículas latinoamericanas en especial la peruana.

Durante el desarrollo del proyecto se van construyendo  juegos de RA, que usan conceptos de las denominadas aplicaciones de computación basadas en el gesto. El lenguaje de programación que se eligió fue CSharp bajo el framework Microsoft XNA; dentro de este entorno se usaron  librerías de visión artificial basadas en OpenCV y adaptada a CSharp con la denominación de OpenCvSharp. Las aplicaciones construidas  logran interactividad a través de los gestos; usando para ello la detección de flujo de movimiento,  es decir, se determina el patrón aparente de movimiento de objetos, superficies, y los bordes en una escena visual que es causado por el movimiento relativo entre un observador (un ojo una cámara ) y la escena,

Experimentalmente se esta validando las aplicaciones en la  I.E. “Jesús Nazareno”, bajo estrategias del juego didáctico; donde se introducen los juegos  para poder validar sus resultados, que espero poder comentar en este espacio. Estos son algunos de los conceptos que se están trabajando:

–        Clasificación de objetos.

–        Seriación de objetos.

–        Representación de la cardinalidad de un conjunto de objetos.

–        Identificación de números ordinales.

–        Identificación de la relación “mayor que”, “menor que”, “igual que”

–        Sumar y restar de números.

Videos ilustrativos de lo que se esta avanzando:

Juan Cadillo

Avances y Perspectivas en el Uso de la Realidad Aumentada – Experiencia Peruana

En los diversos espacios donde puedo compartir mi experiencia con la Realidad Aumentada, encuentro mucha receptividad y sorpresa  con respecto al uso de la tecnología y el deseo de aplicarla para mejorar la labor educativa. Pero es en estos mismo espacios   donde trato de explicar que  la Realidad Aumentada es solo un instrumento como cualquier otro, que la relevancia la tiene el desarrollo de las capacidades superiores y la posibilidad de desarrollar competencias en nuestros alumnos como medio de participar con derecho en la  sociedad del conocimiento.

Soy un amante de la tecnología pero es no me impide ver que solo es un medio, un medio que el caso de la Realidad Aumentada puede ser un motivador, un  canal o un producto que en su desarrollo permite trabajar un conjunto de habilidades. Que en el caso mio están orientadas a   lograr habilidades para gestionar la información desde las etapas más básicas de la escolaridad hasta llegar a una empresa pasando por las aulas universitarias.

Por ello dentro de esta dinámica he investigado y buscado métodos para lograr que los niños desarrollen  habilidades como las de  búsqueda y selección de la información, la capacidad para sintetizar información  mediante organizadores visuales, personalizar los datos, publicar la información, y lo que es más importante recrear esa información ya sea textual, oral o gráficamente. Si nosotros entendemos que la información es valiosa cuando se comparte entonces veremos que debemos enseñar a compartir información. Pero no es solo el hecho de compartir, que caso tiene compartir algo que no es tuyo, por ello debemos enseñar a producirla, pero producirla en un ambiente comunicativo real, es decir el niño y niña debe darse cuenta que la información que produce va a un público objetivo y no se queda archivado en un cuaderno o en un computadora, sino que  trasciende los espacios de su propia escuela. Cuando se da cuenta de esto, el niño y niña entiende el objetivo comunicativo, al que denomino “reto comunicativo” y desarrolla las habilidades propuestas.

Alguien puede decir que estas habilidades la desarrollan de  por si los jóvenes y niños  en los múltiples espacios que ofrece la red: facebook, yotube, google plus, etc. Y tienen razón en el sentido de producir mucha información pero que hay de su calidad, no solo se trata de producir se necesita desarrollar calidad en la información así como su organización y gestión, no es suficiente copiar hay que producir, si un niño empieza a desarrollar su capacidad de centrar su foco de atención, de distinguir el camino y tiene los medios para llegar estoy seguro que lo hará con las herramientas que le ofrecen las ciencias, pero si solo le ofrecemos herramientas y no desarrollamos capacidades entonces seguiremos sumergidos en una etapa primaria que es la de recibir información y nunca devolver en el otro sentido.

Volviendo al tema de la Realidad Aumentada, esta llegó para quedarse. En los próximos 3 años se pasará de lo simple a algo más complejo. Se pasará del simple marcador que presenta un objeto den 3D a interfaces mucho más complejas con detección de movimiento como las que presentamos y desarrollamos  en este blog. Así como la mejora de la capacidad de cómputo permitirá reconocimiento de gestos de la mano, cara e interacción inmersiva.

Espero fervientemente poder compartir con ustedes este avance y presentarles los avances que se logre, como les comente la idea es producir pero con calidad.

Juan Cadillo

Comparto con ustedes la ponencia que desarrollé en las Charlas Magistrales 2012  de la Universidad Pontificia Católica del Perú afines del mes de febrero de este año.

Desarrollo de Interfaces para la Realidad Aumentada

Luego de varios meses retomó la publicación en este espacio, para contarles los avances que vengo realizando en el desarrollo de aplicaciones de realidad aumentada; orientado a que niños puedan usar este tecnología  en las aulas. A sido un proceso laborioso, de investigación y programación que a ocupado mi tiempo en estos 3 últimos  meses, aún falta mucho pero los primeros avances son prometedores. Las primeras aplicaciones  estarán listas para sus  pruebas y validación   a fines de marzo y espero compartirlos con ustedes.

Así mismo me he planteado desarrollar tres proyectos con los niños para utilizar las aplicaciones desarrolladas dentro del marco de investigación del uso de la Realidad Aumentada que estoy realizando:

– El desarrollo del proyecto de “Ajedrez Aumentado”:  usando realidad aumentada, programación en  etoys y la olpc; combinado con el trabajo con títeres, composición textos, audio cuentos y cuentos animados por computadora.

– El desarrollo del proyecto “Formas y Colores”, usando visión artificial, realidad aumentada y trabajo guíado entre pares. Esto esta orientado a trabajar con niños pequeños de inicial y primer grado de Educación Primaria.

– El desarrollo del “Libro de Realidad Aumentada: Callejón de Huaylas”, donde se pretende mostrar la riqueza natural e histórica del Callejón de Huaylas: Recuay, Huaraz, Carhuaz y Caraz.  Esto desarrollado con niños del 4 y 5 grado de Educación Primaria de la I.E “Jesús Nazareno” – Shancayán – Huaraz – Ancash – Perú.

Como adelanto del trabajo les dejo dos vídeos con la interfaz que vengo desarrollando para la realidad aumentada. La interfaz busca reconocer objetos de manera automática, como por ejemplo la mano; en el caso de la mano podemos usarla para trabajar  lateralidad, conteo por medio de dedos, activar juegos de mayor precisión  que los que desarrollé en el 2011: bloques lógicos, probador de ropa, paint virtual, con la ventaja en que son mucho más sofisticados y precisos  que los primeros.

Espero puedan ayudarme  con nuevas ideas y sugerencias sobre como usar la realidad aumentada y la visión artificial.

Juan Cadillo L.

Subsistema de Reflejos y Lateralidad

Para consolidar el desarrollo, se buscó  reforzar el aspecto kinestésico, lo que permitiera que los niños refuercen sus reflejos y lateralidad mediante la aplicación de juegos; a ello apunto el desarrollo del módulo de ping pong, el módulo de Lateralidadque reforzará el reconocimiento de DERECHA, IZQUIERDA, ARRIBA Y ABAJO. Se implementó un probador de ropa que permite coordinar todo lo aprendido. Y finalmente me anime a desarrollar un piano virtual que sería una adaptación del probador virtual pero en vez de mover o cambiar la ropa se debe tocar una nota musical.

El módulo de ping pong se basa en el reconocimiento y seguimiento de color COLOR TRAKING, que permite mover las barras de los jugadores según un color definido por click (PRIMER JUGADOR ) y anticlik (SEGUNDO JUGADOR). Una pelota se mueve de izquierda a derecha y viceversa donde el jugador tiene que impedir que la bola pase hacia el final de su campo, para ello tiene una barra que se desplaza verticalmente. El juego requiere de coordinación, equilibrio y fuerza en el brazo para mantenerlo levantado.

Para indicar que se está dando el movimiento de las barras y su dirección se ha colocado unos círculos pequeños de diferentes colores que le indican al jugador el sentido que tiene su movimiento.

Fig. Ping Pong – con seguimiento de color (color traking)

A continuación se muestra el segmento de código para la implementación de la paleta de juego:

class paleta { //gestor de movimiento, según color

Point e1, e2;

paleta(){ //declaración de la clase

e1 = new Point( 0, 0 );

e2 = new Point( 0, 0 );

}

void mover(){

//nueva región de interés

if (s1)

{

//e1.x = constrain(e1.x, 40, width – 40);

e1.y =  constrain(e1.y, 0, height); //región limite

mouseYnuevoI = e1.y;

ellipseMode(CENTER);

ellipse( e1.x, e1.y, 30, 30 );

}

if (s2)

{

e2.y =  constrain(e2.y, 0, height); //región limite

mouseYnuevoD = e2.y;

fill( 0, 255, 255, 128 );

ellipseMode(CENTER);

ellipse( e2.x, e2.y, 30, 30 );

}

}

El módulo de Lateralidad permite distinguir la dirección del movimiento; si es a la izquierda, a la derecha arriba o hacia abajo.

 

Fig. Juego de Lateralidad: Izquierda, Derecha, Arriba y Abajo

Presentamos una declaración de variables usado:

//Programa que mueve la burbuja en cualquiera de las cuatro direcciones

import hypermedia.video.*;          //  Importando OpenCV library

OpenCV opencv;                      //  Creando un Nuevo objeto OpenCV object

PImage movementImg;                 //  Creando un PImage para detector movimiento

PImage bubblePNG;                   //  Crea un PImage para la burbuja a mover

PFont font;                         //  Crea un objeto font

Bubble bolita;

El módulo  probador virtual permite que el alumno demuestre sus destrezas de coordinación y ubicación para poder  elegir un polo que se le acomode al cuerpo, para ello utiliza el sistema de menú con detección de movimiento.

A continuación presentamos una imagen ilustrativa y el código correspondiente a la clase que permite el cambio de color, tamaño y ubicación de la ropa.

Fig. Probador Virtual – con menú interactivo

class Ropa

{

int rX, rY, ropaWidth, ropaHeight;

int MaxropaWidth, MaxropaHeight;

int elcolor;

Ropa ( int rpX, int rpY, int rW, int rH, int posicion)

{

rX = rpX;

rY = rpY;

ropaWidth = rW;

MaxropaWidth = rW;

ropaHeight = rH;

MaxropaHeight = rH;

elcolor = posicion;

}

}

Y el Piano virtual, es cual todavía nos falta perfeccionar.

Presentación de los Resultados:

Video 1: Institución Educativa  “Jesús Nazareno”

Video 2. Institución Educativa “Jesús Nazareno”

Video3. Institución Educativa  “Jesús Nazareno”

Video 4. Institución Educativa

Juan Cadillo

Subsistema de Dibujo Kinestésico

Este es el subsistema  que demando mayor  trabajado. Partimos de la capacidad de poder detectar movimiento para lo cual usamos las librerías para JAVA de OpenCV ubicadas en OPENCV Processing and Java Library cuya dirección url es: http://ubaa.net/shared/processing/opencv/.

Para ello dividí el trabajo en:

  1. Poder detectar el movimiento en regiones puntuales, lo que sirvió para localizar los menús que funcionarán sin necesidad de presionar el mouse o alguna tecla.

 Menú de selección de color activado por detección de movimiento

Fig. Menú de selección de color activado por detección de movimiento

Se trabaja básicamente sobre una diferencia de pixeles de un imagen capturada frente a otra imagen capturada posteriormente; si la diferencia es marcada en la región entonces se ha detectado movimiento; lo que corresponde a la selección de un color para el pincel que debe pintar en nuestro caso.

También se prevé que se tenga que borrar el lienzo donde se pinta lo que se hace con el menú borrar.

 

Fig. Menú de borrado de lienzo – activado por detección de movimiento

El código que presentamos a continuación permite poner una imagen en escala de blanco y negro y hace uso de las librerías de openCV:

  // luego de encontrado el color aplicamos filtros para detectar movimiento

  opencv.absDiff();                           //  Crear una diferencia de imagen

  opencv.convert(OpenCV.GRAY);                //  Convertir a una escala de grises

  opencv.blur(OpenCV.BLUR, 3);                //  Remover- ruido

   opencv.threshold(20); // Thresholds to convert to black and white; se puede //seleccionar en función de la luz del ambiente.

  1. Poder pintar sobre el lienzo (pantalla), para ello en primer lugar se trató de detectar bloques de objetos con la función blobs()  de OpenCV pero no fue muy efectivo ya que se detectaban mucho bloques (regiones agrupadas) y el pincel corría de un lugar a otro imposibilitando dibujos uniformes; por lo se vio por conveniente cambiar a un reconocimiento de color, aprovechando lo aprendido en el subsistema de reconocimiento de color. La idea guía fue presentar una imagen de un solo color, sacar el promedio de color dentro de la imagen capturada por el video y en base a este promedio guiar al pincel; en inglés a esta técnica se le denomina “color Tracking”. El inconveniente de este método es la cantidad de otras imágenes que puedan tener un color similar al que estamos siguiendo; esto hace que el pincel salte de un lugar a otro en algunas ocasiones. O en algunos casos la pérdida del color de seguimiento debido a la variación de luz que hace que un objeto se vea de un color distinto al del seguimiento. Una solución al caso planteado es combinar el reconocimiento de bloques y el reconocimiento de color; para ellos se tendría que implementar una red neuronal o algún tipo de filtro como el de Kalman;  pero cuya programación es más costosa.

Fig. Pincel activo – seguimiento de color (color traking)

A continuación se presenta el código que permite implementar el color tracking en el subsistema:

////sacar el promedio de los puntos de un color

Point avg( ArrayList l ) {

int  posicionY = 0;

if (l.size() == 0) {

return new Point( 0, 0 );

}

int x = 0;

int y = 0;

boolean cont = true;

for( Iterator i = l.iterator(); i.hasNext(); ) {

Point p = (Point)i.next();

x += p.x;

y += p.y;

if (cont)

{

posicionY = p.y;

cont = false;

}

}

if (( posicionY – y / l.size())< 20)

{

return new Point( x  / l.size(), y / l.size() + 50);

} else

{

return new Point( x  / l.size(), y / l.size());

}

}

Video 1. Institución Educativa “Jesús Nazareno”

Juan Cadillo

Subsistema de reconocimiento de color

Para el subsistema de reconocimiento de color, se tomó  como base  el libro “Learning Processing A Beginner’s Guide to Programming Images, Animation, and Interaction” de Daniel Shiffman quién propone un algoritmo de selección de color y su seguimiento del mismo en el video; el algoritmo fue adaptado para usarse con openCV. Si bien podemos seguir el color mediante la comparación de pixeles nos quedó el problema de poder identificar el color exacto; esto debido a las diferentes tonalidades que distingue el ojo humano; el modelo RGB (rojo, verde y azul) usado por los programas de diseño no  fue  eficiente para poder reconocer adecuadamente los colores debido a las variaciones de luz e intensidad a la hora de reconocer  los colores básicos, por lo que se tuvo que recurrir a una transformación del RGB al modelo CIElab, en el que se mejoró los resultados; pero sigue existiendo problemas con la cantidad de luz a la que es expone el objeto (ambiente oscuro o ambiente con demasiada luz).

Para reforzar el reconocimiento de colores, el niño o niña que selecciona un color en el espacio (aula) podrá distinguir un elipse que se desplaza a través de la pantalla ubicándose en objetos cuyo color es similar al seleccionado con el mouse. En caso de ser un color básico: ROJO, AMARILLO O AZUL (Concepto tradicional sobre los colores básicos), o VERDE, NEGRO O BLANCO se le mostrará un video que muestre objetos y su respectivo nombre del mismo color seleccionado.

Los resultados se muestra a continuación:

Video 1. “Institución Educativa Jesús Nazareno”

Video 2. “Institución Educativa Jesús Nazareno”

Juan Cadillo

Reconocimiento de Colores mediante el uso de la Realidad Aumentada

Dentro del desarrollo del proyecto PVRA (PINTURA VIRTUAL PARA REALIDAD AUMENTADA) se ha desarrollado una aplicación en processing que permite el reconocimiento de colores se tomó  como base  el libro “Learning Processing A Beginner’s Guide to Programming Images, Animation, and Interaction” de Daniel Shiffman quién propone un algoritmo de selección de color y su seguimiento del mismo en el video; el algoritmo fue adaptado para usarse con openCV. Si bien podemos seguir el color mediante la comparación de pixeles nos quedó el problema de poder identificar el color exacto; esto debido a las diferentes tonalidades que distingue el ojo humano; el modelo RGB (rojo, verde y azul) usado por los programas de diseño no  fue  eficiente para poder reconocer adecuadamente los colores debido a las variaciones de luz e intensidad a la hora de reconocer  los colores básicos, por lo que se tuvo que recurrir a una transformación del RGB al modelo CIElab, en el que se mejoró los resultados; pero sigue existiendo problemas con la cantidad de luz a la que es expone el objeto (ambiente oscuro o ambiente con demasiada luz).

El fragmento más resaltante e interesante que se desarrolló en este subsistema es el de transformación de un pixel del modelo RGB al CIElab:

//definimos la clase
//declaramos las variables de la clase
//inicializamos la clase
class transformaColor
{
  float x;
  float y;
  float z;
  //Colores RGB
  float rojo;
  float azul;
  float verde;
  //colores lab
  float l;
  float a;
  float b;
  float cab;
  float hab;
  transformaColor(color pixelColor){//inicializacion
    rojo = red(pixelColor);
    azul =  blue(pixelColor);
    verde = green(pixelColor);
    }
   void rgbAxyz(){
    float rojo1;
    float azul1;
    float verde1;
    //transformando
     rojo1 = rojo/255;
     azul1 = azul/255;
     verde1 = verde/255;
    if(rojo1>0.04045){
          rojo1 = (rojo1+0.055)/1.055;
          rojo1 = pow(rojo1,2.4);
     }
       else{
          rojo1 = rojo1/12.92;
     }
     if(verde1>0.04045){
          verde1 = (verde1+0.055)/1.055;
          verde1 = pow(verde1,2.4);
     }
       else{
          verde1 = verde1/12.92;
     }
          if(azul1>0.04045){
          azul1 = (azul1 + 0.055)/1.055;
          azul1 = pow(azul1,2.4);
     }
     else{
          azul1 = azul1/12.92;
     }
     azul1 *= 100;
     verde1 *= 100;
     rojo1 *= 100;
     //xyz definidos según estándar
     x = rojo1 * 0.4124 + verde1 * 0.3576 + azul1 * 0.1805;
     y = rojo1 * 0.2126 + verde1 * 0.7152 + azul1 * 0.0722;
     z = rojo1 * 0.0193 + verde1 * 0.1192 + azul1 * 0.9505;
  }
  //transformando a CIElab
  void xyzAlab(){
      float x1 = 0.0;
      float y1= 0.0;
      float z1= 0.0;
     x1 = x/95.047;
     y1 = y/100.0;
     z1 = z/108.883;
     if(x1 > 0.008856){
          x1 = pow(x1,1.0/3);
     }
       else{
          x1 = 7.787 * x1 + 16.0/116;
     }
     if(y1>0.008856){
          y1 = pow(y1,1.0/3);
    }
       else{
          y1 = (7.787*y1) + (16.0/116);
     }
     if(z1>0.008856){
          z1 = pow(z1,1.0/3);
    }
       else{
          z1 = 7.787 * z1 + 16.0/116;
   }
     //los valores lab
     l= 116 * y1 -16;
     a= 500*(x1 -y1);
     b= 200*(y1 - z1);
      println ("lab" + l + " " +a+ " " + b);
     //calculo la distancia
     cab = sqrt(sq(a)+sq(b));
   println ("cab" + cab);
    //calculado el {ángulo
    float angle = atan2(bra);
    hub = degrees(angle);
    println ("hab" + hab);
  }
}
    //función para diferenciar colores
    float diferenciaSegun1994 (float[] lab1, float [] lab2){
      float c1,c2,dc,dl,da,dh,db,first,segundos,third;
     c1 = sqrt(lab1[1]*lab1[1]+lab1[2]*lab1[2]);
     c2 = sqrt(lab2[1]*lab2[1]+lab2[2]*lab2[2]);
     dc = c1-c2;
     dl = lab1[0]-lab2[0];
     da = lab1[1]-lab2[1];
     db = lab1[2]-lab2[2];
     dh = sqrt((da*da)+(db*db)-(dc*dc));
     println ("dh" + dh);
     first = dl;
     segundos = dc/(1+0.045*c1);
     println ("segundos" + segundos);
     third = dh/(1+0.015*c1);
     println ("third" + third);
     println("AQUI" + sqrt(first*first+segundos*segundos+third*third));
     return(sqrt(first*first+segundos*segundos+third*third));
}
Para reforzar el reconocimiento de colores, el niño o niña que selecciona un color en el espacio (aula) podrá distinguir un elipse que se desplaza a través de la pantalla ubicándose en objetos cuyo color es similar al seleccionado con el mouse. En caso de ser un color básico: ROJO, AMARILLO O AZUL (Concepto tradicional sobre los colores básicos), o VERDE, NEGRO O BLANCO se le mostrará un video que muestre objetos y su respectivo nombre del mismo color seleccionado.
Aquí el video de Demostración:

Ing. Juan Cadillo