20 may 2011

Mapas mentales

Interactivo
3D
Realidad aumentada
videoclip multimedia interactivo
Videoclip
Título: You have no choice

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.


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 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.


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. 1, 0, 0, 0
  2. 0, 1, 0, 0
  3. 0, 0, 1, 0
  4. 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:
  1. n11, n12, n13, n14
  2. n21, n22, n23, n24
  3. n31, n32, n33, n34
  4. 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. 1, 0, 0
  2. 0, 1, 0
  3. 0, 0, 1

x, y, y z son manejadas en las 3 primeras filas de la última columna.

Actionscript:
  1. 0
  2. 0
  3. 0

La última fila se deja para poder hacer la multiplicación de la matriz.

Como funciona matrix3D


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.

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.

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.

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).

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.

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.

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.

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.



Qué es la Realidad Aumentada??

AR (Augmented Reality) es una mezcla de realidad virtual y mundo real.
Un entorno generado por un ordenador con el que interactuamos desde el mundo real a través de una cámara y unos marcadores impresos.
Todo esto sucede en tiempo real, con interacción por parte del usuario, aprovechando las múltiples posibilidades de comunicación que facilita un ordenador: webcam por ejemplo.


Para ello hay que definir un marcador (que estará en la cruceta) y calibrarlo con la webcam para almacenarlo como un patrón de imagen reconocible.
Este reconocimiento de los límites del marcador es tridimensional, es decir, la cámara detectará los límites del marcador mediante dos niveles binarios, blanco y negro, para trazar un plano y que cuando el usuario incline la marca, el plano 3D (vídeos de los componentes del grupo tocando la canción) se inclinará de la misma forma generando de esa manera una sensación espacial en el escenario de la pantalla.


Las marionetas: prototipos y esquemas


En esta primera fase utilizaré en principio marionetas de cartón y crucetas de cartón.
Posteriormente, adaptaré alguno de los fotogramas del videoclip a las marionetas, para hacer una marioneta con imágenes de los propios componentes del grupo.
En las crucetas estará la marca de Realidad Aumentada, para comunicar la instalación.

El teatrito de juguete

    • En esta primera fase, usaré un teatro de juguete instalado en la propia sala. En principio será uno de cartón, aunque la idea para el proyecto final es que sea uno fabricado personalmente.



Funcionamiento de la instalación


A través de las posiciones que tome la cruceta, la marca de realidad aumentada pegada en ella, enviará las coordenadas a través de la web cam situada arriba del teatrito al pc y este se comunicará a través de FLARToolkit y Papervision3D con Actionscript3 para mover los vídeos en stopmotion de los componentes del grupo, sobre un escenario 3D.


PREPROYECTO...algunos cambios...

Idea Marionetas
Como ya comenté voy ha realizar una METÁFORA de esta canción y de su temática. La idea de las marionetas ha evolucionado de esta manera:
La instalación interactiva se realizará básicamente con los siguientes elementos:
- teatrito de juguete de marionetas (Cartón) y marionetas
- Web cam - proyector.
- pc
- programa para la interacción:
ActionSript3 (lenguaje de programación para flash)
+ Papervision3D (3D para flash)
+ FLARToolkit (Realidad aumentada para flash)

1ª Presentación del preproyecto

Hola, en marzo tuvimos que presentar en clase la idea del proyecto que teníamos, aqui os
dejo la presentación que preparé donde describía un poco la idea que tenía de proyecto.
Aunque ahora ha cambiado un poco, no quiero perder la idea principal que tenía que era
hacer una metafora de la canción y
usar las tecnologias y las técnicas que me gustan.


15 mar 2011

Estados del videoclip


Estos son los estados que he pensado crear en mi videoclip-marionetas

Idea Marionetas

Para esta canción y por el tema que habla se me ha ocurrido la metáfora de unas marionetas.
Esta sería la idea base de interacción con marionetas:

En la sala habría una mesa con (una o 3 crucetas), estas se comunicarían, mediante (hilos, palos,?, -por definir-) con el teclado hakeado, y esto haría que cada movimiento de la cruceta sea una interacción con el teclado.
Esto hará que los componentes del grupo en pantalla actúen y suenen los instrumentos en relación a los movimientos (pistas separadas de la canción) de la cruceta que el espectador mueve.

Posibilidades:
Que haya una cruceta por componente del grupo o una para todos.
Que con mover una de las crucetas, se mueva el componente del grupo .
Que según se mueva la cruceta se mueva el componente del grupo en el escenario.(¿?)

14 mar 2011

Gatomidi en directo

El sábado pasado Gaomidi tocó como telonero de Fangoria, en la final de circuit rock Valencia. Grabé la canción que quiero hacer para el videoclip para observar cuáles son los movimientos basicos y más característicos que realizan lo componentes del grupo.

