Obrim l\u2019editor online de p5.js i autom\u00e0ticament es carrega amb aquest codi:<\/p>\n
function setup<\/span>() {\r\n createCanvas<\/span>(400, 400);\r\n}\r\nfunction draw<\/span>() {\r\n background<\/span>(220);\r\n}<\/pre>\nAmb la funci\u00f3 setup()<\/span> estem creant l\u2019espai on dibuixarem el canvas<\/em>, d\u2019una mida de 400 p\u00edxels d\u2019amplada i 400 d\u2019al\u00e7ada.<\/p>\nProva de canviar l\u2019amplada a 600 p\u00edxels i executa el programa. Fixa\u2019t com creix el requadre del canvas<\/em>. Torna a posar l\u2019amplada a 400 p\u00edxels.<\/p>\n<\/div>\nAmb la funci\u00f3 draw()<\/span> seleccionem el color de fons del canvas<\/em>. M\u00e9s endavant, en aquest mateix cap\u00edtol, veurem com pintar amb diferents colors.<\/p>\nPassem al llibre i copiem l\u2019exemple 3-2. El que fem \u00e9s dibuixar un canvas<\/em> de 480 punts d\u2019amplada i 120 d\u2019al\u00e7ada. Despr\u00e9s pintem el canvas<\/em> de color gris i dibuixem un punt a la posici\u00f3 horitzontal 240 i vertical 60\u2026 P\u00edxels, \u00e9s clar.<\/p>\nfunction setup<\/span>() {\r\n createCanvas<\/span>(480, 120);\r\n}\r\n\r\nfunction draw<\/span>() {\r\n background<\/span>(204);\r\n point<\/span>(240, 60);\r\n}<\/pre>\nUn p\u00edxel \u00e9s un punt molt petit, aix\u00ed que costa una mica veure. Per\u00f2 hi \u00e9s, just al mig.<\/p>\n
El sistema de coordenades<\/h3>\n
Fem una petita prova. A l\u2019exercici anterior, canviem la posici\u00f3 on dibuixem el punt:<\/p>\n
point<\/span>(10, 60);<\/pre>\nAra, trobarem el punt a la part esquerra del canvas<\/em> i a la mateixa al\u00e7ada vertical. El canviem de nou:<\/p>\npoint<\/span>(10, 10);<\/pre>\nAra el tenim a la part superior esquerra. Podem fer m\u00e9s proves amb diferents posicions, per\u00f2 ja podem veure que el sistema de coordenades de p5.js posa la posici\u00f3 0,0 (si comencem per 0) a dalt a l\u2019esquerra i, per tant, en aquest canvas<\/em>, la darrera posici\u00f3, a la part de sota, a la dreta, ser\u00e0 la posici\u00f3 479,119.<\/p>\nProveu de canviar el punt de lloc i comproveu si apareix al lloc on creieu que ha d\u2019apar\u00e8ixer. Qu\u00e8 passa si posem el punt a la posici\u00f3 480, 120?<\/p>\n<\/div>\n
Figures b\u00e0siques<\/h3>\n
A la p\u00e0gina 20, trobem les funcions que ens permeten dibuixar les figures b\u00e0siques a partir de les quals podem fer gaireb\u00e9 qualsevol dibuix. No les explicarem aqu\u00ed perqu\u00e8 estan totes explicades al llibre, nom\u00e9s assenyalem alguns punts a tenir present:<\/p>\n
\n- x<\/strong> i y<\/strong> sempre representen coordenades. La x<\/strong> la posici\u00f3 horitzontal i la y<\/strong> la vertical.<\/li>\n
- Hi ha figures que les dibuixem a partir dels v\u00e8rtex. S\u2019indiquen tots els v\u00e8rtex de la figura i es dibuixen l\u00ednies de punt a punt.<\/li>\n
- Els rectangles, per\u00f2, es dibuixen a partir de la coordenada del seu v\u00e8rtex superior esquerre i despr\u00e9s s\u2019indiquen els p\u00edxels d\u2019amplada i d\u2019al\u00e7ada (per aquest ordre).<\/li>\n
- Les el\u00b7lipses es dibuixen d\u2019una manera semblant als rectangles. Tenim unes coordenades i l\u2019amplada i l\u2019al\u00e7ada. Per\u00f2 en aquest cas, les coordenades indiquen el centre de l\u2019el\u00b7lipse.<\/li>\n
- La figura m\u00e9s complicada de totes \u00e9s l\u2019arc.<\/li>\n<\/ul>\n
El pas seg\u00fcent a fer \u00e9s provar tots els exemples que hi ha al llibre, del 3-3 al 3-6.<\/p>\n
Aturem-nos un moment en l\u2019exemple 3-6. I, en particular, en aquesta instrucci\u00f3:<\/p>\n
ellipse<\/span>(278, -100, 400, 400);<\/pre>\nQu\u00e8 vol dir que la posici\u00f3 y<\/strong> del centre de l\u2019el\u00b7lipse sigui -100? Doncs que el centre de l\u2019el\u00b7lipse est\u00e0 fora del canvas<\/em>, 100 punts per sobre del seu l\u00edmit superior. S\u00ed, podem \u201cpintar\u201d fora del canvas<\/em>.<\/p>\nLa funci\u00f3 arc()<\/span><\/h4>\nL\u2019exemple 3-7 fa servir la funci\u00f3 arc()<\/span>.<\/p>\nAquesta funci\u00f3 la podem fer servir usant radians o graus segons ens sigui m\u00e9s \u00fatil. Per a poder fer servir radians, p5.js t\u00e9 definides un conjunt de constants relacionades amb el nombre pi. A la figura 3-2 del llibre es pot veure un cercle on es perceben totes les posicions, tant en radians com en graus.<\/p>\n
Per a comen\u00e7ar ens hem de fixar en qu\u00e8 la posici\u00f3 0 est\u00e0 a la dreta del cercle (en un rellotge serien les 3). Pi est\u00e0 just a l\u2019altra banda. Per tant, si anem de 0 a pi, dibuixarem un semicercle. Provem-ho:<\/p>\n
function setup<\/span>() {\r\n createCanvas<\/span>(480, 120);\r\n}\r\n\r\nfunction draw<\/span>() {\r\n background<\/span>(204);\r\n arc<\/span>(90, 60, 80, 80, 0, PI);\r\n}<\/pre>\nCal recordar que:<\/p>\n
arc<\/span>(x, y, width, height, iniciDibuix, finalDibuix<\/span>);<\/pre>\n\n- Els dos primers nombres s\u00f3n les coordenades del centre del cercle (o el\u00b7lipse).<\/li>\n
- Els dos seg\u00fcents s\u00f3n l\u2019amplada i l\u2019al\u00e7ada (s\u00f3n iguals \u21d2 \u00e9s un cercle).<\/li>\n
- El cinqu\u00e8 indica on comencem a dibuixar (en el punt 0).<\/li>\n
- El sis\u00e8 indica fins a on dibuixem (al punt pi).<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_007.jpg\")
<\/p>\n
Aix\u00f2 \u00e9s el que hem dibuixat. Repassem ara les constants que t\u00e9 definides p5.js:<\/p>\n
\n- PI: El nombre pi.<\/li>\n
- TWO_PI: el nombre pi per 2. Equival al punt 0. Pot ser \u00fatil algunes vegades.<\/li>\n
- HALF_PI: el nombre pi dividit per 2. Pensem en un rellotge. Si 0 equival a les 3 i pi equival a les 9, mig pi equival a les 6.<\/li>\n
- QUARTER_PI: el nombre pi dividit per 4.<\/li>\n<\/ul>\n
Amb aquestes constants podem dividir un cercle en 8 parts i dibuixar qualsevol arc que englobi qualsevol conjunt continu d\u2019aquestes parts. Evidentment, no cal que ens quedem amb aquestes constants i podr\u00edem filar m\u00e9s prim. Per exemple:<\/p>\n
function setup<\/span>() {\r\n createCanvas<\/span>(480, 120);\r\n}\r\n\r\nfunction draw<\/span>() {\r\n background<\/span>(204);\r\n arc<\/span>(90, 60, 80, 80, PI<\/span>+HALF_PI<\/span>,0);\r\n arc<\/span>(180, 60, 80, 80, PI<\/span>+HALF_PI<\/span>,(PI<\/span>\/6));\r\n arc<\/span>(270, 60, 80, 80, PI<\/span>+HALF_PI<\/span>,(PI<\/span>\/3));\r\n arc<\/span>(360, 60, 80, 80, PI<\/span>+HALF_PI<\/span>,HALF_PI<\/span>);\r\n}<\/pre>\nAquest codi dibuixar\u00e0 aix\u00f2:<\/p>\n
![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_008.jpg\")
<\/p>\n
Que, si ho veiem com un rellotge, equival a les 12:15, les 12:20, les 12:25 i les 12:30.<\/p>\n
Usant graus<\/h4>\n
Si no ens agrada aix\u00f2 de fer servir radians, tamb\u00e9 podem fer servir graus, tenint en compte que dividim el cercle en 360 graus i que la posici\u00f3 zero, de nou, est\u00e0 a la part dreta del cercle. Per a fer servir els graus, podem, o fer servir la funci\u00f3 radiants()<\/span>, que fa la conversi\u00f3 de graus a radians, o, tal com s\u2019explica en l\u2019exemple 3-9, podem indicar a la funci\u00f3 setup()<\/span> que sempre treballarem amb graus, fent servir la funci\u00f3 angleMode(DEGREES)<\/span>.<\/p>\nSuperposici\u00f3 de figures<\/h3>\n
No t\u00e9 cap misteri. Les figures es pinten segons s\u2019executa la instrucci\u00f3 corresponent. Per tant, si dibuixem primer un cercle i despr\u00e9s un rectangle, el rectangle estar\u00e0 per sobre del cercle.<\/p>\n
Propietats de les figures<\/h3>\n
Podem canviar diferents propietats de les figures. Algunes (enlla\u00e7ades amb la seva explicaci\u00f3 del manual de refer\u00e8ncia de p5.js) s\u00f3n:<\/p>\n
\n- La funci\u00f3 noStroke()<\/span><\/a> elimina la vora de les figures.<\/li>\n
- La funci\u00f3 strokeWeight()<\/span><\/a> ens permet determinar l\u2019amplada de la vora de les figures.<\/li>\n
- Amb la funci\u00f3 strokeJoin()<\/span><\/a> podem fer que els angles siguin arrodonits.<\/li>\n
- La funci\u00f3 strokeCap()<\/span><\/a> determina com \u00e9s el final de les l\u00ednies.<\/li>\n
- La funci\u00f3 rectMode()<\/span><\/a> ens permet determinar com s\u2019han d\u2019interpretar els par\u00e0metres que rep la funci\u00f3 rect()<\/span>. Mireu el manual de refer\u00e8ncia per a tenir m\u00e9s informaci\u00f3.<\/li>\n
- La funci\u00f3 ellipseMode()<\/span><\/a> ens permet determinar com s\u2019han d\u2019interpretar els par\u00e0metres que rep la funci\u00f3 ellipse()<\/span>. Mireu el manual de refer\u00e8ncia per a tenir m\u00e9s informaci\u00f3.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
El cap\u00edtol 3: Dibuixar Si no ho heu fet ja, el primer que farem ser\u00e0 llegir la primera plana d\u2019aquest cap\u00edtol del llibre. Ens explica qu\u00e8 \u00e9s aix\u00f2 del canvas i com es defineix la seva mida. Dubtes? Feu servir el f\u00f2rum de l\u2019aula! Obrim l\u2019editor online de p5.js i autom\u00e0ticament es carrega amb aquest […]<\/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\/3603"}],"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=3603"}],"version-history":[{"count":7,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/3603\/revisions"}],"predecessor-version":[{"id":4178,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/3603\/revisions\/4178"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=3603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}