Interacciones divertidas con cámaras y processing

1. Interacciones divertidas con cámaras y processing

2. Índice de contenidos: • Qué puede hacerse • Fundamentos • Primeros ejemplos • Primer Juego

3. Intro: ¿Juegos con reconocimiento de imagen?

4. Mis cosas: CityFireflies http://cityfireflies.com/ https://vimeo.com/25071870

5. Mis cosas: Sonic Skate

6. De otros: El primero. Videoplace http://youtu.be/dmmxVA5xhuo?t=1m30s Myron Krueger, 1975

7. Messa di Voice http://www.tmema.org/messa/messa.html https://www.youtube.com/watch?v=STRMcmj-gHc Golan Levin and Zach Lieberman with Jaap Blonk and Joan La Barbara

8. levelHead https://www.youtube.com/watch?v=UJYKSFANuaQ Julian Oliver

9. En el navegador: justareflektor.com https://www.justareflektor.com Vincent Morisset and Aaron Koblin

10. HAND FROM ABOVE http://www.creativeapplications.net/openframeworks/hand-from-above-openframeworks/ Vincent Morisset and Aaron Koblin

11. Intro: Técnicas básicas

12. Nuestro problema: Una cámara nos da un array de pixels, nada de información de lo que hay en ellos ¿Como identificar qué se está viendo? .

13. Técnicas Básicas Un uso habitual es preparar la imagen para posteriores procesos.

14. .

15. Background Sustraction Se utiliza para detectar variaciones en una imagen respecto a otra de referencia. Simplemente se restan los valores de alguna característica de cada pixel entre una imagen y otra Fuente: http://se.inf.ethz.ch/courses/2013b_fall/rpl/lectures/10_RobotPerception.pdf

16. Blobs Regiones con una característica constante en una imagen http://golancourses.net/2012spring/03/29/interact-reactive-environments/

17. Tracking de Blobs Seguimiento del movimiento de las regiones a lo largo de una secuencia de imagen: Una mano que se mueve, una persona que anda, un coche que pasa http://golancourses.net/2012spring/03/29/interact-reactive-environments/

18. En processing

19. Abriendo la cámara import processing.video.*; • void setup() { • video = new Capture(this, width, height); • video.start(); • void draw(){ • if (cam.available() == true) { • cam.read(); • } • image(cam, 0, 0); Código de ejemplo libraries -> video-> capture -> GettingStartedCapture

20. Leyendo pixels de la imagen Pixels de la pantalla: color pink = color(255, 102, 204); loadPixels(); for (int i = 0; i < (width*height/2)-width/2; i++) { pixels[i] = pink; } updatePixels(); Pixels de la pantalla: video.loadPixels(); // Make its pixels[] array available Código de ejemplo libraries -> video-> capture -> frameDifferencing (sobre la extraccion de color): http://processing.org/reference/red_.html BG sustraction

21. Un filtro loadPixels(); for (int i = 0; i < numPixels; i++) { pixelBrightness = brightness(video.pixels[i]); if (pixelBrightness > threshold) { // If the pixel is brighter than the pixels[i] = white; // threshold value, make it white } else { // Otherwise, pixels[i] = black; // make it black } } updatePixels(); Código de ejemplo libraries -> video-> capture ->Brightness threshold

22. Siguiendo el pixel mas brillante float pixelBrightness = brightness(pixelValue); // If that value is brighter than any previous, then store the // brightness of that pixel, as well as its (x,y) location if (pixelBrightness > brightestValue) { brightestValue = pixelBrightness; brightestY = y; brightestX = x; } EN ESTE TIPO DE APLICACIONES ES MUY IMPORTANTE CONFIGURAR BIEN EL ENTORNO Código de ejemplo libraries -> video-> capture ->Brightness Tracking

23. Un primer inicio de “juego”

24. Instalando opencv Sketch->import library->add library… Opencv for processing by Greg Borenstein