La canción: You have no choice.

Para una asignatura del máster tenía que realizar un videoclip con unos videos extraídos de soportes analógicos, y grabados en digital de manera 'casera'. Aproveché este ejercicio para hacer un videoclip(visual) de la canción elegida. Aqui podeis ver y oir la canción.

Letra de la canción
if you take the things they offer you
you will be a part of their plan
if you feel like a fly under their hand
darkness will be your bitter tomb
paranoia is growing in your side
you can taste like your blood burn

you have no choice

get up and tell the world
that is lie
rise your voice
and spit the truth up
if only for a moment

can you see the humans
walk like sheep


Y que significa? Es algo asi como que simpre estamos a disposición de alguien, que siempre seguimos las mismas pautas y las mismas rutinas, parece que todos tenemos un patron que seguir y que siempre tienes que hacer caso a las personas que están por encima de ti. La canción va de alguien que se niega a hacer todo eso, es un observador que ve esos patrones y se quire hacer ver, pero a su vez sabe que no tiene elección y que tarde o temprano caera en ello, pero que mientras que no sea asi el puede tomar sus propias decisiones.

Gatomidi, el grupo

Gatomidi es una banda de música independiente de Valencia, ligada a la corriente artística de la New Wave, aunque reúne una amplia variedad de influencias. En 2009 , Jimena Quejigo (bajo, voz y sintetizadores) y Nolasco Contreras (voz y guitarra), deciden emprender un proyecto musical conjunto.A finales de este mismo año, publican sus primeras demos en Internet, y conocen a Jorge Ramírez, quien será el batería. Durante la primera mitad de 2010, la banda comienza a realizar sus primeros conciertos en festivales locales, y algunas salas de la ciudad.Es en primavera de este año, cuando deciden emprender un viaje compositivo hacia lo que será su primer álbum de estudio Facing Destiny, y cuya producción fue a cargo de la propia banda. Sensación, percepción, y emoción, pilares fundamentales de esta banda, la cual quedó finalista en el concurso Circuit Rock de Valencia en marzo del 2011.

"Facing Destiny" Cover Art

ir al myspace de Gatomidi

10 feb 2011

El concepto de videoclip

El concepto del videoclip tiene en si dos vertientes, antagónicas pero conectadas entre sí:
Por un lado, la función comercial del producto:

El videoclip tiene como primer objetivo la venta de un disco, la promoción de un grupo, de una canción. A través de esta promoción como de otro tipo, se llega a la creación de una imagen corporativa, como la de las grandes empresas. Esta imagen es acorde a las preferencias materiales y/o ideológicas de su público objetivo y en gran parte, de ella dependerá el éxito o fracaso comercial del disco en cuestión. También contará la calidad de la música, aunque en muchas ocasiones, aun siendo muy triste, esto a veces no es proporcional.

La otra vertiente en la que se fundamenta el videoclip parece la más interesante y es en la que intentaré centrarme: esta es la perspectiva artística del asunto, las formas de descripción y narración, los efectos y técnicas utilizadas, la escuela marcada por los más importantes directores, etc.

Un videoclip es un formato audiovisual complejo sometido al ritmo y tempo de un tema musical que marcará su duración, y que ofrece una representación visual de la canción, de manera Anarrativos (descriptivos), descriptivos, o ambos.

Se caracteriza por la radicalidad y experimentación en materia de efectos visuales y por la agilidad de sus cortes lo que les hace tener una identidad propia.

Con esto, estoy preparada para embarcarme en esta aventura, crear mi propio videoclip interactivo, here we go!!

Bienvenidos!!

Bienvenid@s!!
Este es el blog donde ire desarrollando mi proyecto. Un videoclip interactivo para el grupo de música Gatomidi.

En el realizaré y escribiré todo el proceso de realización del videoclip.
Analizaré las ultimas tendencias en los videoclips, asi como la historia del mismo, por el cual el videoclip es ahora lo que es.
También investigaré sobre la posible interactividad que podría tener en concreto mi videoclip. Así como la parte más técnica del proyecto, herramientas usadas, tutoriales y todo lo que encuentre para realizar el mismo.

Iré subiendo recursos varios como videos, fotografias, documentos y todo lo que encuentre de utilidad para el proyecto.

Si alguien tiene algún comentario o aportación que hacer sobre mi proyecto os agradeceria que lo hicierais!
muchas gracias y bienvenidos de nuevo!

PD: Para empezar os quiero mostrar un videoclip interactivo, fue el primer videoclip interactivo que conocí, y fue por el cual empecé a pensar en trabajar sobre ello. Es de Arcade fire y usa la tecnologia HTML5 además de ayuda de google maps.
Espero que os guste!