{"id":1269,"date":"2019-07-08T13:43:35","date_gmt":"2019-07-08T11:43:35","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1269"},"modified":"2019-08-17T01:02:23","modified_gmt":"2019-08-16T23:02:23","slug":"1-3-anadimos-interactividad","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/1-3-anadimos-interactividad\/","title":{"rendered":"1.3. A\u00f1adimos interactividad"},"content":{"rendered":"<p>Vamos al apartado \u00abExample 2-2: Make Circles\u00bb del libro (p\u00e1gina 12) y copiamos el c\u00f3digo. El resultado ser\u00e1 este:<\/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>Y ahora lo ejecutamos. Movemos el rat\u00f3n encima del rect\u00e1ngulo creado con el <em>canvas<\/em>. Veremos que vamos dibujando c\u00edrculos, blancos si no pulsamos el bot\u00f3n del rat\u00f3n, negros si lo hacemos.<\/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>Ejercicios<\/h2>\n<p>Probad a cambiar el n\u00famero que hay dentro de los par\u00e9ntesis de las instrucciones <span style=\"font-family: Courier, Arial;\">fill()<\/span>. Cambiad primero el primero y probad a ver qu\u00e9 pasa. Haced despu\u00e9s lo mismo con el segundo. \u00bfQu\u00e9 cambia? \u00bfPor qu\u00e9 lo hace de este modo?<\/p>\n<p>Buscad en el manual de referencia de p5.js informaci\u00f3n sobre la instrucci\u00f3n <a href=\"https:\/\/p5js.org\/es\/reference\/#\/p5\/fill\" target=\"_blank\" rel=\"noopener\"><span style=\"font-family: Courier, Arial;\">fill()<\/span><\/a>. Cambiad el color del c\u00edrculo a rojo cuando se pulsa el bot\u00f3n del rat\u00f3n y verde cuando 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 el apartado \u00abThe Console\u00bb el libro explica c\u00f3mo usar la consola de JavaScript para revisar los posibles errores que hayamos cometido con nuestros programas. En pr\u00f3ximos retos veremos alg\u00fan ejemplo de uso de la consola.<\/p>\n<p>\n<\/div>\n<h2>Lo que queda del cap\u00edtulo 2 del libro<\/h2>\n<p>Quedan solo dos apartados en el segundo cap\u00edtulo del libro. El titulado \u00abMaking a New Project\u00bb nos habla de c\u00f3mo hacer nuevos proyectos. Nos podemos guardar esta informaci\u00f3n. Haremos referencia a ella en pr\u00f3ximos retos. Pero ahora no la usaremos.<\/p>\n<p>Y el apartado \u00abExamples and Reference\u00bb lo leeremos con atenci\u00f3n y visitaremos las p\u00e1ginas que nos recomienda.<\/p>\n<p><div class=\"featured featured-grey\"><p>El siguiente v\u00eddeo nos hace una introducci\u00f3n a p5.js. Est\u00e1 en ingl\u00e9s, pero subtitulado en castellano: \u00abIntroducci\u00f3n 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>Vamos al apartado \u00abExample 2-2: Make Circles\u00bb del libro (p\u00e1gina 12) y copiamos el c\u00f3digo. El resultado ser\u00e1 este: Y ahora lo ejecutamos. Movemos el rat\u00f3n encima del rect\u00e1ngulo creado con el canvas. Veremos que vamos dibujando c\u00edrculos, blancos si no pulsamos el bot\u00f3n del rat\u00f3n, negros si lo hacemos. Ejercicios Probad a cambiar 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\/es\/wp-json\/wp\/v2\/pages\/1269"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/comments?post=1269"}],"version-history":[{"count":30,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1269\/revisions"}],"predecessor-version":[{"id":3626,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1269\/revisions\/3626"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}