![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_003.jpg\")
<\/p>\n
Una carpeta que es digui Programaci\u00f3<\/strong> i a dins una carpeta que es dir\u00e0 js<\/strong>.<\/p>\n La segona <\/strong>cosa que farem ser\u00e0 anar a la p\u00e0gina https:\/\/p5js.org\/es\/download\/<\/a> i d\u2019all\u00e0 baixar-nos la versi\u00f3 comprimida.<\/p>\n Ens baixar\u00e0 un arxiu que es diu p5.min.js<\/strong> que guardarem dins de la carpeta js<\/strong> que acabem de crear.<\/p>\n La tercera <\/strong>tasca que hem de fer \u00e9s seleccionar un editor. Per a comen\u00e7ar, podem fer servir l\u2019editor de text del nostre sistema operatiu (el Bloc de notes<\/em> de Windows, l\u2019editor de Mac o l\u2019editor de Linux). A mesura que anem avan\u00e7ant, segurament aquests editors se\u2019ns quedaran curts i ens anir\u00e0 b\u00e9 disposar d\u2019algun m\u00e9s potent.<\/p>\n Algunes opcions poden ser:<\/p>\n Els exemples que veurem aqu\u00ed s\u2019han fet fent servir \u00abAtom\u00bb, per\u00f2 en podeu fer servir qualsevol altre.<\/p>\n Ja tenim l\u2019entorn de treball. Ara ens cal fer uns passos que ens facilitin la tasca de crear despr\u00e9s els nostres programes.<\/p>\n Primer obrim el nostre editor de text i creem un nou arxiu. Si fem servir Atom (seria similar a Sublime i a Brackets) podem crear un nou projecte. A Atom farem File: Add project folder\u2026<\/em> Y seleccionarem la carpeta Programaci\u00f3 que ja hem creat a la primera part.<\/p>\n A la columna de la esquerra de l\u2019editor veurem la carpeta Programaci\u00f3<\/strong> i la carpeta js<\/strong> que tenim a dintre. A la imatge, podeu veure com queda.<\/p>\n Seleccionem la carpeta Programaci\u00f3<\/strong> fent un clic (\u00e9s possible que desaparegui la carpeta js<\/strong>. No patiu, un altre clic la fa apar\u00e8ixer de nou) i fem File: New File<\/em>.<\/p>\n Ara copiarem el codi seg\u00fcent:<\/p>\n Un cop copiat, anem al men\u00fa i fem File: Save<\/em> i el guardem amb el nom index.html<\/strong>.<\/p>\n Com que ara l\u2019editor sap amb quin llenguatge est\u00e0 escrit aquest codi pot fer servir l\u2019opci\u00f3 d\u2019acolorir-lo.<\/p>\n Com es pot veure a la imatge, a m\u00e9s d\u2019acolorir el codi, tamb\u00e9 ha aparegut el fitxer a la columna de l\u2019esquerra.<\/p>\n Ens queda un pas m\u00e9s a fer abans de comen\u00e7ar amb el primer programa. Ara crearem un nou arxiu.<\/p>\n Dins d\u2019aquest nou arxiu copiarem aquest codi:<\/p>\n Guardarem aquest nou arxiu amb l\u2019opci\u00f3 del men\u00fa Save As\u2026<\/em> i ens assegurarem que el guardem dins de la carpeta js<\/strong> i amb el nom sketch.js<\/strong>.<\/p>\n Aquest codi que acabem de copiar, consisteix en dues funcions: setup()<\/span> i draw()<\/span>. Posarem codi a les dues funcions, per\u00f2 cadascuna d\u2019aquestes tindr\u00e0 una funci\u00f3 espec\u00edfica. La funci\u00f3 setup()<\/span> la farem servir per a establir les condicions inicials. El que posem a dins nom\u00e9s s\u2019executar\u00e0 un cop. La funci\u00f3 draw()<\/span> ser\u00e0, com el seu nom indica, la que farem servir realment per a dibuixar.<\/p>\n Aquest ser\u00e0 l\u2019aspecte del nostre editor un cop estigui tot preparat:<\/p>\n Encara tinc oberta la pestanya Welcome<\/em>. Si ens posem a sobre, apareix una creu que ens permet tancar-la. Tamb\u00e9 podem tancar la pestanya de l\u2019arxiu index.html<\/strong>. De moment no el farem servir.<\/p>\n A la imatge que teniu a continuaci\u00f3 teniu un esquema de com s\u2019organitzen els arxius que necessitem per a guardar els nostres programes. Ser\u00e0 convenient que tinguem una carpeta per a cada exercici. A la carpeta de l\u2019exercici hi tenim dues coses: l\u2019arxiu HTML<\/strong>, que presenta el programa al navegador, i la carpeta js<\/strong>, que \u00e9s on guardarem els arxius JavaScript. Dins d\u2019aquesta carpeta hi posarem, per una banda, l\u2019arxiu de p5.js que haurem baixat de la web (p5.min.js) i, per l\u2019altra, l\u2019arxiu sketch.js que \u00e9s on escriurem el programa.<\/p>\n Per a cada exercici podem copiar tot l\u2019esquema (arxiu HTML i carpeta js) i esborrar el contingut de l\u2019arxiu sketch.js per a escriure el nou programa sense interfer\u00e8ncies.<\/p>\n Tot i que vam fer servir l\u2019editor web per a fer els exercicis del cap\u00edtol 2, aquesta no \u00e9s la millor manera de treballar amb p5.js si volem incloure els nostres projectes a les nostres pr\u00f2pies p\u00e0gines web. Aix\u00ed que cal que ens preparem un entorn de treball que ens permeti editar i executar els […]<\/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\/692"}],"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=692"}],"version-history":[{"count":12,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/692\/revisions"}],"predecessor-version":[{"id":3370,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/692\/revisions\/3370"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_005.jpg\")
<\/p>\n\n
Arxius b\u00e0sics<\/h2>\n
![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_007.jpg\")
<\/p>\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>\r\n <style> body {padding: 0; margin: 0;} <\/style>\r\n <script src=\"js\/p5.min.js\"><\/script>\r\n <script src=\"js\/sketch.js\"><\/script>\r\n <\/head>\r\n <body>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_009.jpg\")
<\/p>\nfunction setup() {\r\n \/\/ put setup code here\r\n}\r\nfunction draw() {\r\n \/\/ put drawing code here\r\n}<\/pre>\n![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_011.jpg\")
<\/p>\n![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_3_013.jpg\")
<\/p>\n","protected":false},"excerpt":{"rendered":"