Vídeo presentación del videoclip interactivo Gatointeractivo.
20 may 2011
vista de Instalación Gatointeractivo: pantalla- realidad aumentada
Mediante una webcam capturaremos frontalmente lo que sucede en el teatro, quedando el espectador en la parte trasera del teatro.
La proyección de lo que grabará en tiempo real la webcam se verá a través de un proyector sobre una pantalla, situado enfrente del teatro y el espectador.
Cuando el programa encuentre alguna de las marcas el batería empezará a tocar y la base musical quedará marcada por él, que aparecerá siempre en el centro del escenario y no será movible.
Sobre las marcas se proyectarán unos vídeos de los componentes, ya sean frontales o traseros, mientras suena el instrumento que ellos tocan. Si la marca desaparece del escenario, el sonido de dicho instrumento y la voz si es el caso, también dejará de oírse.
La proyección de lo que grabará en tiempo real la webcam se verá a través de un proyector sobre una pantalla, situado enfrente del teatro y el espectador.
Cuando el programa encuentre alguna de las marcas el batería empezará a tocar y la base musical quedará marcada por él, que aparecerá siempre en el centro del escenario y no será movible.
Sobre las marcas se proyectarán unos vídeos de los componentes, ya sean frontales o traseros, mientras suena el instrumento que ellos tocan. Si la marca desaparece del escenario, el sonido de dicho instrumento y la voz si es el caso, también dejará de oírse.
Limitaciones del FLARToolkit
FLARToolkit tiene también sus limitaciones. El FlashPlayer dispone de unos recursos limitados, debido a que funciona como una máquina virtual. Los algoritmos de Realidad Aumentada y tratamiento de imagen requieren muchísimo procesado y por ello, nuestro navegador puede verse saturado bajo ciertas condiciones.
La meta del tiempo real (sobre los 24-30 frames por segundo) es difícil de alcanzar.
En modelados complicados, de lento renderizado, también hacen caer los frames de nuestra webcam.
Normalmente cuando aparece el modelo 3D si visualizamos el visor de rendimiento que he añadido en la ventana se observa q oscila entre 7-14 fps.
La meta del tiempo real (sobre los 24-30 frames por segundo) es difícil de alcanzar.
En modelados complicados, de lento renderizado, también hacen caer los frames de nuestra webcam.
Normalmente cuando aparece el modelo 3D si visualizamos el visor de rendimiento que he añadido en la ventana se observa q oscila entre 7-14 fps.
La instalación que muestra la parte del usuario:
El usuario puede mover estas dos marcas a su gusto, girarlas, o quitarlas, y con ello hacer su propio videoclip. Apareciendo él por detrás, haciendo referencia metafóricamente a la letra de la canción, de que somos manejados, así como si los propios componentes del grupo fueran marionetas, y será el espectador el que decide que ver y que oir.
El usuario puede mover estas dos marcas a su gusto, girarlas, o quitarlas, y con ello hacer su propio videoclip. Apareciendo él por detrás, haciendo referencia metafóricamente a la letra de la canción, de que somos manejados, así como si los propios componentes del grupo fueran marionetas, y será el espectador el que decide que ver y que oir.
14 may 2011
11 may 2011
Prueba con 4 Marcas + sonido para cada una
Después de varios días he conseguido tener la interactividad resuelta, 4 movieclips uno para cada marca, los que pertenecerían a la parte frontal y trasera de guitarra y bajo y el 5º que pertenecería a la batería, que estará fijo en el centro marcando la base de la canción.
Aquí se puede ver, con los clips de prueba que hice, que al girar cambia el clip, que si desaparece, ese instrumento deja de sonar y si aparece de nuevo continua por donde se había quedado.
9 may 2011
Hace unos dias conseguí poder cargar diferentes movieclips sobre varias marcas. Utilicé 2 mc diferentes y 2 marcas para hacer pruebas, y comprobar que puedo continuar con mi idea de que cada marca sea cada uno de los componentes de grupo, asi como otras 2 marcas para la parte trasera. Cuando se gire la marca, tambien girará el video, y se mostrará otro (el de la parte de atras de los componentes del grupo).
29 abr 2011
El objeto Matrix3D
Todos los objetos 3D en Papervision tienen una Matrix3D en la que se define su escala, inclinación, orientación, rotación, x, y, y z.
El valor por defecto de de las 4 columnas y las 4 filas es el siguiente:
Actionscript:
- 1, 0, 0, 0
- 0, 1, 0, 0
- 0, 0, 1, 0
- 0, 0, 0, 1
Estos valores se almacenan las propiedades de transformación del objeto 3D usando una “n”, un entero para el numero de fila y otro entero para el numero de columna, quedando de la siguiente manera:
Actionscript:
- n11, n12, n13, n14
- n21, n22, n23, n24
- n31, n32, n33, n34
- n41, n42, n43, n44
Escala, inclinación, orientación y rotación se manejan en las 3 primeras filas y columnas de la matriz, que podéis probar en el swf del link que dejo abajo.
Actionscript:
- 1, 0, 0
- 0, 1, 0
- 0, 0, 1
x, y, y z son manejadas en las 3 primeras filas de la última columna.
Actionscript:
- 0
- 0
- 0
La última fila se deja para poder hacer la multiplicación de la matriz.
26 abr 2011
25 abr 2011
FLARToolKit
Básicamente se trata de insertar elementos 3D en un vídeo, normalmente a tiempo real. Los materiales básicos son una webcam, un programa corriendo en tu PC/MAC y una plantilla proporcionada por los creadores del programa. Tu sólo debes imprimir la plantilla y ponerla dentro del campo de visión de la webcam y el programa se encarga de analizar las imágenes, localizar la plantilla y a partir de esta, añadir elementos 3D al vídeo.
Para poder usar la librería, nos la descargamos a través de subversión aquí.
La lógica básica de esta API es hacer un mapa de bits de intersección entre la imagen captada por cámara web y un detector de marcador que se puede personalizar.
Cuando FLARToolkit captura la imagen de la webcam, se calcula una matriz que representa la deformación 3D de la detección de marca. Con esta matriz, se genera un entorno 3D con la API de Papervision3D.
Son MUY importantes los archivos:
"camera_para.dat" que es la camara y el patrón “.pat”, que será la marca que detectará para cargar los elementos 3D.
Para poder usar la librería, nos la descargamos a través de subversión aquí.
La lógica básica de esta API es hacer un mapa de bits de intersección entre la imagen captada por cámara web y un detector de marcador que se puede personalizar.
Cuando FLARToolkit captura la imagen de la webcam, se calcula una matriz que representa la deformación 3D de la detección de marca. Con esta matriz, se genera un entorno 3D con la API de Papervision3D.
Son MUY importantes los archivos:
"camera_para.dat" que es la camara y el patrón “.pat”, que será la marca que detectará para cargar los elementos 3D.
La marca:
Para crear una marca propia podemos descargar ARToolKitMarkerGernerator: (Debes tener instalado el Adobe Air).
Iniciarlo, apuntar con la cámara la marca (previamente realizada con photoshop, por ejemplo) y hacer clic en "Guardar Patrón" y guardar el archivo .pat para añadirlo al proyecto.
Para crear una marca propia podemos descargar ARToolKitMarkerGernerator: (Debes tener instalado el Adobe Air).
Iniciarlo, apuntar con la cámara la marca (previamente realizada con photoshop, por ejemplo) y hacer clic en "Guardar Patrón" y guardar el archivo .pat para añadirlo al proyecto.
Hay que tener en cuenta cosas como que la marca tiene que ser totalmente diferente en la rotación de 90º para que FLARToolKit detecte correctamente la posición.
Por ejemplo, el dibujo de la derecha no funcionaria correctamente, pero si lo haría el de la izquierda.
Papervision3D
Puesto que iba a necesitar elementos 3D me recomendaron investigar sobre Papervision3D.
PV3D en realidad no se instala. Se trata de una librería de clases de ActionScript de la que se servirá nuestra aplicación para implementar sus funciones.
Había que descargarse el subversión para actualizar y/o descargar el uso de código de terceras partes, ya fuera de Papervision o de FLARToolKit, por lo que instalé el plugin de eclipse para subversión (subeclipse) y descargué el código alojado en el repositorio de papervision.
Lo primero que hay que saber es en que consiste una aplicación de PV3D, su funcionamiento básico y cómo ponerlo en marcha, así como conceptos fundamentales:
Viewport: es la parte visible de todos nuestros elementos 3D y el encargado de coordinar el tipo de renderizado, la cámara y la escena. Es lo que añadimos directamente a nuestro stage de Flash.
Escena (Scene): es el contenedor de todos los elementos visibles y formas que tendrá nuestra aplicación. Digamos que es como un “display list” interno de papervision.
Motor de renderizado (Renderer): como su nombre indica se encarga de renderizar la escena. En papervision, cada vez que modificamos algo en la escena 3D, debemos renderizar de nuevo. Lo que se suele hacer es un método que se encargue de ello y que se ejecuta en un intervalo fijo mediante el evento “ENTER_FRAME”.
Cámara: en papervision podemos controlar la posición, rotación y zoom de la cámara que visualiza el contenido.
PV3D en realidad no se instala. Se trata de una librería de clases de ActionScript de la que se servirá nuestra aplicación para implementar sus funciones.
Había que descargarse el subversión para actualizar y/o descargar el uso de código de terceras partes, ya fuera de Papervision o de FLARToolKit, por lo que instalé el plugin de eclipse para subversión (subeclipse) y descargué el código alojado en el repositorio de papervision.
Lo primero que hay que saber es en que consiste una aplicación de PV3D, su funcionamiento básico y cómo ponerlo en marcha, así como conceptos fundamentales:
Viewport: es la parte visible de todos nuestros elementos 3D y el encargado de coordinar el tipo de renderizado, la cámara y la escena. Es lo que añadimos directamente a nuestro stage de Flash.
Escena (Scene): es el contenedor de todos los elementos visibles y formas que tendrá nuestra aplicación. Digamos que es como un “display list” interno de papervision.
Motor de renderizado (Renderer): como su nombre indica se encarga de renderizar la escena. En papervision, cada vez que modificamos algo en la escena 3D, debemos renderizar de nuevo. Lo que se suele hacer es un método que se encargue de ello y que se ejecuta en un intervalo fijo mediante el evento “ENTER_FRAME”.
Cámara: en papervision podemos controlar la posición, rotación y zoom de la cámara que visualiza el contenido.
IDE para programar AS3
Viendo que el tema se iba a complicar, en cuestión de código y librerías, y que el entorno de programación del IDE Flash me parecía infumable, empecé a investigar sobre cuáles eran los IDE’s más usados a la hora de programar AS3.
Y cual fue mi sorpresa al encontrar que para Eclipse, el IDE por excelencia de JAVA, existían diferentes soluciones para programar AS3 en él. Intenté probar con varios plugins, como el FDT de Flex, pero algo no acabé de hacer bien porque no me funcionó ni un “hola mundo” asi que lo que hice es descargarme el Flex Builder 4, que simplemente es herramienta para desarrollar Flash, propiedad de Adobe, con varias utilidades muy interesantes y que está basado en Eclipse, (un IDE de desarrollo), para que entienda la sintaxis ActionScript para poder compilar nuestros proyectos desde el Eclipse (lo que no significa que use el framework de Flex).
Y cual fue mi sorpresa al encontrar que para Eclipse, el IDE por excelencia de JAVA, existían diferentes soluciones para programar AS3 en él. Intenté probar con varios plugins, como el FDT de Flex, pero algo no acabé de hacer bien porque no me funcionó ni un “hola mundo” asi que lo que hice es descargarme el Flex Builder 4, que simplemente es herramienta para desarrollar Flash, propiedad de Adobe, con varias utilidades muy interesantes y que está basado en Eclipse, (un IDE de desarrollo), para que entienda la sintaxis ActionScript para poder compilar nuestros proyectos desde el Eclipse (lo que no significa que use el framework de Flex).
Me parecía excelente la idea de poder crear los gráficos y assets de la aplicación, y luego exportarlos a swf o swc, para posteriormente cargarlos desde código.
Creo que es una manera mucho más ordenada de hacer las cosas, y que facilita la relación entre programador-diseñador.
Creo que es una manera mucho más ordenada de hacer las cosas, y que facilita la relación entre programador-diseñador.
Digamos que en el caso que estas dos personas no fueran la misma, QUE NO ES MI CASO, el diseñador no tendría que preocuparse por la arquitectura de la aplicación, ya que su función se limitaría a la creación de “assets” gráficos independientes.
AS3 vs AS2
Durante las clases de Instalaciones interactivas, he aprendido lo básico sobre AS2.
Al plantearme este tipo de proyecto me replanteé si usar AS2 o AS3.
Al conocer tan poco sobre AS2, me pareció una buena oportunidad para aprender este nuevo lenguaje de programación, hay que estar a la vanguardia y explorar las posibilidades que AS3 nos ofrece y no quedarnos estancados en un, para mi gusto, arcaico AS2.
Creo que siendo programadora JAVA desde hace 4 años no me asustaba tanto este lenguaje, como le sucede a mucha gente,sobre todo gente acostumbrada al AS2, pero creo que AS3 es un buen ejemplo de estándar de programación y POO.
Aquí hay una explicación de cómo funciona AS3 de manera muy sencilla: introducción a los contenedores.
Al plantearme este tipo de proyecto me replanteé si usar AS2 o AS3.
Al conocer tan poco sobre AS2, me pareció una buena oportunidad para aprender este nuevo lenguaje de programación, hay que estar a la vanguardia y explorar las posibilidades que AS3 nos ofrece y no quedarnos estancados en un, para mi gusto, arcaico AS2.
Creo que siendo programadora JAVA desde hace 4 años no me asustaba tanto este lenguaje, como le sucede a mucha gente,sobre todo gente acostumbrada al AS2, pero creo que AS3 es un buen ejemplo de estándar de programación y POO.
Aquí hay una explicación de cómo funciona AS3 de manera muy sencilla: introducción a los contenedores.
Cómo he empezado todo esto...
En este post voy a explicar de que manera estoy desarrollando este proyecto:
Desde que me puse a desarrollar en serio este proyecto, cuando la idea ya estaba definida y todo parecía tener forma, me enfrenté al duro momento de EMPEZAR sobre todo con una tecnología nueva, bueno una no, en mi caso han sido cuatro.
Desde que me puse a desarrollar en serio este proyecto, cuando la idea ya estaba definida y todo parecía tener forma, me enfrenté al duro momento de EMPEZAR sobre todo con una tecnología nueva, bueno una no, en mi caso han sido cuatro.
- La primera duda que me surgió fue usar Actionscript 2 o Actionscript 3. Aquí explico con mas detalle esto.
- La segunda cuestión era que me parecía horroroso programar en el IDE de Flash. Aquí explico mi experiencia.
- La tercera era enfrentarme al código de Papervision3D.
- La cuarta era la Realidad Aumentada en Flash (FLARToolKit).
20 abr 2011
Primera prueba Realidad aumentada
Voy avanzando, hoy he conseguido hacer algo en el mundo de la Realidad Aumentada, sobre un patrón que he creado con photoshop y convertido con ARToolKitMarkerGenerator, he creado 3 cubos que se proyectan sobre mi marca!!
Primeras pruebas
Después de una semana de configuraciones y de tutoriales con papervision3D esto es lo primero que he sacado!
un plano doble que gira con la imagen...no es mucho pero por algo se empieza!
18 abr 2011
Estilo general de la instalación
La idea es dar a toda la instalación una sensación de ser “de juguete”. Se intentará grabar a los componentes con instrumentos de cartón, en un principio más básicos y posteriormente más profesionales.
He encontrado "googleando" instrumentos de cartón muy elaborados!! Si tengo tiempo me gustaría hacer algo parecido, aunque tambien he pensado que al darle ese toque de juguete, de marioneta, podría hacerlo mucho mas sencillo...
Flash, FLARToolKit y Papervision3D
La programación se está realizando con Flash, en el lenguaje de programación AS3 y con la ayuda de diferentes librerías, una de ellas y de la que estoy investigando es FLARToolKit: librería de flash para insertar elementos 3D en un video, a tiempo real, que se encarga de calcular la posición 3D del código, (marca fiducial) dentro del video.
La interfaz de RA se tiene que integrar con otra librería para Flash, Papervision3D, que es un motor de gráficos 3D para Flash Open source, para desarrollar escenas 3D.
En realidad los vídeos de los componentes serán planos en 2 dimensiones que darán la sensación de ser “cartón”, sobre el escenario virtual, que será una imagen del teatrito real. Al mover la marioneta física, los planos 2D se moverán según los movimientos que se realicen con la cruceta.
La interfaz de RA se tiene que integrar con otra librería para Flash, Papervision3D, que es un motor de gráficos 3D para Flash Open source, para desarrollar escenas 3D.
En realidad los vídeos de los componentes serán planos en 2 dimensiones que darán la sensación de ser “cartón”, sobre el escenario virtual, que será una imagen del teatrito real. Al mover la marioneta física, los planos 2D se moverán según los movimientos que se realicen con la cruceta.
Suscribirse a:
Entradas (Atom)