{"id":97,"date":"2019-06-27T12:11:10","date_gmt":"2019-06-27T10:11:10","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=97"},"modified":"2019-08-17T00:32:39","modified_gmt":"2019-08-16T22:32:39","slug":"1-3-afegim-interactivitat","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/1-3-afegim-interactivitat\/","title":{"rendered":"1.3. Afegim interactivitat"},"content":{"rendered":"<p>Passem a l\u2019apartat \u00abExample 2-2: Make Circles\u00bb del llibre (p\u00e0gina 12) i copiem el codi. El resultat ser\u00e0 aquest:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-138 size-full\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_004.jpg\" alt=\"\" width=\"468\" height=\"272\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_004.jpg 468w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_004-300x174.jpg 300w\" sizes=\"(max-width: 468px) 100vw, 468px\" \/><\/p>\n<p>I ara l\u2019executem. Movem el ratol\u00ed per sobre del rectangle creat amb el <em>canvas<\/em>. Veurem que anem dibuixant cercles, blancs si no premem el bot\u00f3 del ratol\u00ed, negres si ho fem.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-139\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_005.jpg\" alt=\"\" width=\"547\" height=\"199\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_005.jpg 547w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_005-300x109.jpg 300w\" sizes=\"(max-width: 547px) 100vw, 547px\" \/><\/p>\n<h2>Exercicis<\/h2>\n<p>Proveu de canviar el nombre que hi ha dins els par\u00e8ntesis de les instruccions <span style=\"font-family: Courier, Arial;\">fill()<\/span>. Canvieu primer el primer i proveu a veure qu\u00e8 passa. Feu despr\u00e9s el mateix amb el segon. Qu\u00e8 canvia? Per qu\u00e8 ho fa d\u2019aquesta manera?<\/p>\n<p>Busqueu al manual de refer\u00e8ncia de p5.js informaci\u00f3 sobre la instrucci\u00f3 <a href=\"https:\/\/p5js.org\/es\/reference\/#\/p5\/fill\" target=\"_blank\" rel=\"noopener\"><span style=\"font-family: Courier, Arial;\">fill()<\/span><\/a>. Canvieu el color del cercle a vermell quan es prem el bot\u00f3 del ratol\u00ed i verd quan no.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-147 size-full\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_006-1.jpg\" alt=\"\" width=\"547\" height=\"199\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_006-1.jpg 547w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_006-1-300x109.jpg 300w\" sizes=\"(max-width: 547px) 100vw, 547px\" \/><\/p>\n<div class=\"featured featured-grey\"><\/p>\n<p><strong>La consola de JavaScript<\/strong><\/p>\n<p>En l\u2019apartat \u00abThe Console\u00bb, el llibre explica com fer servir la consola de JavaScript per a revisar els possibles errors que h\u00e0gim com\u00e8s amb els nostres programes. En els propers reptes, veurem algun exemple d\u2019\u00fas de la consola.<\/p>\n<p>\n<\/div>\n<h2>El que resta del cap\u00edtol 2 del llibre<\/h2>\n<p>Nom\u00e9s queden dos apartats del segon cap\u00edtol del llibre. El titulat \u00abMaking a New Project\u00bb ens parla de com fer nous projectes. Ens podem guardar aquesta informaci\u00f3. En farem refer\u00e8ncia en els propers reptes. Per\u00f2 ara no ho farem servir.<\/p>\n<p>I l\u2019apartat \u00abExamples and References\u00bb el llegirem amb atenci\u00f3 i visitarem les p\u00e0gines que ens recomana.<\/p>\n<p><div class=\"featured featured-grey\"><p>El v\u00eddeo seg\u00fcent ens fa una introducci\u00f3 a p5.js. Est\u00e0 en angl\u00e8s, per\u00f2 subtitulat en castell\u00e0: \u00abIntroducci\u00f3 a p5.js\u00bb.<\/p>\n<p><iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/D1ELEeIs0j8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>\n<\/div><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Passem a l\u2019apartat \u00abExample 2-2: Make Circles\u00bb del llibre (p\u00e0gina 12) i copiem el codi. El resultat ser\u00e0 aquest: I ara l\u2019executem. Movem el ratol\u00ed per sobre del rectangle creat amb el canvas. Veurem que anem dibuixant cercles, blancs si no premem el bot\u00f3 del ratol\u00ed, negres si ho fem. Exercicis Proveu de canviar el [&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\/97"}],"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=97"}],"version-history":[{"count":29,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":3602,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/97\/revisions\/3602"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}