{"id":996,"date":"2019-08-20T10:15:18","date_gmt":"2019-08-20T08:15:18","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/5-8-2-exemple-poesia-interactiva-amb-snap\/"},"modified":"2019-10-15T16:29:45","modified_gmt":"2019-10-15T14:29:45","slug":"5-8-2-exemple-poesia-interactiva-amb-snap","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/5-8-2-exemple-poesia-interactiva-amb-snap\/","title":{"rendered":"5.8.2. Ejemplo: poes\u00eda interactiva con Snap!"},"content":{"rendered":"<p>Ya hemos visto que con Snap! podemos hacer poes\u00eda experimental, generativa o cin\u00e9tica. Tambi\u00e9n la podemos hacer interactiva, y ahora lo veremos analizando un ejemplo con detalles.<\/p>\n<p>El efecto es el de un escenario lleno de letras, repartidas en columnas y filas y que todo el rato van cambiando de vestido (saltando de una letra a la otra aleatoriamente). El programa pone en marcha la c\u00e1mara web, que enfoca todo el escenario, y usa un sensor de movimiento. En las \u00e1reas del escenario donde se detecta movimiento las letras caen y desaparecen, y vuelven a aparecer al cabo de un rato. Si nos ponemos ante la c\u00e1mara web y nos movemos, podemos jugar a hacer caer las letras con nuestros propios movimientos. Pod\u00e9is ver el efecto abriendo el proyecto mencionado y usando vuestra c\u00e1mara web, o pod\u00e9is haceros una idea mirando el gif animado siguiente:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1062 size-full\" src=\"\/wp-content\/uploads\/2019\/09\/20.212_141_ok.gif\" alt=\"\" width=\"468\" height=\"348\" \/><\/p>\n<p>Igual que jugamos con letras aleatorias, podr\u00edamos jugar con palabras, versos, etc.<\/p>\n<p>Para programar este ejemplo, hemos usado clones. El programa empieza fijando el tama\u00f1o del \u00fanico personaje (es decir, la letra) y poni\u00e9ndole el vestido de \u00aba\u00bb. Entonces activamos la c\u00e1mara web con la instrucci\u00f3n \u00abfija la transparencia de v\u00eddeo en X\u00bb del men\u00fa \u00abSensores\u00bb, en la cual X es un n\u00famero hasta 100 que nos permite jugar con la transparencia de la imagen que capta la c\u00e1mara web (por si le queremos dar m\u00e1s o menos presencia en el proyecto). A continuaci\u00f3n situamos la letra arriba a la izquierda y vamos creando las diez columnas y las ocho filas con dos bucles, uno dentro del otro. En cada posici\u00f3n, en la que debe ir una letra, lo que hacemos es crear un clon de nuestro personaje.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1456\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_142_cast.png\" alt=\"\" width=\"350\" height=\"488\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_142_cast.png 218w, \/wp-content\/uploads\/2019\/10\/20.212_142_cast-215x300.png 215w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/p>\n<p>Entonces debemos definir qu\u00e9 ha de hacer cada clon cuando empiece a ejecutarse. Su comportamiento estar\u00e1 regido por un bucle \u00abpara siempre\u00bb y un condicional que comprobar\u00e1 si la cantidad de movimiento sobre el mismo clon pasa de un cierto umbral que definimos. Para hacer esto, necesitaremos el bloque \u00abmovimiento del v\u00eddeo\u00bb del men\u00fa \u00abSensores\u00bb. Este bloque nos devuelve un n\u00famero del 0 al 100, en el que 100 es el m\u00e1ximo de movimiento.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1458\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_143_cast.png\" alt=\"\" width=\"350\" height=\"177\" \/><\/p>\n<p>En nuestro caso, si la cantidad de movimiento detectada por el clon es mayor que 98 (es decir, si hay bastante movimiento), haremos que el clon se mueva hacia abajo, desaparezca y vuelva all\u00ed donde estaba (es decir, haremos que la letra caiga). Esto lo haremos disminuyendo la coordenada Y y volviendo a la Y inicial que ten\u00eda (que hemos guardado en una variable).<\/p>\n<p>En caso de que la cantidad de movimiento sea menor o igual que 98, sencillamente vamos cambiando de vestido para que vayan apareciendo diferentes letras.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1460\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_144_cast.png\" alt=\"\" width=\"447\" height=\"420\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_144_cast.png 344w, \/wp-content\/uploads\/2019\/10\/20.212_144_cast-300x282.png 300w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/p>\n<p>Este ejemplo, que lo hemos pensado para ejecutarse en la pantalla del ordenador, lo podr\u00edamos imaginar en una instalaci\u00f3n m\u00e1s grande, con la imagen proyectada en una pared y las personas movi\u00e9ndose delante. Una instalaci\u00f3n de este tipo es <a href=\"http:\/\/collection.eliterature.org\/2\/works\/nadeau_stillstanding.html\" target=\"_blank\" rel=\"noopener noreferrer\"><em>x standing<\/em><\/a> (2005), de <strong>Bruno<\/strong> <strong>Nadeau<\/strong> y <strong>Jason<\/strong> <strong>Lewis<\/strong>.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-354\" src=\"\/wp-content\/uploads\/2019\/08\/20.212_145.jpg\" alt=\"\" width=\"800\" height=\"558\" srcset=\"\/wp-content\/uploads\/2019\/08\/20.212_145.jpg 800w, \/wp-content\/uploads\/2019\/08\/20.212_145-300x209.jpg 300w, \/wp-content\/uploads\/2019\/08\/20.212_145-768x536.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>En esta obra los caracteres van apareciendo sobre un escenario blanco al detectar el movimiento de las personas que pasan por delante de la pared, y si las personas se quedan quietas los caracteres acaban componiendo una figura que replica la silueta del espectador. Y, a\u00fan m\u00e1s, el espectador puede leer el poema \u00abSeeking sedation\u00bb. Por lo tanto, estamos hablando de un sistema bastante m\u00e1s sofisticado que el que acab\u00e1bamos de explicar. Aqu\u00ed no solamente se detecta movimiento, sino que el programa es capaz de distinguir, con <strong>visi\u00f3n por ordenador<\/strong> (una rama de la inteligencia artificial), a la persona de la imagen que la c\u00e1mara capta y recortar su silueta.<\/p>\n<p><a href=\"http:\/\/collection.eliterature.org\/2\/works\/nadeau_still_standing\/ss_960x540.mov\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/collection.eliterature.org\/2\/works\/nadeau_still_standing\/ss_960x540.mov<\/a><\/p>\n<p>Otro ejemplo, muy espectacular y todav\u00eda m\u00e1s sofisticado que la instalaci\u00f3n anterior, es la obra <a href=\"http:\/\/www.lozano-hemmer.com\/videos.php?id=303&amp;type=Projects\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Call on Water<\/em><\/a><a href=\"http:\/\/www.lozano-hemmer.com\/videos.php?id=303&amp;type=Projects\"> (2016)<\/a>, de <strong>Rafael<\/strong> <strong>Lozano-Hemmer<\/strong>. De este artista ya hab\u00edamos hablado en el reto 3, cuando estudi\u00e1bamos el arte interactivo. Nieto de <strong>Octavio Paz<\/strong>, en esta obra le hace un homenaje usando alguno de sus versos en la instalaci\u00f3n.<\/p>\n<p>Se trata de una fuente que escribe palabras suspendidas en el aire mediante \u00abpinceles\u00bb de vapor fr\u00edo, que ascienden desde una base llena de agua. El sistema detecta la presencia del espectador y \u00abescribe\u00bb las palabras de los versos de Paz. Adem\u00e1s, los poemas elegidos hablan de c\u00f3mo la palabra escrita y hablada llega a ser atm\u00f3sfera ella misma, as\u00ed que la propia instalaci\u00f3n y el contenido de los versos est\u00e1n totalmente ligados.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/178620253?title=0&amp;byline=0&amp;portrait=0\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ya hemos visto que con Snap! podemos hacer poes\u00eda experimental, generativa o cin\u00e9tica. Tambi\u00e9n la podemos hacer interactiva, y ahora lo veremos analizando un ejemplo con detalles. El efecto es el de un escenario lleno de letras, repartidas en columnas y filas y que todo el rato van cambiando de vestido (saltando de una letra [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/996"}],"collection":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=996"}],"version-history":[{"count":5,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/996\/revisions"}],"predecessor-version":[{"id":1462,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/996\/revisions\/1462"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}