{"id":404,"date":"2019-07-04T23:06:27","date_gmt":"2019-07-04T21:06:27","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=404"},"modified":"2019-08-17T13:24:38","modified_gmt":"2019-08-17T11:24:38","slug":"2-3-2-condicionals","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/2-3-2-condicionals\/","title":{"rendered":"2.3.2. Condicionals"},"content":{"rendered":"

Tot i que es tornar\u00e0 a veure m\u00e9s endavant al llibre, vegem una instrucci\u00f3 que ens permetr\u00e0 seleccionar entre dues opcions: la instrucci\u00f3 condicional<\/strong>.<\/p>\n

Tots sabem qu\u00e8 \u00e9s una condici\u00f3: \u00e9s all\u00f2 que s\u2019ha de complir per a poder tenir all\u00f2 altre.<\/p>\n<\/div>\n

La instrucci\u00f3 condicional \u00e9s l\u2019if<\/span><\/strong> i la podem fer servir de dues maneres diferents. La sintaxi de la primera manera \u00e9s la seg\u00fcent:<\/p>\n

if (condici\u00f3) {\r\n  \/\/ instruccions a fer si es compleix la condici\u00f3\r\n}<\/pre>\n
Vegem un exemple:<\/p>\n
var figura = true;\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 == true) {\r\n\t\tellipse(200,200,100,100);\r\n\t}\r\n}<\/pre>\n
Aquest codi dibuixa un cercle si la variable figura <\/span>guarda el valor true<\/span>. Prova aquest codi i comprova qu\u00e8 passa si en comptes de true<\/span>, emmagatzemem false<\/span> a la variable figura<\/span>.<\/p>\n
La segona sintaxi de la instrucci\u00f3 if<\/span><\/strong> \u00e9s aquesta:<\/p>\n
if (condici\u00f3) {\r\n  \/\/ instruccions a fer si<\/strong> es compleix la condici\u00f3<\/span>\r\n} else {\r\n  \/\/ instruccions a fer si no<\/strong> es compleix la condici\u00f3<\/span>\r\n}<\/pre>\n
En aquest cas, si es compleix la condici\u00f3, aleshores fem les instruccions de la segona l\u00ednia. I, si no es compleix, les instruccions que tenim en la quarta l\u00ednia.<\/p>\n
Ara modificarem l\u2019exemple anterior fent que s\u2019hagi d\u2019escollir entre un cercle i un quadrat:<\/p>\n
var figura = \"cercle\";\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} else {\r\n\t\trect(150,150,100,100);\r\n\t}\r\n}<\/pre>\n
En aquest cas, si el text guardat a la variable figura<\/span> \u00e9s “cercle”<\/span> aleshores es dibuixar\u00e0 un cercle. I si \u00e9s qualsevol altra cosa, dibuixar\u00e0 un quadrat. Fes la prova, copia aquest codi a l\u2019editor i prova de canviar “cercle”<\/span>\u00a0per qualsevol altra cosa.<\/p>\n
Hem vist les dues sintaxis que t\u00e9 la instrucci\u00f3 if<\/span><\/strong>, per\u00f2, c\u00f3mo ho podem fer si el que volem \u00e9s que si a la figura hi ha \u00abcercle\u00bb dibuixi un cercle, si hi ha \u00abquadrat\u00bb dibuixi un quadrat i, si no hi ha res, no dibuixi res? Ho podem fer amb dos if<\/span><\/strong> simples (la primera versi\u00f3). Ho proveu? Al final d\u2019aquest repte teniu una possible soluci\u00f3.<\/p>\n
Nota<\/strong>: En aquests darrers exemples hem treballat amb tres tipus de dades diferents: nombres, textos i valors l\u00f2gics (true\/false<\/em>). Els valors num\u00e8rics i l\u00f2gics s\u2019escriuen tal qual, per\u00f2 els textos s\u2019escriuen entre cometes “”<\/span> per a poder-los diferenciar dels noms de les variables.<\/p>\n<\/div>\n
Un altre exemple amb la instrucci\u00f3 for<\/span><\/strong><\/h2>\n
Fem un petit exemple que explicarem pas a pas. L\u2019objectiu \u00e9s crear aquest quadrat pintat amb un degradat de grisos. El quadre gris m\u00e9s gran \u00e9s el canvas<\/em>. I el que pintarem \u00e9s el degradat.<\/p>\n
\"\"<\/p>\n
El que farem primer \u00e9s crear dues variables que ens indiquin on comencem a dibuixar el quadre. Haurem de tenir en compte les mides del canvas<\/em>:<\/p>\n
var xIni = 100, yIni = 100;\r\n\r\nfunction setup() {\r\n  createCanvas(480, 480);\r\n}<\/pre>\n
El canvas<\/em> ser\u00e0 un quadrat de 480 p\u00edxels d\u2019amplada. A l\u2019x<\/strong> inicial i l\u2019i<\/em> inicial els hem assignat un valor de 100 p\u00edxels. Si us fixeu en la imatge, podr\u00edem centrar m\u00e9s el quadre dins el canvas<\/em>. Com ho far\u00edeu?<\/p>\n
Per a dibuixar el degradat, el que farem ser\u00e0 pintar 256 l\u00ednies verticals<\/strong> cadascuna d\u2019un color des del 0 (negre) fins al 255 (blanc). Per a determinar de quin color es pinta una l\u00ednia, farem servir la funci\u00f3 stroke()<\/span><\/a>.<\/p>\n
Per tant, volem repetir una mateixa instrucci\u00f3 (pintar una l\u00ednia), canviant la seva posici\u00f3 x<\/strong> i el seu color. Com que sabem el nombre inicial (0) i el final (255) dels colors, podem comen\u00e7ar per aqu\u00ed i escriure la instrucci\u00f3 for<\/span> corresponent:<\/p>\n
for (var i=0; i<=255; i++ ) {<\/pre>\n
Anem des de 0 fins a 255 amb increments d\u2019un.<\/p>\n
Nota<\/strong>: i<\/em>++ \u00e9s equivalent a escriure i<\/em> = i<\/em> + 1. Per\u00f2 \u00e9s m\u00e9s curt posar i<\/em>++<\/p>\n<\/div>\n
El pas seg\u00fcent que hem de fer \u00e9s, dins la repetici\u00f3, escollir el color. Per\u00f2 aix\u00f2 \u00e9s molt f\u00e0cil:<\/p>\n
stroke(i);<\/pre>\n
I ens queda un punt, una mica m\u00e9s complicat, que \u00e9s dibuixar les l\u00ednies. Pensem una mica. Primer, hem dit que les l\u00ednies s\u00f3n verticals, per tant, les y<\/strong> (inicial i final) no canvien mai, sempre s\u00f3n les mateixes yIni<\/span> i yIni<\/span>+ 256, perqu\u00e8 com que volem fer un quadrat i sabem que dibuixarem 256 l\u00ednies (una de cada color) l\u2019al\u00e7ada de les l\u00ednies tamb\u00e9 ha de ser de 256 p\u00edxels.<\/p>\n
Ara ens queda determinar com seran les x<\/strong>. Cada l\u00ednia comen\u00e7ar\u00e0 i acabar\u00e0 a la mateixa\u00a0x<\/strong> (\u00e9s una l\u00ednia vertical). La primera l\u00ednia que dibuixem estar\u00e0 a la posici\u00f3 xIni<\/span>, la segona 1 p\u00edxel m\u00e9s a la dreta, la tercera 2 p\u00edxels m\u00e9s a la dreta que la primera i, aix\u00ed, successivament. La primera l\u00ednia la dibuixarem quan la variable i<\/em> sigui 0, la segona quan sigui 1 i la tercera quan sigui 2. Podeu veure la relaci\u00f3? S\u00ed, xIni+i<\/span> ser\u00e0 la posici\u00f3 on pintarem cada l\u00ednia:<\/p>\n
line(xIni+i, yIni, xIni+i, yIni+256);<\/pre>\n
D\u2019aquesta manera el programa complet quedar\u00e0 aix\u00ed:<\/p>\n
var xIni = 100, yIni = 100;\r\n\r\nfunction setup() {\r\n  createCanvas(480, 480);\r\n}\r\n\r\nfunction draw() {\r\n  background(204);\r\n  for (var i=0; i<=255; i++ ) {\r\n\tstroke(i);\r\n\tline(xIni+i,yIni,xIni+i,yIni+256);\r\n  }\r\n}<\/pre>\n
Exercicis<\/strong><\/h2>\n
A partir de l\u2019exemple, intenteu fer els quadres seg\u00fcents que nom\u00e9s requereixen petits canvis en el programa anterior:<\/p>\n
\"\"<\/p>\n
Tamb\u00e9 podeu provar de fer aquest altre, tot i que cal fer dues repeticions, la primera \u00e9s el triangle degradat que acabem de fer. La segona\u2026<\/p>\n
\"\"<\/p>\n
Trobareu les solucions al final d\u2019aquest repte.<\/p>\n","protected":false},"excerpt":{"rendered":"
Tot i que es tornar\u00e0 a veure m\u00e9s endavant al llibre, vegem una instrucci\u00f3 que ens permetr\u00e0 seleccionar entre dues opcions: la instrucci\u00f3 condicional. La instrucci\u00f3 condicional \u00e9s l\u2019if i la podem fer servir de dues maneres diferents. La sintaxi de la primera manera \u00e9s la seg\u00fcent: if (condici\u00f3) { \/\/ instruccions a fer si […]<\/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\/404"}],"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=404"}],"version-history":[{"count":22,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/404\/revisions"}],"predecessor-version":[{"id":3739,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/404\/revisions\/3739"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}