{"id":2317,"date":"2021-10-15T09:54:00","date_gmt":"2021-10-15T07:54:00","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/?page_id=2317"},"modified":"2021-12-20T02:06:51","modified_gmt":"2021-12-20T00:06:51","slug":"4-5-4-ejercicio-5-dibujando-y-pintando-a-partir-de-fotografias","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/4-5-4-ejercicio-5-dibujando-y-pintando-a-partir-de-fotografias\/","title":{"rendered":"4.5.4. Ejercicio 5: dibujando y pintando a partir de fotograf\u00edas"},"content":{"rendered":"

\"\"\"\"<\/p>\n

Proponemos abrir fotograf\u00edas dentro de Snap! y crear obras aprovechando las herramientas que permiten detectar el color de los p\u00edxeles. Podemos tener un personaje (o m\u00e1s de uno) que se coloque en diferentes puntos de la fotograf\u00eda, y que dependiendo del color del punto que est\u00e9 tocando, dibuje una forma u otra, o la misma forma pero de diferentes tama\u00f1os, o diferentes colores, etc.<\/p>\n

Para detectar el color de un determinado punto, tenemos que usar esta instrucci\u00f3n del men\u00fa \u00abSensores\u00bb:<\/p>\n

\"\"<\/p>\n

Fij\u00e9monos en que podemos obtener el color en formato RGBA o, alternativamente, podemos obtener la tonalidad, la saturaci\u00f3n y el brillo (as\u00ed como la transparencia). La opci\u00f3n \u00aben m\u00ed mismo\u00bb significa que detecta el color del punto en el que se encuentra el mismo personaje. Si est\u00e1 encima de otro personaje, detectar\u00e1 el color de ese personaje. Si est\u00e1 en el escenario, detectar\u00e1 el color del escenario. Otra posibilidad es utilizar \u00aben puntero de rat\u00f3n\u00bb, una opci\u00f3n con la que detectaremos el color del punto que se\u00f1ala al rat\u00f3n en ese momento.<\/p>\n

Para poder dibujar sobre el escenario con el color que hemos detectado, deberemos usar la instrucci\u00f3n \u00abfija X del l\u00e1piz\u00bb, donde X es la tonalidad, saturaci\u00f3n, brillo y transparencia. No podemos fijar el color del l\u00e1piz mediante un valor RGBA. Por lo tanto, deberemos detectar la tonalidad, la saturaci\u00f3n y el brillo del punto en cuesti\u00f3n, y luego fijar estos tres valores en el l\u00e1piz.<\/p>\n

Por ejemplo, as\u00ed es como lo har\u00edamos para fijar la tonalidad del l\u00e1piz detectando la tonalidad del punto en el que se encuentra el personaje:<\/p>\n

\"\"<\/p>\n

A partir de ah\u00ed se trata de explorar las posibilidades. Podemos empezar abriendo una foto como un escenario dentro de Snap!. En nuestro ejemplo estamos usando un retrato fotogr\u00e1fico de Walt Whitman. Y ahora podemos hacer un programa que recorra la imagen de izquierda a derecha y de arriba a abajo (imaginando una cuadr\u00edcula con filas y columnas), detecte el color de los puntos sobre los que se coloca, y dibuje un peque\u00f1o c\u00edrculo de ese color en ese mismo punto. Al finalizar el programa, podemos ocultar el escenario para ver mejor el resultado de lo que hemos dibujado.<\/p>\n

En el ejemplo hemos hecho un escenario de 800 x 800 p\u00edxeles, y dibujamos c\u00edrculos de di\u00e1metro 20. As\u00ed que en cada fila nos movemos 40 veces avanzando 20 puntos. Y lo mismo para las columnas. Es por eso que tenemos un doble bucle de \u00abRepite 40\u00bb. Para dibujar c\u00edrculos de di\u00e1metro 20, simplemente tenemos que bajar y levantar el l\u00e1piz con tama\u00f1o 20. Dado que nuestra imagen est\u00e1 en escala de grises, solo debemos tener en cuenta el brillo. En este caso, la tonalidad, la saturaci\u00f3n y la transparencia no importan (las fijaremos en 0).<\/p>\n

\"\"<\/p>\n

C\u00f3digo del programa<\/a><\/p>\n

\"\"\"\"<\/p>\n

\u00bfQu\u00e9 pasar\u00eda si en lugar de una cuadr\u00edcula, salt\u00e1semos a puntos aleatorios en el escenario? Podemos explorar simplificando el programa anterior. Cambiemos los dos bucles por uno, donde repitamos tantas veces como queramos (en el ejemplo, 10.000) las siguientes instrucciones: ve a un punto aleatorio y dibuja un c\u00edrculo con el brillo detectado en ese punto.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/a>
C\u00f3digo del programa<\/a><\/figcaption><\/figure>\n

Si capturamos en v\u00eddeo el proceso de dibujo (o creamos un GIF animado, como el que se muestra aqu\u00ed), podremos crear efectos muy interesantes. Debemos tener en cuenta que, en el ejemplo, llega un punto en el que la imagen se empieza a desdibujar, puesto que el personaje ha dibujado tantos c\u00edrculos, que la mayor\u00eda de las veces ya no detecta el color original de la imagen del escenario, sino el color de los mismos c\u00edrculos que ha dibujado, y esto va a\u00f1adiendo ruido a la imagen final.<\/p>\n

Proponemos jugar con estas ideas y crear un proyecto a partir de ellas. Podr\u00edamos a\u00f1adir interactividad y hacer que aparezcan c\u00edrculos donde vaya el rat\u00f3n, o podr\u00edamos dibujar otras formas en vez de c\u00edrculos, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"

Proponemos abrir fotograf\u00edas dentro de Snap! y crear obras aprovechando las herramientas que permiten detectar el color de los p\u00edxeles. Podemos tener un personaje (o m\u00e1s de uno) que se coloque en diferentes puntos de la fotograf\u00eda, y que dependiendo del color del punto que est\u00e9 tocando, dibuje una forma u otra, o la misma […]<\/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\/2317"}],"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=2317"}],"version-history":[{"count":5,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2317\/revisions"}],"predecessor-version":[{"id":2635,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2317\/revisions\/2635"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=2317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}