{"id":1266,"date":"2019-07-08T13:19:22","date_gmt":"2019-07-08T11:19:22","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1266"},"modified":"2019-07-28T20:29:49","modified_gmt":"2019-07-28T18:29:49","slug":"1-2-empezamos-a-programar-dibujamos-un-circulo","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/1-2-empezamos-a-programar-dibujamos-un-circulo\/","title":{"rendered":"1.2.\u00a0Empezamos a programar: dibujamos un c\u00edrculo"},"content":{"rendered":"<p>En el cap\u00edtulo 2 tenemos los primeros programas con los que trabajaremos. A pesar de que en el libro nos explican algunos detalles de c\u00f3mo preparar nuestro ordenador para editar y ejecutar el c\u00f3digo, para empezar lo haremos de una manera m\u00e1s sencilla. M\u00e1s adelante ya veremos c\u00f3mo instalar todo lo necesario para editar el c\u00f3digo localmente.<\/p>\n<p>Por lo tanto, empezaremos este segundo cap\u00edtulo del libro por la p\u00e1gina 11, por el apartado titulado \u00abExample 2-1: Draw Ana Ellipse\u00bb.<\/p>\n<p>Para escribir este primer ejemplo iremos a la p\u00e1gina web\u00a0<a href=\"https:\/\/editor.p5js.org\/\" target=\"_blank\" rel=\"noopener\">https:\/\/editor.p5js.org\/<\/a>.<\/p>\n<p>Nos aparecer\u00e1 una p\u00e1gina como esta:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-135\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_001.jpg\" alt=\"\" width=\"800\" height=\"522\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_001.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_001-300x196.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_001-768x501.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Tenemos un peque\u00f1o programa ya hecho que la \u00fanica cosa que hace es preparar el espacio donde dibujar (el <em>canvas<\/em>) y ponerlo de color gris. \u00bfLo probamos? Hagamos clic en el bot\u00f3n con la flecha roja y lo que veremos ser\u00e1 esto:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-136\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_002.jpg\" alt=\"\" width=\"800\" height=\"408\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_002.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_002-300x153.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_002-768x392.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Un cuadrado de 400 por 400 p\u00edxeles de color gris.<\/p>\n<p>Ahora haremos el ejemplo del libro: en la parte <span style=\"font-family: Courier, Arial;\">draw()<\/span> pondremos este c\u00f3digo:<\/p>\n<pre>background(204);\r\nellipse(50, 50, 80, 80);<\/pre>\n<p>Si ejecutamos este programa, el resultado ser\u00e1 este:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-137\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_003.jpg\" alt=\"\" width=\"800\" height=\"393\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_003.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_003-300x147.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_003-768x377.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>\u00bfPor qu\u00e9?<\/p>\n<p>Repasemos el c\u00f3digo que hemos escrito:<\/p>\n<pre>createCanvas(400, 400);<\/pre>\n<p>Esta instrucci\u00f3n crea un espacio donde poder dibujar dentro de la p\u00e1gina web. Tendr\u00e1 400 p\u00edxeles de anchura y 400 de altura.<\/p>\n<pre>background(204);<\/pre>\n<p>Esta instrucci\u00f3n pinta el fondo del espacio de dibujo en un color gris (0 es negro, 255 blanco).<\/p>\n<pre>ellipse(50, 50, 80, 80);<\/pre>\n<p>Finalmente esta instrucci\u00f3n dibuja una elipse. Los dos primeros valores indican la posici\u00f3n del centro de la elipse (en p\u00edxeles) y los dos siguientes la anchura y la altura respectivamente.<\/p>\n<h2>Ejercicios<\/h2>\n<p>Cambiad los par\u00e1metros de las diferentes instrucciones que hemos usado:<\/p>\n<ul>\n<li>Cambiar la medida del espacio de dibujo.<\/li>\n<li>Cambiar el color de fondo (diferentes tonos de gris).<\/li>\n<li>Cambiar la posici\u00f3n de la elipse.<\/li>\n<li>Cambiar las medidas de la elipse.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>En el cap\u00edtulo 2 tenemos los primeros programas con los que trabajaremos. A pesar de que en el libro nos explican algunos detalles de c\u00f3mo preparar nuestro ordenador para editar y ejecutar el c\u00f3digo, para empezar lo haremos de una manera m\u00e1s sencilla. M\u00e1s adelante ya veremos c\u00f3mo instalar todo lo necesario para editar 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\/1266"}],"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=1266"}],"version-history":[{"count":11,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1266\/revisions"}],"predecessor-version":[{"id":3018,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1266\/revisions\/3018"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}