{"id":1272,"date":"2019-07-08T13:48:17","date_gmt":"2019-07-08T11:48:17","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1272"},"modified":"2019-08-17T01:55:46","modified_gmt":"2019-08-16T23:55:46","slug":"1-5-cambiar-el-color","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/1-5-cambiar-el-color\/","title":{"rendered":"1.5. Cambiar el color"},"content":{"rendered":"

Tenemos dos funciones que nos permiten dar color a nuestras figuras. La funci\u00f3n fill()<\/span> determina el color de la parte interior de la figura. La funci\u00f3n stroke()<\/span>, el color del borde.<\/p>\n

Si solo ponemos un n\u00famero, se entender\u00e1 que es un color entre blanco y negro. El 0 corresponde al color negro y el 255 al blanco. El resto de colores son diferentes tonalidades de gris. Cualquier n\u00famero m\u00e1s grande que 255 se tratar\u00e1 como si fuera 255, y cualquier n\u00famero menor que 0 se tratar\u00e1 como 0.<\/p>\n

Probad el ejemplo 3-14 del libro cambiando no solo el color del fondo, sino tambi\u00e9n el de los bordes de los c\u00edrculos.<\/p>\n<\/div>\n

Colores<\/h2>\n

Podemos determinar los colores con los que pintamos nuestras figuras de varias maneras. La m\u00e1s habitual ser\u00e1 usando el modelo RGB (Red<\/em>, Green<\/em>, Blue<\/em>). Siguiendo este modelo, para cada uno de los colores, 0 ser\u00e1 apagado y 255 totalmente encendido. Podemos jugar con cualquier valor intermedio para conseguir colores m\u00e1s oscuros o m\u00e1s claros.<\/p>\n

Vamos a dibujar 4 c\u00edrculos con 4 tonalidades diferentes de azul:<\/p>\n

function setup<\/span>() {\r\n  createCanvas<\/span>(480, 120);\r\n  background<\/span>(255);\r\n  noStroke<\/span>();\r\n}\r\n\r\nfunction draw() {\r\n  fill<\/span>(0,0,0);\r\n  ellipse<\/span>(90, 60, 80, 80);\r\n  fill<\/span>(0,0,80);\r\n  ellipse<\/span>(180, 60, 80, 80);\r\n  fill<\/span>(0,0,160);\r\n  ellipse<\/span>(270, 60, 80, 80);\r\n  fill<\/span>(0,0,255);\r\n  ellipse<\/span>(360, 60, 80, 80);\r\n}<\/pre>\n
El resultado de ejecutar este c\u00f3digo es:<\/p>\n
\"\"<\/p>\n
Probad a hacer lo mismo con los colores verde y rojo.<\/p>\n<\/div>\n
En la entrada del manual de referencia correspondiente a la funci\u00f3n fill()<\/span><\/a> hay una explicaci\u00f3n de las diferentes maneras de determinar el color.<\/p>\n
Transparencia<\/h2>\n
Podemos hacer que nuestras figuras tengan transparencia, a\u00f1adiendo un par\u00e1metro m\u00e1s a las instrucciones fill()<\/span> y stroke()<\/span>. Este par\u00e1metro extra (al que se suele llamar alfa<\/em>) indica la transparencia del objeto (o de su borde).<\/p>\n","protected":false},"excerpt":{"rendered":"
Tenemos dos funciones que nos permiten dar color a nuestras figuras. La funci\u00f3n fill() determina el color de la parte interior de la figura. La funci\u00f3n stroke(), el color del borde. Si solo ponemos un n\u00famero, se entender\u00e1 que es un color entre blanco y negro. El 0 corresponde al color negro y el 255 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1272"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":10,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1272\/revisions"}],"predecessor-version":[{"id":3640,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1272\/revisions\/3640"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}