{"id":436,"date":"2022-10-06T11:57:44","date_gmt":"2022-10-06T09:57:44","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=436"},"modified":"2022-10-07T13:24:45","modified_gmt":"2022-10-07T11:24:45","slug":"8-3-imagenes","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/8-3-imagenes\/","title":{"rendered":"8.3. Im\u00e1genes"},"content":{"rendered":"

Una vez que ya sabemos c\u00f3mo lidiar con archivos externos en P5, trabajar con im\u00e1genes nos resultar\u00e1 muy sencillo. Al igual que suced\u00eda con las tipograf\u00edas externas, podemos enlazar en nuestro sketch<\/em> im\u00e1genes que tengamos en nuestro propio sistema.<\/p>\n

Para cargar im\u00e1genes desde nuestro propio sistema, debemos seguir el mismo proceso que al cargar fuentes. P5 acepta distintos formatos, entre los que encontramos los habituales JPG, PNG, GIF e incluso SVG. En el caso de las im\u00e1genes en PNG, GIF o SVG tambi\u00e9n podremos usar im\u00e1genes que tengan transparencia.<\/p>\n

Lo primero que debemos hacer es obtener la URL de la imagen que queramos utilizar de la misma manera que lo hicimos con la tipograf\u00eda. Una vez que la tengamos, la usaremos dentro del m\u00e9todo loadImage()<\/span> para cargarla en nuestro sketch<\/em> y posteriormente utilizaremos image()<\/span> para dibujarla en el canvas<\/em>. Con las im\u00e1genes nos enfrentamos al mismo problema que con las tipograf\u00edas o con cualquier otro archivo externo: al tener que ser descargadas por el navegador, debemos poner el c\u00f3digo que las descarga dentro de la funci\u00f3n preload()<\/span> para que el programa no se ejecute hasta que la imagen se haya descargado por completo.<\/p>\n

let img;\r\n\r\nfunction preload() {\r\n  img = loadImage(\"\/filemanager\/source_repo\/ccasadom\/croissant.jpg\");\r\n}\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n  background(200);\r\n  image(img, 0, 0);\r\n}<\/pre>\n
Los par\u00e1metros que le pasamos a image()<\/span> son, en primer lugar, la imagen que hayamos cargado con loadImage()<\/span> y, a continuaci\u00f3n, las coordenadas x<\/em> e y<\/em> donde queramos dibujar la imagen. Esta coordenada ser\u00e1 la esquina superior izquierda de la imagen. Por defecto, el tama\u00f1o de la imagen ser\u00e1 su tama\u00f1o original.<\/p>\n
Si queremos redimensionar la imagen, podemos hacerlo a\u00f1adiendo otros dos par\u00e1metros para establecer el ancho y el alto con el que queremos que se muestre la imagen. Debemos tener en cuenta que de esta manera podemos alterar la ratio de aspecto de la imagen, estrech\u00e1ndola o alarg\u00e1ndola. Para evitar esto, podemos hacer uso de las propiedades width<\/span> y height<\/span>, que podemos extraer de cualquier imagen para conocer su anchura y altura y luego multiplicar estos valores por un \u00fanico valor para asegurarnos de que mantenemos sus proporciones originales.<\/p>\n
\"\"
Figura 107. Redimensionando una imagen manteniendo sus proporciones
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
\"\"
Figura 108. Cargando una imagen transparente desde nuestro sistema
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Atributos de las im\u00e1genes<\/h3>\n
Para cambiar el modo como se muestran las im\u00e1genes, podemos utilizar varios atributos. Podemos, como tambi\u00e9n puede hacerse con c\u00edrculos, arcos y rect\u00e1ngulos, cambiar el punto desde el que dibujamos la imagen usando imageMode()<\/span>, que acepta los par\u00e1metros CORNER<\/span> (el modo por defecto), CORNERS<\/span> y CENTER<\/span>.<\/p>\n
Tambi\u00e9n podemos cambiar el \u00abtinte\u00bb de la imagen con el m\u00e9todo tint()<\/span>, al que le pasamos como par\u00e1metro el color con el que queremos tintar la imagen. Este color puede tener transparencia, por lo que si queremos que nuestra imagen tenga transparencia, podemos usar un tint()<\/span> con blanco y el alpha<\/em> que queramos. Para volver a los valores por defecto, podemos utilizar noTint()<\/span>.<\/p>\n
\"\"
Figura 109. Usando diferentes valores de tint()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Filtros<\/h3>\n
P5 tambi\u00e9n nos ofrece una serie de filtros que podemos aplicar a nuestro canvas<\/em> mediante el m\u00e9todo filter()<\/span>, que acepta como primer par\u00e1metro el filtro que queremos aplicar y en funci\u00f3n de cu\u00e1l elijamos podremos a\u00f1adir un segundo par\u00e1metro para controlar el efecto. Las opciones de filtros que tenemos son: THRESHOLD<\/span>, GRAY<\/span>, OPAQUE<\/span>, INVERT<\/span>, POSTERIZE<\/span>, BLUR<\/span>, ERODE<\/span> y DILATE<\/span>. En la referencia de filter()<\/span><\/a> se puede encontrar qu\u00e9 hace cada uno de los filtros y si tiene un par\u00e1metro opcional para controlarlo. Algunos de estos filtros suponen una considerable carga de computaci\u00f3n para ejecutarse en tiempo real, por lo que es aconsejable que los usemos con moderaci\u00f3n. En muchas ocasiones, podremos procesar la imagen en alg\u00fan software de retoque fotogr\u00e1fico antes de subirla a nuestro sketch<\/em> para alcanzar el resultado deseado. Tambi\u00e9n debemos tener en cuenta que estos filtros se aplican a todo el canvas<\/em>, no solo a la imagen en s\u00ed.<\/p>\n
\"\"
Figura 110. Usando filter()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Modos de fusi\u00f3n<\/h3>\n
En P5 tambi\u00e9n encontramos diferentes modos de fusi\u00f3n para nuestro canvas<\/em>, que funcionan de manera muy similar a los modos de fusi\u00f3n que podemos aplicar a las capas de softwares como Photoshop o Gimp. Para cambiar el modo de fusi\u00f3n utilizaremos el m\u00e9todo blendMode()<\/span>, que acepta como par\u00e1metro las siguientes opciones: BLEND<\/span> (por defecto), ADD<\/span>, DARKEST<\/span>, LIGHTEST<\/span>, DIFFERENCE<\/span>, EXCLUSION<\/span>, MULTIPLY<\/span>, SCREEN<\/span>, REPLACE<\/span>, REMOVE<\/span>, OVERLAY<\/span>, HARD_LIGHT<\/span>, SOFT_LIGHT<\/span>, DODGE<\/span>, BURN<\/span> y SUBTRACT<\/span>. Todos funcionan de la misma manera que sus hom\u00f3nimos en otros softwares. Del mismo modo que los filtros, se aplican a todo el canvas<\/em>.<\/p>\n
\"\"
Figura 111. Cambiando el modo de fusi\u00f3n
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Informaci\u00f3n de color<\/h3>\n
Las im\u00e1genes que cargamos en nuestros sketches<\/em> pueden servirnos para otros prop\u00f3sitos distintos al de simplemente dibujarlas en nuestro canvas<\/em>. Tambi\u00e9n nos pueden servir para extraer su informaci\u00f3n de color y utilizarla de manera creativa. El m\u00e9todo get()<\/span> aplicado a cualquier imagen nos permite establecer qu\u00e9 color tiene la imagen en las coordenadas (x<\/em>, y<\/em>) que le pasemos como par\u00e1metro.<\/p>\n
\"\"
Figura 112. Extrayendo informaci\u00f3n de color con get()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En la figura 112 cargamos una imagen y en el draw()<\/span> utilizamos get()<\/span> para extraer la informaci\u00f3n de color de esta en la posici\u00f3n actual del rat\u00f3n, con el fin de utilizarla como relleno de un c\u00edrculo que dibujamos en el centro de la pantalla.<\/p>\n
No es necesario que dibujemos la imagen, con cargarla en el sketch<\/em> es suficiente. Veamos un par de ejemplos en los que hacemos uso de esta informaci\u00f3n de manera creativa incorporando conceptos que ya hemos visto anteriormente en la asignatura: bucles for<\/span>, aleatoriedad e interacci\u00f3n.<\/p>\n
Utilizando bucles podr\u00edamos crear nuestro propio efecto para \u00abpixelar\u00bb una imagen. Primero, deberemos crear un par de bucles anidados que recorran el canvas<\/em> en horizontal y vertical. A continuaci\u00f3n, en cada paso del bucle extraemos la informaci\u00f3n de color del punto concreto en el que nos encontremos y, por \u00faltimo, utilizamos esta informaci\u00f3n de color para dibujar un cuadrado relleno del color presente en esa coordenada.<\/p>\n
\"\"
Figura 113. \u00abPixelando\u00bb una imagen
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En el ejemplo de la figura 113 tambi\u00e9n se ha a\u00f1adido un elemento interactivo: el desplazamiento en x<\/em> e y<\/em> en cada paso del bucle y el tama\u00f1o del cuadrado que dibujamos viene determinado por la posici\u00f3n en el eje x<\/em> del rat\u00f3n. De esta manera, creamos un efecto interactivo en el que los p\u00edxeles ser\u00e1n mayores o menores seg\u00fan la posici\u00f3n de nuestro rat\u00f3n.<\/p>\n
Veamos otro ejemplo del uso de la informaci\u00f3n de color, pero esta vez usando aleatoriedad.<\/p>\n
\"\"
Figura 114. Efecto puntillista
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En este ejemplo hemos cargado una imagen y en cada frame<\/em> estamos eligiendo un punto al azar de la imagen para extraer la informaci\u00f3n de color y dibujar un c\u00edrculo en esa posici\u00f3n con el fin de crear un efecto puntillista. Para darle mayor organicidad al proceso de dibujado, se ha establecido un tama\u00f1o aleatorio de cada c\u00edrculo. Seg\u00fan vaya pasando el tiempo y se vayan acumulando los c\u00edrculos, la imagen se ir\u00e1 conformando.<\/p>\n
Siguiendo en la l\u00ednea del efecto puntillista, podr\u00edamos crear un \u00abpincel\u00bb que nos permitiera ir revelando la imagen seg\u00fan el movimiento del rat\u00f3n:<\/p>\n
\"\"
Figura 115. Pincel aleatorio
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En esta ocasi\u00f3n lo que hacemos es que en cada frame<\/em> creamos, a trav\u00e9s de un bucle for<\/span>, cinco c\u00edrculos en posiciones aleatorias cercanas a la posici\u00f3n de nuestro rat\u00f3n (utilizando mouseX<\/span> y mouseY<\/span> a los que sumamos un valor aleatorio que en este caso tiene un rango que va de \u201320 a 20). A continuaci\u00f3n, extraemos la informaci\u00f3n de color de esos cinco puntos y dibujamos c\u00edrculos de tama\u00f1os aleatorios en esas coordenadas.<\/p>\n","protected":false},"excerpt":{"rendered":"
Una vez que ya sabemos c\u00f3mo lidiar con archivos externos en P5, trabajar con im\u00e1genes nos resultar\u00e1 muy sencillo. Al igual que suced\u00eda con las tipograf\u00edas externas, podemos enlazar en nuestro sketch im\u00e1genes que tengamos en nuestro propio sistema. Para cargar im\u00e1genes desde nuestro propio sistema, debemos seguir el mismo proceso que al cargar fuentes. […]<\/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-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/436"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=436"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/436\/revisions"}],"predecessor-version":[{"id":567,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/436\/revisions\/567"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}