![\"\"](\"\/wp-content\/uploads\/2021\/09\/banner.jpg\")
<\/p>\n<\/p>\n
En este ejercicio proponemos programar mosaicos generativos y a\u00f1adir algo de interactividad. Empezaremos dibuj\u00e1ndolos, luego a\u00f1adiremos la posibilidad de interactuar con el rat\u00f3n, y finalmente exploraremos la idea de hacer dise\u00f1os creados fuera de Snap! (a partir de fotograf\u00edas, dibujos, etc.).<\/p>\n
Podemos empezar imaginando un mosaico con baldosas cuadradas, cada una de un color diferente. Pensando ya en la interactividad, en vez de trabajar con un \u00fanico personaje que dibuje todos los cuadrados y los pinte, trabajaremos con clones. En el ejemplo compartido (todo el c\u00f3digo aqu\u00ed<\/a>), tenemos un escenario de 600 x 600 p\u00edxeles, y el mosaico tiene seis filas y seis columnas. As\u00ed pues, las filas y columnas tienen tama\u00f1o 100. Usaremos un doble bucle para crear clones de nuestro personaje y situarlos en el v\u00e9rtice superior izquierdo de cada una de las baldosas.<\/p>\n A partir de ah\u00ed, habr\u00e1 que programar qu\u00e9 sucede cuando cada clon empieza a ejecutarse. En nuestro ejemplo vamos a hacer que cada clon dibuje un cuadrado (la baldosa) de 100 x 100. Estableceremos el color de manera aleatoria, jugando con los valores de tonalidad, saturaci\u00f3n y brillo. Una vez dibujado el cuadrado, habr\u00e1 que pintarlo del mismo color. Lo podemos hacer con la instrucci\u00f3n \u00abrellena\u00bb. Esto significa que primero tendremos que colocar el clon dentro del cuadrado, ya que cuando lo termina de dibujar vuelve a estar en el punto inicial (sobre la l\u00ednea) y, por lo tanto, la instrucci\u00f3n rellanar<\/em> no funcionar\u00eda. En el ejemplo, subamos el l\u00e1piz y mov\u00e1monos 50 puntos hacia la derecha y 50 puntos hacia abajo (as\u00ed estaremos en el centro). Es importante recordar subir el l\u00e1piz, porque de lo contrario, aunque nos movamos hacia el interior del cuadrado, seguiremos estando sobre la l\u00ednea que dibujamos y rellenar no funcionar\u00e1.<\/p>\n Cada vez que hagamos clic en la bandera verde, el mosaico ser\u00e1 diferente, pero los colores ser\u00e1n similares debido a los umbrales que se han utilizado al elegir la tonalidad, la saturaci\u00f3n y el brillo.<\/p>\n Ahora podemos seguir dibujando un c\u00edrculo de di\u00e1metro 100 dentro de cada una de las baldosas del mosaico. Cada clon ya est\u00e1 ubicado en el centro del cuadrado, por lo que hacer los c\u00edrculos es muy sencillo, solo tenemos que continuar el c\u00f3digo haciendo que vuelva a fijar un color aleatorio, y que baje y suba el l\u00e1piz (habiendo establecido el tama\u00f1o del l\u00e1piz en 100). De hecho, con Snap!, cuando queremos hacer un punto, sea del tama\u00f1o que sea, no basta con bajar y subir el l\u00e1piz. Una vez bajado, tenemos que hacer un peque\u00f1o movimiento. Por esto, en el ejemplo, se aumenta la X en 0,01 y disminuye nuevamente de inmediato.<\/p>\n Hasta ahora, lo que hemos hecho es dibujar un mosaico con cuadrados y c\u00edrculos, con colores aleatorios pero de una gama crom\u00e1tica cercana. Ahora, a\u00f1adiremos interactividad. La idea es que cuando pasemos el rat\u00f3n sobre el mosaico, este cambie. En concreto, haremos que cuando el rat\u00f3n est\u00e9 sobre una baldosa, esta dibuje un nuevo c\u00edrculo, de tama\u00f1o y colores aleatorios, pero m\u00e1s peque\u00f1o que el primer c\u00edrculo que ha pintado.<\/p>\n Lo har\u00e1 con un bucle para siempre, un condicional y un bloque del men\u00fa sensores: \u00abdistancia a puntero del rat\u00f3n\u00bb. Dado que los clones todav\u00eda est\u00e1n en el centro de cada baldosa, para detectar si el rat\u00f3n est\u00e1 en la baldosa, tendremos que controlar cu\u00e1ndo la distancia entre el clon y el rat\u00f3n es inferior a 50.<\/p>\n Despu\u00e9s, sencillamente volvemos a fijar un nuevo clon aleatorio, y volvemos a pintar un c\u00edrculo, dando al l\u00e1piz un tama\u00f1o aleatorio menor de 100.<\/p>\n Proponemos que, con esta idea, construyamos nuestro propio mosaico, cambiando el tama\u00f1o, las formas, los colores y jugando con otras maneras de hacerlo interactivo. Por ejemplo, podr\u00edamos pensar en c\u00f3mo combinar el mosaico con m\u00fasica.<\/p>\n Un tema que tambi\u00e9n podemos explorar es usar im\u00e1genes propias para hacer las baldosas. Es decir, en lugar de dibujar las formas con Snap!, podemos trabajar con una foto o dibujo que hayamos hecho, cort\u00e1ndolo en im\u00e1genes m\u00e1s peque\u00f1as (con un editor gr\u00e1fico) y luego abriendo cada imagen como un personaje dentro de Snap!, coloc\u00e1ndolos en forma de cuadr\u00edcula. Cada personaje podr\u00eda tener diferentes \u00abvestidos\u00bb o podr\u00edamos modificar su color o transparencia jugando con los efectos del men\u00fa de \u00abapariencia\u00bb. A continuaci\u00f3n tenemos un ejemplo de Genoma po\u00e9tico.<\/em><\/p>\n En este ejercicio proponemos programar mosaicos generativos y a\u00f1adir algo de interactividad. Empezaremos dibuj\u00e1ndolos, luego a\u00f1adiremos la posibilidad de interactuar con el rat\u00f3n, y finalmente exploraremos la idea de hacer dise\u00f1os creados fuera de Snap! (a partir de fotograf\u00edas, dibujos, etc.). Podemos empezar imaginando un mosaico con baldosas cuadradas, cada una de un color diferente. […]<\/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\/2301"}],"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=2301"}],"version-history":[{"count":4,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2301\/revisions"}],"predecessor-version":[{"id":2610,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2301\/revisions\/2610"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=2301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"\/wp-content\/uploads\/2021\/10\/Script01_es.png\")
<\/p>\n![\"\"](\"\/wp-content\/uploads\/2021\/10\/Script02_es.png\")
![\"\"](\"\/wp-content\/uploads\/2021\/09\/quadrats1-300x300.png\")
<\/p>\n![\"\"](\"\/wp-content\/uploads\/2021\/10\/Script03_es.png\")
![\"\"](\"\/wp-content\/uploads\/2021\/09\/quadrats-i-cercles-300x300.png\")
<\/p>\n![\"\"](\"\/wp-content\/uploads\/2021\/10\/Script04_es.png\")
<\/p>\n![\"\"](\"\/wp-content\/uploads\/2021\/09\/mosaic02.gif\")
<\/a>C\u00f3digo enter<\/a>o<\/u><\/p>\n![\"\"](\"\/wp-content\/uploads\/2021\/09\/puzzle.gif\")
<\/a>