{"id":929,"date":"2019-08-19T20:29:47","date_gmt":"2019-08-19T18:29:47","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/4-5-3-exercici-4-interaccio-moviment-i-musica-amb-snap\/"},"modified":"2021-12-20T02:02:11","modified_gmt":"2021-12-20T00:02:11","slug":"4-5-3-exercici-4-interaccio-moviment-i-musica-amb-snap","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/4-5-3-exercici-4-interaccio-moviment-i-musica-amb-snap\/","title":{"rendered":"4.5.3. Ejercicio 4: interacci\u00f3n, movimiento y m\u00fasica con Snap!"},"content":{"rendered":"<p>Antes de avanzar hacia la computaci\u00f3n f\u00edsica y estudiar el movimiento desde la perspectiva de ED1, hagamos un \u00faltimo ejercicio de Snap! en esta gu\u00eda.<\/p>\n<p>La idea es llevar a cabo un proyecto donde podamos generar movimiento y m\u00fasica con el movimiento del rat\u00f3n. Crearemos un personaje que ser\u00e1 replicado con clones distribuidos por todo el escenario. Cuando movamos el cursor, estos personajes detectar\u00e1n la proximidad y se mover\u00e1n (girando y cambiando de \u00abdisfraz\u00bb) y emitir\u00e1n sonidos.<\/p>\n<p>El primer paso es crear un personaje que tenga unos cuantos vestidos de diferentes medidas (y, si quer\u00e9is, tambi\u00e9n de diferentes colores). Por ejemplo, podr\u00eda ser sencillamente una l\u00ednea que se va acortando con cada disfraz hasta que el \u00faltimo disfraz es un punto.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1408 size-full\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_102_cast.jpg\" alt=\"\" width=\"450\" height=\"942\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_102_cast.jpg 450w, \/wp-content\/uploads\/2019\/10\/20.212_102_cast-143x300.jpg 143w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>A continuaci\u00f3n deberemos crear clones de este personaje y distribuirlos por el escenario (haciendo una cuadr\u00edcula, siguiendo alg\u00fan patr\u00f3n o de manera aleatoria). Como ejemplo, lo haremos en una cuadr\u00edcula, poniendo inicialmente a todos con el disfraz, que es solo un punto.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1410 size-full\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_103_cast.jpg\" alt=\"\" width=\"780\" height=\"434\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_103_cast.jpg 780w, \/wp-content\/uploads\/2019\/10\/20.212_103_cast-300x167.jpg 300w, \/wp-content\/uploads\/2019\/10\/20.212_103_cast-768x427.jpg 768w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/p>\n<p>Ahora hemos de programar lo que pasa cuando cada clon empieza a ejecutarse. Tendremos que indicarle que siempre que detecte el cursor cerca, cambie de disfraz, gire y emita alg\u00fan sonido.<\/p>\n<p>Crearemos un segundo personaje que se llame \u00abcursor\u00bb y cuyo c\u00f3digo sea sencillamente \u00abcuando se coja la bandera verde, ve siempre al puntero del rat\u00f3n\u00bb.<\/p>\n<p>Podemos saber si el clon est\u00e1 cerca del personaje cursor con un poco de matem\u00e1tica muy sencilla. Restamos la posici\u00f3n X del clon a la posici\u00f3n X del cursor, y calculamos el valor absoluto. Hacemos lo mismo para la Y. Si los dos valores son menores que la distancia que decidimos (en el ejemplo, es 15), hacemos que el clon toque una nota al azar y que gire y cambie de vestido varias veces.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1412\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_104_cast.png\" alt=\"\" width=\"700\" height=\"471\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_104_cast.png 465w, \/wp-content\/uploads\/2019\/10\/20.212_104_cast-300x202.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>El efecto final ser\u00e1 similar a este que compartimos con un gif animado. El proyecto real tiene sonido, y pod\u00e9is ver <a href=\"https:\/\/snap.berkeley.edu\/snapsource\/snap.html#present:Username=uoc_tpi&amp;ProjectName=moviment%2C%20interacci%C3%B3%2C%20m%C3%BAsica\" target=\"_blank\" rel=\"noopener noreferrer\">todo el c\u00f3digo aqu\u00ed<\/a>.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1057 size-full\" src=\"\/wp-content\/uploads\/2019\/09\/20.212_05_ok.gif\" alt=\"\" width=\"468\" height=\"348\" \/><\/p>\n<p>El ejercicio que os proponemos es libre, pero os pedimos que contenga:<\/p>\n<ul>\n<li>movimiento de los personajes<\/li>\n<li>interacci\u00f3n con el rat\u00f3n<\/li>\n<li>m\u00fasica o sonidos<\/li>\n<\/ul>\n<p>Pod\u00e9is empezar un proyecto <em>Snap!<\/em> desde cero o abrir este que os hemos explicado, modificarlo y crear vuestra versi\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Antes de avanzar hacia la computaci\u00f3n f\u00edsica y estudiar el movimiento desde la perspectiva de ED1, hagamos un \u00faltimo ejercicio de Snap! en esta gu\u00eda. La idea es llevar a cabo un proyecto donde podamos generar movimiento y m\u00fasica con el movimiento del rat\u00f3n. Crearemos un personaje que ser\u00e1 replicado con clones distribuidos por todo [&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\/929"}],"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=929"}],"version-history":[{"count":5,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/929\/revisions"}],"predecessor-version":[{"id":2633,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/929\/revisions\/2633"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}