{"id":919,"date":"2019-08-19T20:00:48","date_gmt":"2019-08-19T18:00:48","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/4-4-4-exemple-creem-moviment-sobre-una-obra-de-georg-nees\/"},"modified":"2019-10-15T16:01:44","modified_gmt":"2019-10-15T14:01:44","slug":"4-4-4-exemple-creem-moviment-sobre-una-obra-de-georg-nees","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/4-4-4-exemple-creem-moviment-sobre-una-obra-de-georg-nees\/","title":{"rendered":"4.4.4. Ejemplo: creemos movimiento sobre una obra de Georg Nees"},"content":{"rendered":"<figure id=\"attachment_248\" aria-describedby=\"caption-attachment-248\" style=\"width: 500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-248\" src=\"\/wp-content\/uploads\/2019\/08\/20.212_92.jpg\" alt=\"\" width=\"500\" height=\"828\" srcset=\"\/wp-content\/uploads\/2019\/08\/20.212_92.jpg 500w, \/wp-content\/uploads\/2019\/08\/20.212_92-181x300.jpg 181w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption id=\"caption-attachment-248\" class=\"wp-caption-text\">Georg Nees. <em>Schotter<\/em> (a\u00f1os sesenta)<\/figcaption><\/figure>\n<p>Ya trabajamos a <strong>George Nees <\/strong>(1926-2016) en el reto 2. Fue uno de los primeros investigadores, te\u00f3ricos y artistas del arte digital. Se le considera un pionero y fue el primero en exponer dibujos generados por ordenador en la Universidad de Stuttgart en febrero de 1965, con piezas de Friedrich Nake y Michael Noll (consultad el apartado sobre <a href=\"http:\/\/arts.recursos.uoc.edu\/programacio-disseny-arts\/es\/4-1-3-primeros-graficos-por-computadora-de-la-experimentacion-a-la-exposicion\/\" target=\"_blank\" rel=\"noopener noreferrer\">arte computacional: 4.1.3. \u00abPrimeros gr\u00e1ficos por computadora: de la experimentaci\u00f3n a la exhibici\u00f3n\u00bb<\/a>).<\/p>\n<p>En este ejemplo trabajaremos a partir de su obra <em>Schotter<\/em> y le daremos vida con Snap! Para hacerlo, nos inspiraremos en el trabajo de<strong> Selim Tezel<\/strong>, que despu\u00e9s de escuchar una conferencia de <strong>Joachim<\/strong> <strong>Wedekind<\/strong> decidi\u00f3 crear una revisi\u00f3n de la<a href=\"https:\/\/scratch.mit.edu\/projects\/169989060\/\" target=\"_blank\" rel=\"noopener noreferrer\"> obra de Nees pero con movimiento<\/a>, como si fuera una cascada de cuadrados continua. Tezel utiliz\u00f3 Scratch como lenguaje de programaci\u00f3n, pero nosotros lo haremos con Snap!<\/p>\n<p>El ejemplo nos servir\u00e1 para explicar qu\u00e9 es un clon y c\u00f3mo los podemos usar cuando programamos con Snap! Aqu\u00ed ten\u00e9is el <a href=\"https:\/\/snap.berkeley.edu\/snapsource\/snap.html#present:Username=uoc_tpi&amp;ProjectName=Selim%20Tezel%20(Homage%20to%20Nees)\" target=\"_blank\" rel=\"noopener noreferrer\">c\u00f3digo del programa<\/a> entero que analizaremos a continuaci\u00f3n. Y este es el efecto final que queremos conseguir:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-250\" src=\"\/wp-content\/uploads\/2019\/08\/20.212_93.gif\" alt=\"\" width=\"468\" height=\"348\" \/><\/p>\n<p>Como veis, en la obra de Nees tenemos numerosos cuadrados. En nuestro programa solo tendremos uno, del cual iremos extrayendo clones. Los personajes de Snap! pueden crear un clon de s\u00ed mismos en cualquier momento del programa, y podemos definir exactamente qu\u00e9 har\u00e1n estos clones cuando sean creados. Hay dos instrucciones b\u00e1sicas para hacerlo: \u00abcrea un clon de m\u00ed mismo\u00bb y \u00abcuando una copia de m\u00ed empiece\u00bb.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1394 size-full\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_94_cast.jpg\" alt=\"\" width=\"650\" height=\"68\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_94_cast.jpg 650w, \/wp-content\/uploads\/2019\/10\/20.212_94_cast-300x31.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>Centr\u00e1ndonos en nuestro ejemplo, necesitamos un personaje que sea un cuadrado (podemos dibujarlo con el Paint de la Snap! o abrir una imagen de un cuadrado). Para empezar, crearemos un nuevo bloque llamado \u00abMakeRow\u00bb, que nos servir\u00e1 para crear una fila de diez clones. Lo haremos as\u00ed:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1398 size-full\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_95_cast.jpg\" alt=\"\" width=\"600\" height=\"466\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_95_cast.jpg 600w, \/wp-content\/uploads\/2019\/10\/20.212_95_cast-300x233.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Una vez hecho esto, podemos construir el programa principal, que consiste en un bucle \u00abpara siempre\u00bb en el que vamos creando filas de clones y volvemos a la posici\u00f3n inicial.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1400\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_96_cast.png\" alt=\"\" width=\"350\" height=\"338\" \/><\/p>\n<p>Y ahora queda programar la parte m\u00e1s importante, que es la que dice a cada clon c\u00f3mo debe comportarse.<\/p>\n<p>Fijaos en el comportamiento de cada cuadrado en la animaci\u00f3n de arriba. Sencillamente se van moviendo hacia abajo hasta que desaparecen a partir de una cierta altura. Y, mientras bajan, primero solo van girando aleatoriamente unos cuantos grados, pero a partir de una altura determinada tambi\u00e9n empiezan a hacer peque\u00f1os desplazamientos aleatorios adem\u00e1s de los giros. Lo podemos hacer con este programa:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1402\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_97_cast.png\" alt=\"\" width=\"600\" height=\"544\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_97_cast.png 340w, \/wp-content\/uploads\/2019\/10\/20.212_97_cast-300x272.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>As\u00ed pues, cada cuadrado repite todas estas instrucciones cuando nace hasta que llega a una posici\u00f3n Y por debajo de \u2013140. Entonces se autoelimina mediante la instrucci\u00f3n \u00abborra este clon\u00bb.<\/p>\n<p>En \u00abrepite\u00bb, en cada iteraci\u00f3n sumamos un valor negativo a la Y para que el cuadrado vaya bajando. Este valor que sumamos a Y lo tenemos guardado en la variable \u00abvelocity\u00bb, la cual vamos incrementando con cada iteraci\u00f3n, para que as\u00ed vaya bajando cada vez m\u00e1s r\u00e1pido. El resto de bloques son peque\u00f1os giros y desplazamientos aleatorios, que se acent\u00faan cuando el cuadrado llega a una posici\u00f3n Y por debajo de 0.<\/p>\n<p>Si ejecutamos el programa con el c\u00f3digo que hemos visto hasta ahora, la salida por pantalla ser\u00eda como la siguiente. Las filas est\u00e1n inclinadas, y este es un efecto que deber\u00edamos corregir. El motivo para que esto pase es que cuando un cuadrado nace no se espera que se haya completado toda la fila para empezar a bajar. Y, por lo tanto, cuanto m\u00e1s a la izquierda m\u00e1s abajo est\u00e1n los cuadrados, porque ha pasado m\u00e1s tiempo desde que han sido creados y han tenido m\u00e1s tiempo para bajar.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-260\" src=\"\/wp-content\/uploads\/2019\/08\/20.212_98.jpg\" alt=\"\" width=\"800\" height=\"508\" srcset=\"\/wp-content\/uploads\/2019\/08\/20.212_98.jpg 800w, \/wp-content\/uploads\/2019\/08\/20.212_98-300x191.jpg 300w, \/wp-content\/uploads\/2019\/08\/20.212_98-768x488.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Podemos corregir este problema a\u00f1adiendo una variable \u00abdown\u00bb, que inicializamos con un \u00abno\u00bb justo antes de crear la fila y actualizamos con un \u00abyes\u00bb nada m\u00e1s acabar la fila. Ahora solo tendremos que a\u00f1adir una instrucci\u00f3n \u00abespera hasta down = yes\u00bb, justo antes del \u00abrepite\u00bb que controla el comportamiento de cada clon. As\u00ed, nos aseguramos de que los cuadrados no se empiezan a mover hasta que hemos acabado de construir la fila entera.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1404\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_99_cast.png\" alt=\"\" width=\"650\" height=\"390\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_99_cast.png 557w, \/wp-content\/uploads\/2019\/10\/20.212_99_cast-300x180.png 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ya trabajamos a George Nees (1926-2016) en el reto 2. Fue uno de los primeros investigadores, te\u00f3ricos y artistas del arte digital. Se le considera un pionero y fue el primero en exponer dibujos generados por ordenador en la Universidad de Stuttgart en febrero de 1965, con piezas de Friedrich Nake y Michael Noll (consultad [&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\/919"}],"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=919"}],"version-history":[{"count":4,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/919\/revisions"}],"predecessor-version":[{"id":1406,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/919\/revisions\/1406"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}