22/04/2016

Efectos especiales interactivos gracias a la webcam

Efectos especiales interactivos gracias a la webcam

En 1991, dos estudiantes de Cambridge colocaron una cámara de video frente a la máquina de café del laboratorio de computación de la universidad. Gracias a un sistema programado por ellos, las imágenes se transmitían a una red interna de computadoras, desde las cuales podían ver si la máquina todavía tenía café sin necesidad de levantarse y caminar hasta el pasillo. En 1993, los navegadores web adquirieron la capacidad de mostrar imágenes, y el sistema fue modificado para que todo el mundo pudiera ver el estado de la máquina a través de un sitio web.

Las imágenes se actualizaban cada tres minutos, no tenían color y eran de baja resolución; sin embargo, esa fue la primera cámara web, o webcam, de la historia. Con el tiempo, y a medida que la tecnología avanzaba, las webcam fueron adquiriendo importancia para actividades tan diversas como la videoconferencia, la medición del pulso cardíaco, la astrofotografía y la vigilancia en espacios cerrados.

Pero hay un campo de aplicación de las webcams que todavía tiene muchas sorpresas para dar: la creación de efectos interactivos para sitios web. En otras palabras, se genera texto, imagen o sonido en función de lo que capture la cámara de nuestra computadora. Los siguientes ejemplos muestran los horizontes creativos de esta modalidad de interacción, que en algunos casos también puede implementarse para cámaras de smartphone o tablet.

Reflections

Un interesante proyecto artístico. Se trata de una serie de retratos interactivos de personas comunes, en cuyos ojos podemos vernos reflejados gracias a la webcam. Además, si tapamos la cámara con el dedo, el retratado se cae de espaldas como si lo hubiéramos golpeado en la frente.

Deja vu

Este sitio web utiliza la webcam para reconocer las facciones de nuestro rostro. Para ello debemos quedarnos absolutamente quietos por alrededor de un minuto (pudiendo tener que reintentar varias veces), pero cuando el proceso termine, descubriremos que la incomodidad valió la pena. El sistema toma un modelo de nuestro rostro y lo deforma de maneras increíbles, aplicándole gestos y diversos efectos especiales. Un experimento valioso tanto por su concepto artístico como por su complejidad técnica.

Optical Flow Effects

Este pequeño experimento nos permite aplicarles tres filtros de imagen diferentes a lo que captura nuestra webcam en tiempo real. Solo para Google Chrome.

Find your Force

Para promocionar su línea de medias de Star Wars, la marca de ropa Stance nos invita a una presentación interactiva donde avanzamos a través del movimiento de nuestras manos frente a la webcam. Al final del recorrido, incluso podemos comprar nuesro modelo preferido con el mismo método. Si bien algunas maniobras pueden resultar difíciles de realizar, la experiencia no deja de ser memorable.

Endless Wish

Para celebrar la llegada de 2016, la agencia francesa Sweet Punk lanzó este sitio web, donde se nos pide expresar tres emociones diferentes (felicidad, enojo y sorpresa) frente a la webcam. Una vez que la aplicación reconozca nuestros gestos, se nos mostrará una serie de extraños objetos tridimensionales que cambiarán de forma según la emoción que expresemos. Solo disponible para las últimas versiones de Chrome.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce