{"id":670,"date":"2016-12-29T22:04:21","date_gmt":"2016-12-29T22:04:21","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/?p=670"},"modified":"2016-12-29T22:04:21","modified_gmt":"2016-12-29T22:04:21","slug":"headtracking-con-processing","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/2016\/12\/29\/headtracking-con-processing\/","title":{"rendered":"HeadTracking con Processing y OpenCV"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/media.giphy.com\/media\/l3vRlqD4jSpBU0DSM\/giphy.gif\" alt=\"Headtracking con Processing By Javier Vega\" width=\"798\" height=\"416\" \/><\/p>\n<p><b>Autor de la practica:<\/b><\/p>\n<p>Fco.\u00a0Javier vega Aguirre.<\/p>\n<h1><span style=\"color: #3366ff\">Documentaci\u00f3n:<\/span><\/h1>\n<h2><span style=\"color: #cc99ff\"><b>Descripci\u00f3n de la aplicaci\u00f3n:<\/b><\/span><\/h2>\n<p>Se trata de una aplicaci\u00f3n de Realidad Virtual que simula una ventana a un mundo virtual. En principio una ventana fija y est\u00e1tica, no se mueve, simplemente muestra una visi\u00f3n de un punto en una caja virtual, que emula una profundidad, que no existe, pero que el usuario, ve como si fuera una caja con volumen real. Por lo tanto al moverse, los objetos que hay en la caja cambian su perspectiva.<\/p>\n<p>Lo que vemos en dicha caja, es un bodeg\u00f3n de tres objetos, una pir\u00e1mide en estructura de alambre, un cubo flotante de aspecto similar a arena o madera y una esfera con aspecto de planeta tierra.<\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #cc99ff\">Descripci\u00f3n de Funcionamiento:<\/span><\/h2>\n<p>Se trata de una aplicaci\u00f3n compuesta por dos Sketches que se comunican en rol de Servidor\/Cliente.<br \/>\nPor lo que primero es necesario poner en funcionamiento la parte del Servidor, que en nuestro caso es el sketch \u201cRunThisServerFirts.pde\u201d.<br \/>\nuna vez lo hemos arrancado, ya podemos arrancar la parte del cliente que se denomina: \u201cRV.pde\u201d.<\/p>\n<h3>El servidor:<\/h3>\n<p>La parte del servidor, se encarga de escanear la imagen de v\u00eddeo en busca de caras utilizando para ello la librer\u00eda \u201cOpenCV for Processing\u201d.<br \/>\nUna vez encuentra la cara, la enmarca dentro de un cuadrado, que es que utilizamos, para obtener las coordenadas \u201cX\u201d e \u201cY\u201d. La coordenada \u201cZ\u201d, la obtenemos de la anchura de dicho cuadrado.<br \/>\nActo seguido las enviamos al cliente, y volvemos a empezar el ciclo.<\/p>\n<h3>El cliente:<\/h3>\n<p>El cliente, recibe las coordenadas, y las mapea para ajustarlas a la resoluci\u00f3n de pantalla que tenemos en este sketch.<br \/>\nUna vez transformadas, las aplica a la posici\u00f3n de la c\u00e1mara o sujeto virtual, cambiando de esta manera la forma en la que se muestra la escena retocando la perspectiva para que de m\u00e1s sensaci\u00f3n de realismo.<\/p>\n<h4>Diagrama Aut\u00f3mata:<\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/s-media-cache-ak0.pinimg.com\/originals\/c4\/91\/3a\/c4913a08b1e29bb112bc442594ef0e81.png\" alt=\"Diagrama Automata\" \/><\/p>\n<h4>Bucle:<\/h4>\n<ol>\n<li>Busca cara.(Servidor)<\/li>\n<li>Captura Posici\u00f3n.(Servidor)<\/li>\n<li>Env\u00eda Coordenadas.(Servidor)<\/li>\n<li>Recibe Coordenadas.(Cliente)<\/li>\n<li>Mapea Coordenadas.(Cliente)<\/li>\n<li>Calcula Escena.(Cliente)<\/li>\n<li>Muestra Resultado.(Cliente)<\/li>\n<\/ol>\n<h1><\/h1>\n<h1><span style=\"color: #3366ff\">Dificultades:<\/span><\/h1>\n<h2><span style=\"color: #cc99ff\"><b>Historia del\u00a0desarrollo:<\/b><\/span><\/h2>\n<p><strong>Pruebas, pruebas y m\u00e1s pruebas.<\/strong><br \/>\nAl principio, mi intenci\u00f3n era hacerlo todo en una sola aplicaci\u00f3n. Las primeras pruebas consist\u00edan en buscar la parte del c\u00f3digo que \u201ctrackeara\u00bb la cara. Realice muchas pruebas y la mas estable resulto ser WhichFace de Daniel Shiffman, la versi\u00f3n modificada por Jordi Tost. Era la m\u00e1s estable. y la que menos \u201ctemblores\u201d causaba.<br \/>\nUna vez ten\u00eda el tracker. Lo siguiente era representar la escena, algo que en principio parec\u00eda f\u00e1cil, resulto ser lo mas complicado. La posici\u00f3n de la c\u00e1mara y la perspectiva tambi\u00e9n dieron su propia guerra.<br \/>\nY que decir tiene que encontrar la manera de hacer que dos Sketches separados se comunicaran, (era la primera vez que lo intentaba) tambi\u00e9n dio su trabajo, porque me saltaba todo el rato un error, el cual logr\u00e9 solucionar con un try\/cach.<br \/>\nFinalmente consegu\u00ed una versi\u00f3n estable y que respond\u00eda al reto planteado.<\/p>\n<p>El principal Handicap de estar dividido en dos partes, es que primero hay que arrancar la parte del servidor y seguidamente la parte del cliente.<\/p>\n<p>De esta forma podemos ajustar la resoluci\u00f3n de la pantalla de salida (cliente), a la resoluci\u00f3n que tengamos en nuestro ordenador, pudiendo dejar oculta la parte del servidor.<\/p>\n<h2><span style=\"color: #cc99ff\">Resultado final:<\/span><\/h2>\n<p><iframe loading=\"lazy\" title=\"HeadTracking con Processing y OpenCV\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/dUofcnzExVs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h6><a href=\"https:\/\/www.youtube.com\/watch?v=dUofcnzExVs\">Ver en YouTube<\/a><\/h6>\n<p>Descargar c\u00f3digo fuente de GitHub <a href=\"https:\/\/gist.github.com\/jvegaag\/4b3126c62e3a03ffcd2ad90d7b174a20\" target=\"_blank\">aqu\u00ed.\u00a0<\/a><br \/>\nDescargar c\u00f3digo fuente de GDrive <a href=\"https:\/\/drive.google.com\/open?id=0B8XSWKmPxRqRbERvN1VkOUFWSGs\" target=\"_blank\">aqu\u00ed.\u00a0<\/a><\/p>\n<h4>\u00e1rbol de contenidos<\/h4>\n<p><img decoding=\"async\" class=\"\" src=\"https:\/\/s-media-cache-ak0.pinimg.com\/originals\/a7\/44\/86\/a74486551c26a0e8b359c382e592f1aa.png\" alt=\"arbor de contenidos\" \/><\/p>\n<h1><span style=\"color: #3366ff\">Mejoras:<\/span><\/h1>\n<h2><span style=\"color: #cc99ff\"><b>Versiones futuras:<\/b><\/span><\/h2>\n<p><strong>Navegando entre monta\u00f1as.<\/strong><br \/>\nHe barajado la posibilidad de hacer una especie de simulador de vuelo muy sencillo, potenciarlo con arduino y Wiichuck, que es un adaptador para conectar el mando 6 ejes nunchuck de la consola nintendo WII.<br \/>\nSeria un escenario de monta\u00f1as en 3D en estructura de alambre sobre el cual interactuariamos haciendo rotar o avanzar con el mando, basado en el trabajo de Daniel Shiffman :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/media.giphy.com\/media\/3oz8xxdfnyy2MiVROU\/giphy.gif\" width=\"355\" height=\"265\" \/><\/p>\n<h6><strong>Coding Challenge #11: 3D Terrain Generation with Perlin Noise in Processing.<\/strong><\/h6>\n<p>Adem\u00e1s de movernos por el escenario con el mando, tambi\u00e9n podr\u00edamos cambiar el \u00e1ngulo de visi\u00f3n de la escena moviendo nuestra cabeza, lo que dar\u00eda mas sensaci\u00f3n de realismo.<\/p>\n<h1><span style=\"color: #3366ff\">Impacto:<\/span><\/h1>\n<h2><span style=\"color: #cc99ff\"><b>Inspiraci\u00f3n para otros:<\/b><\/span><\/h2>\n<p><strong>La web como referente.<\/strong><br \/>\nAl igual que yo me he inspirado en el trabajo de otros como son:<br \/>\nJohny Chung Lee y Fabian Schlieper . Para realizar algo parecido a lo que ellos hab\u00edan hecho pero en otro lenguaje de programaci\u00f3n. Espero y deseo, que otras personas en el futuro usen mi trabajo y lo mejoren, o bien como entorno de videojuegos o como cualquier utilidad que puedan imaginar.<br \/>\nSiempre he cre\u00eddo en internet como una fuente de inspiraci\u00f3n y referencia. Por lo tanto el contenido debe ser de libre disposici\u00f3n para el estudio y el avance de la humanidad, aunque las leyes manipuladas por los poderosos digan lo contrario.<\/p>\n<h1><span style=\"color: #3366ff\">Hacks:<\/span><\/h1>\n<h2><span style=\"color: #cc99ff\">El arte de dar el uso inesperado:<\/span><\/h2>\n<p><strong>Yo no pens\u00e9 que se pudiera hacer eso\u2026<\/strong><br \/>\nEsta frase es la que el autor de cualquier cosa piensa cuando ve un Hack de su obra. Ya que un Hack es un uso inesperado e ins\u00f3lito de la misma. Es algo que el autor no hab\u00eda ni so\u00f1ado para su creaci\u00f3n, por esa raz\u00f3n me es imposible imaginar un hack para mi creaci\u00f3n. Puedo intentar imaginar usos alternativos, como videojuegos, atracciones (casa del terror, etc\u2026), usos medicos, etc\u2026<br \/>\nPero no llego a imaginar m\u00e1s all\u00e1. Ojal\u00e1 un d\u00eda me sorprenda algo fant\u00e1stico que yo he llegado a inspirar.<\/p>\n<h2>Referentes:<\/h2>\n<p>Johny Chung Lee. \u201c <a href=\"http:\/\/johnnylee.net\">johnnylee.net<\/a> \u201c.27 de Diciembre de 2016.<\/p>\n<p>Johnny Lee. \u201c.<a href=\"https:\/\/ www.youtube.com\/watch?v=Jd3-eiid-Uw\">Head Tracking for Desktop VR Displays using the WiiRemote<\/a> \u201d.27 de Diciembre de 2016.<\/p>\n<p>Fabian Schlieper. \u201c. <a href=\"https:\/\/www.youtube.com\/ watch?v=h9kPI7_vhAU\">3D Head Tracking Webcam OpenCV<\/a> \u201d.27 de Diciembre de 2016<\/p>\n<p>1Button. \u201c.<a href=\"https:\/\/ www.youtube.com\/watch?v=bBQQEcfkHoE\">i3D \u2014 Head Tracking for iPad: Glasses-Free 3D Display<\/a> \u201d.27 de Diciembre de 2016.<\/p>\n<p>algomix. \u201c. <a href=\"https:\/\/ www.youtube.com\/watch?v=LEPvUfC7wh8\">iDesktopVR &#8211; head tracking for iPhone \/ iPod Touch<\/a>\u201d.27 de Diciembre de 2016.<\/p>\n<p>Daniel Shiffman. Coding Challenge #11: 3D Terrain Generation with Perlin Noise in Processing. <a href=\"https:\/\/www.youtube.com\/watch?v=IKB1hWWedMk\">https:\/\/www.youtube.com\/watch?v=IKB1hWWedMk<\/a>. 27 de Diciembre de 2016.<\/p>\n<h2><\/h2>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Autor de la practica: Fco.\u00a0Javier vega Aguirre. Documentaci\u00f3n: Descripci\u00f3n de la aplicaci\u00f3n: Se trata de una aplicaci\u00f3n de Realidad Virtual que simula una ventana a un mundo virtual. En principio una ventana fija y est\u00e1tica, no se mueve, simplemente muestra una visi\u00f3n de un punto en una caja virtual, que emula una profundidad, que no &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/2016\/12\/29\/headtracking-con-processing\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abHeadTracking con Processing y OpenCV\u00bb<\/span><\/a><\/p>\n","protected":false},"author":119,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[49,168,57,53,111,169],"class_list":["post-670","post","type-post","status-publish","format-standard","hentry","category-estudiants","tag-3d","tag-headtracking","tag-opencv","tag-processing","tag-realidad-virtual","tag-server-client","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/posts\/670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/users\/119"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/comments?post=670"}],"version-history":[{"count":35,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/posts\/670\/revisions"}],"predecessor-version":[{"id":1180,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/posts\/670\/revisions\/1180"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/media?parent=670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/categories?post=670"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/es\/wp-json\/wp\/v2\/tags?post=670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}