{"id":3744,"date":"2019-08-17T13:49:14","date_gmt":"2019-08-17T11:49:14","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=3744"},"modified":"2019-08-17T13:58:47","modified_gmt":"2019-08-17T11:58:47","slug":"2-3-5-solucions-als-exercicis-del-repte","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/2-3-5-solucions-als-exercicis-del-repte\/","title":{"rendered":"2.3.5. Solucions als exercicis del repte"},"content":{"rendered":"

Soluci\u00f3 a l\u2019exercici plantejat al final de l\u2019apartat dels condicionals<\/strong><\/h2>\n
var figura = \"quadrat\"; \/\/ Canvieu aquest valor per a provar l\u2019exercici\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n  background(200);\r\n\tif (figura == \"cercle\") {\r\n\t\tellipse(200,200,100,100);\r\n\t}\r\n\tif (figura == \"quadrat\") {\r\n\t\trect(150,150,100,100);\r\n\t}\r\n}<\/pre>\n
Degradat vertical<\/strong><\/h3>\n
for (var i=0; i<=255; i++ ) {\r\n  stroke(i);\r\n  line(xIni,yIni+i,xIni+256,yIni+i);\r\n}<\/pre>\n
Degradat horitzontal per\u00f2 de blanc a negre<\/strong><\/h3>\n
for (var i=0; i<=255; i++ ) {\r\n  stroke(256-i);\r\n  line(xIni+i,yIni,xIni+i,yIni+256);\r\n}<\/pre>\n
Triangle degradat<\/strong><\/h3>\n
for (var i=0; i<=255; i++ ) {\r\n  stroke(i);\r\n  line(xIni,yIni+i,xIni+i,yIni);\r\n}<\/pre>\n
Degradat oblic<\/strong><\/h3>\n
for (var i=0; i<=255; i++ ) {\r\n  stroke(i);\r\n  line(xIni,yIni+i,xIni+i,yIni);\r\n}\r\nfor (var i=0; i<=255; i++ ) {\r\n  stroke(256-i);\r\n  line(xIni+i,yIni+256,xIni+256,yIni+i);\r\n}<\/pre>\n
Soluci\u00f3 a l\u2019exercici del rellotge<\/strong><\/h2>\n
Anirem veient el codi a poc a poc.<\/p>\n
Primer tenim el bucle que fem amb la instrucci\u00f3 for<\/span><\/strong>:<\/p>\n
for (var i=0;i<60;i++){<\/pre>\n
Ho repetim 60 cops perqu\u00e8 60 s\u00f3n els minuts i segons que t\u00e9 un rellotge.<\/p>\n
Dins d\u2019aquest for<\/span><\/strong> hi tenim quatre if<\/span><\/strong>:<\/p>\n
    if (i % 5 == 0) {\r\n      stroke(0);\r\n      line(0, -40, 0, -60);\r\n    }\r\n<\/pre>\n
Aquest primer if<\/span><\/strong> ens dibuixa totes les l\u00ednies del rellotge. No volem pintar les 60 l\u00ednies, sin\u00f3 que nom\u00e9s en pintem una per cada 5 minuts (igual que en un rellotge). Per aix\u00f2 calculem el residu de dividir els minuts per 5 i pintem si el residu \u00e9s 0 (\u00e9s un m\u00faltiple de 5).<\/p>\n
Segon if<\/span><\/strong>:<\/p>\n
    if (i == (hores % 12 * 5)) {\r\n      stroke(255,0,0);\r\n      line(0, -40, 0, -70);\r\n    }\r\n<\/pre>\n
Aquest if<\/span><\/strong> dibuixa la maneta de les hores. Mirem l\u2019hora que \u00e9s (est\u00e0 guardada a la variable hores), calculem el residu de dividir per 12 (perqu\u00e8 les hores van de 0 a 23 i aix\u00ed passem a hores de 0 a 11) i multipliquem per 5 (per a buscar el minut adequat per a pintar aquesta hora). Pintem les hores de color vermell i, a m\u00e9s a m\u00e9s, fem la ratlla una mica m\u00e9s llarga.<\/p>\n
Tercer if<\/span><\/strong>:<\/p>\n
    if (i == minuts) {\r\n      stroke(0,0,255);\r\n      line(0, -40, 0, -70);\r\n    }\r\n<\/pre>\n
Pintem la maneta dels minuts. Com que tenim 60 minuts, aix\u00f2 \u00e9s m\u00e9s f\u00e0cil, pintarem aquella ratlla que coincideixi amb els minuts actuals. Tamb\u00e9 la fem m\u00e9s llarga i, a m\u00e9s a m\u00e9s, de color verd.<\/p>\n
I quart if<\/span><\/strong>:<\/p>\n
    if (i == segons) {\r\n      stroke(255);\r\n      line(0, -40, 0, -60);\r\n    }\r\n<\/pre>\n
\u00c9s el mateix que els minuts. En aquest cas, pintem de blanc.<\/p>\n
Prova l\u2019exercici i canvia els valors que creguis convenient.<\/p>\n","protected":false},"excerpt":{"rendered":"
Soluci\u00f3 a l\u2019exercici plantejat al final de l\u2019apartat dels condicionals var figura = “quadrat”; \/\/ Canvieu aquest valor per a provar l\u2019exercici function setup() { createCanvas(400, 400); } function draw() { background(200); if (figura == “cercle”) { ellipse(200,200,100,100); } if (figura == “quadrat”) { rect(150,150,100,100); } } Degradat vertical for (var i=0; i<=255; i++ ) […]<\/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\/3744"}],"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=3744"}],"version-history":[{"count":3,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/3744\/revisions"}],"predecessor-version":[{"id":3750,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/3744\/revisions\/3750"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=3744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}