{"id":107,"date":"2019-06-27T12:31:03","date_gmt":"2019-06-27T10:31:03","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=107"},"modified":"2019-08-17T01:55:08","modified_gmt":"2019-08-16T23:55:08","slug":"1-5-canviar-el-color","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/1-5-canviar-el-color\/","title":{"rendered":"1.5. Canviar el color"},"content":{"rendered":"<p>Tenim dues funcions que ens permeten acolorir les nostres figures. La funci\u00f3 <span style=\"font-family: Courier, Arial;\">fill()<\/span> determina el color de la part interior de la figura i la funci\u00f3 <span style=\"font-family: Courier, Arial;\">stroke()<\/span> el color de la vora.<\/p>\n<p>Si nom\u00e9s posem un nombre, s\u2019entendr\u00e0 que \u00e9s un color entre blanc i negre. El 0 correspon al color negre i el 255 al blanc. Tota la resta de colors s\u00f3n diferents tonalitats de gris. Qualsevol nombre m\u00e9s gran que 255 es tractar\u00e0 com si fos 255 i qualsevol nombre menor que 0 es tractar\u00e0 com a 0.<\/p>\n<div class=\"featured featured-blue\"><p>Proveu l\u2019exemple 3-14 del llibre canviant no solament el color del fons, sin\u00f3 tamb\u00e9 el de les vores dels cercles.<\/p>\n<\/div>\n<h2>Colors<\/h2>\n<p>Podem determinar els colors amb qu\u00e8 pintem les nostres figures de diverses maneres. La m\u00e9s habitual ser\u00e0 fent servir el model RGB (<em>Red<\/em>, <em>Green<\/em>, <em>Blue<\/em>). Seguint aquest model, per a cadascun dels colors, 0 ser\u00e0 apagat i 255 totalment llumin\u00f3s. Podem jugar amb qualsevol valor intermedi per a aconseguir colors m\u00e9s foscos o m\u00e9s clars.<\/p>\n<p>Dibuixem quatre cercles amb quatre tonalitats diferents de blau:<\/p>\n<pre>function <span style=\"color: #4a86e8; font-weight: bold;\">setup<\/span>() {\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">createCanvas<\/span>(480, 120);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">background<\/span>(255);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">noStroke<\/span>();\r\n}\r\n\r\nfunction draw() {\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">fill<\/span>(0,0,0);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">ellipse<\/span>(90, 60, 80, 80);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">fill<\/span>(0,0,80);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">ellipse<\/span>(180, 60, 80, 80);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">fill<\/span>(0,0,160);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">ellipse<\/span>(270, 60, 80, 80);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">fill<\/span>(0,0,255);\r\n  <span style=\"color: #4a86e8; font-weight: bold;\">ellipse<\/span>(360, 60, 80, 80);\r\n}<\/pre>\n<p>El resultat d\u2019executar aquest codi \u00e9s:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-150 size-full\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_009-1.jpg\" alt=\"\" width=\"395\" height=\"133\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_009-1.jpg 395w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_009-1-300x101.jpg 300w\" sizes=\"(max-width: 395px) 100vw, 395px\" \/><\/p>\n<div class=\"featured featured-blue\"><p>Proveu de fer el mateix amb els colors verd i vermell.<\/p>\n<\/div>\n<p>A l\u2019entrada del manual de refer\u00e8ncia corresponent a la funci\u00f3 <a href=\"https:\/\/p5js.org\/es\/reference\/#\/p5\/fill\" target=\"_blank\" rel=\"noopener\"><span style=\"font-family: Courier, Arial;\">fill()<\/span><\/a> hi ha una explicaci\u00f3 de les diferents maneres de determinar el color.<\/p>\n<h2>Transpar\u00e8ncia<\/h2>\n<p>Podem fer que les nostres figures tinguin transpar\u00e8ncia, afegint un par\u00e0metre m\u00e9s a les instruccions <span style=\"font-family: Courier, Arial;\">fill()<\/span> i <span style=\"font-family: Courier, Arial;\">stroke()<\/span>. Aquest par\u00e0metre extra (a qu\u00e8 s\u2019acostuma a anomenar <em>alfa<\/em>) indica la transpar\u00e8ncia de l\u2019objecte (o de la seva vora).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tenim dues funcions que ens permeten acolorir les nostres figures. La funci\u00f3 fill() determina el color de la part interior de la figura i la funci\u00f3 stroke() el color de la vora. Si nom\u00e9s posem un nombre, s\u2019entendr\u00e0 que \u00e9s un color entre blanc i negre. El 0 correspon al color negre i el 255 [&hellip;]<\/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\/wp-json\/wp\/v2\/pages\/107"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":9,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/107\/revisions"}],"predecessor-version":[{"id":3639,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/107\/revisions\/3639"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}