{"id":360,"date":"2022-10-04T14:10:02","date_gmt":"2022-10-04T12:10:02","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=360"},"modified":"2022-10-04T14:10:02","modified_gmt":"2022-10-04T12:10:02","slug":"2-9-color","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/2-9-color\/","title":{"rendered":"2.9. Color"},"content":{"rendered":"

Hasta ahora, todas las formas que hemos dibujado tienen un relleno de color blanco y un trazo negro. En P5 podemos cambiar los colores tanto del relleno como del trazo usando los m\u00e9todos fill()<\/span> y stroke()<\/span>. Disponemos de m\u00faltiples maneras para especificar los colores y usaremos una u otra dependiendo de nuestras necesidades.<\/p>\n

Escala de grises<\/h3>\n

Para definir un color en escala de grises, establecemos su valor dentro de fill()<\/span> o stroke()<\/span> con un n\u00famero entre 0 y 255. El 0 equivale a negro y el 255 a blanco; todos los valores intermedios son los grises que podemos conseguir (un total de 256 valores, lo que equivale a un modo de color de 8 bits 28<\/sup> = 256).<\/p>\n

En los anteriores ejemplos ya hemos visto un caso en el que hemos utilizado este modo de color. El m\u00e9todo background()<\/span> espera dentro de sus par\u00e9ntesis un valor para pintar el fondo de nuestro sketch<\/em>. En los ejemplos hemos usado un valor de background(200)<\/span>, un gris claro.<\/p>\n

\"\"
Figura 23. Escala de grises
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Color RGB<\/h3>\n

Si en lugar de pasar un \u00fanico valor a fill()<\/span> o stroke()<\/span> le pasamos tres, estaremos consiguiendo colores en modo RGB. El primer valor ser\u00e1 la cantidad de rojo (R), el segundo la cantidad de verde (G) y el tercero la cantidad de azul (B). Estos valores tambi\u00e9n van de 0 a 255.<\/p>\n

\"\"
Figura 24. Color RGB
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Adem\u00e1s del modo de color RGB, P5 nos ofrece otros modos de definir los colores en nuestros sketches<\/em>. Visitad la referencia<\/a> de colorMode()<\/span>\u00a0para aprender, por ejemplo, a utilizar el modo HSB (tono, saturaci\u00f3n, brillo).<\/p>\n

Transparencia<\/h3>\n

P5 tambi\u00e9n nos permite aplicar transparencia a nuestros colores; si agregamos un par\u00e1metro adicional tanto a fill()<\/span> como a stroke()<\/span>, estaremos definiendo el nivel de transparencia del color que estemos utilizando. El valor de transparencia tambi\u00e9n es de 8 bits, por lo que podremos introducir valores de 0 a 255, donde 0 es completamente transparente y 255, completamente opaco.<\/p>\n

Tened en cuenta que al ejecutarse el draw()<\/span> de manera indefinida, si utilizamos un color con transparencia, esta se ir\u00e1 acumulando al dibujarse encima de s\u00ed misma continuamente. Para evitarlo, podemos poner el dibujo de nuestro background()<\/span> al principio del draw()<\/span> en lugar de en el setup()<\/span>. De esta manera, en cada bucle del draw()<\/span> estaremos \u00ablimpiando\u00bb el fondo y evitando que la transparencia de los colores se acumule.<\/p>\n

\"\"
Figura 25. Transparencia
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

Hasta ahora, todas las formas que hemos dibujado tienen un relleno de color blanco y un trazo negro. En P5 podemos cambiar los colores tanto del relleno como del trazo usando los m\u00e9todos y . Disponemos de m\u00faltiples maneras para especificar los colores y usaremos una u otra dependiendo de nuestras necesidades. Escala de grises […]<\/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\/360"}],"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=360"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/360\/revisions"}],"predecessor-version":[{"id":361,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/360\/revisions\/361"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}