{"id":350,"date":"2022-10-04T12:29:00","date_gmt":"2022-10-04T10:29:00","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=350"},"modified":"2022-10-04T12:30:07","modified_gmt":"2022-10-04T10:30:07","slug":"2-4-formas-basicas-y-coordenadas","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/2-4-formas-basicas-y-coordenadas\/","title":{"rendered":"2.4. Formas b\u00e1sicas y coordenadas"},"content":{"rendered":"<p>Lo primero que debemos hacer para empezar a dibujar es crear nuestro <em>canvas<\/em> o lienzo. Para ello, dentro de la funci\u00f3n <span class=\"courier\">setup()<\/span> podemos utilizar el m\u00e9todo <span class=\"courier\">createCanvas()<\/span> de la siguiente manera:<\/p>\n<pre>createCanvas(400, 200);<\/pre>\n<p>El m\u00e9todo <span class=\"courier\">createCanvas()<\/span> entre sus par\u00e9ntesis acepta dos <strong>par\u00e1metros<\/strong>: el tama\u00f1o del lienzo en la dimensi\u00f3n <em>x<\/em> y su tama\u00f1o en la dimensi\u00f3n <em>y<\/em> o, lo que es lo mismo, el ancho y el alto. En el caso del c\u00f3digo anterior, el <em>canvas<\/em> tendr\u00e1 400 px de ancho y 200 px de alto.<\/p>\n<p>Una vez que tenemos nuestro lienzo, podemos empezar a dibujar algunas formas dentro de este. P5.js cuenta con m\u00e9todos para dibujar formas b\u00e1sicas como l\u00edneas, cuadrados, rect\u00e1ngulos o c\u00edrculos. Podemos escribir estos m\u00e9todos dentro del <span class=\"courier\">draw()<\/span>. Dependiendo de la forma que queramos dibujar, tendremos que incluir unos par\u00e1metros u otros. Por ejemplo, para dibujar una l\u00ednea necesitamos especificar las coordenadas de los dos puntos que la definen, mientras que para dibujar un rect\u00e1ngulo especificamos las coordenadas de su esquina superior izquierda, su ancho y su alto, en lugar de las coordenadas de sus cuatro puntos.<\/p>\n<figure id=\"attachment_64\" aria-describedby=\"caption-attachment-64\" style=\"width: 715px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-64\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_015.jpg\" alt=\"\" width=\"715\" height=\"1255\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_015.jpg 715w, \/wp-content\/uploads\/2022\/10\/PID_00290094_015-171x300.jpg 171w, \/wp-content\/uploads\/2022\/10\/PID_00290094_015-583x1024.jpg 583w\" sizes=\"(max-width: 715px) 100vw, 715px\" \/><figcaption id=\"caption-attachment-64\" class=\"wp-caption-text\">Figura 15. Formas y sus coordenadas<br \/>Fuente: L. McCarthy; A. P. C. Reas; B. Fry (2015). <em>Getting Started with P5.Js: Making Interactive Graphics in JavaScript and Processing<\/em>. Make Community, LLC.<\/figcaption><\/figure>\n<p>Cuando dibujamos en nuestro <em>canvas<\/em>, la coordenada <em>x <\/em>es la distancia desde el borde izquierdo del <em>canvas<\/em> y la coordenada <em>y<\/em> es la distancia desde la parte superior. Si definimos una coordenada como un punto (<em>x<\/em>, <em>y<\/em>) y nuestro <em>canvas<\/em> tiene 400 \u00d7 400 px, la esquina superior izquierda ser\u00e1 la coordenada (0, 0), el centro del <em>canvas <\/em>ser\u00e1 la coordenada (200, 200) y la esquina inferior derecha ser\u00e1 la coordenada (399, 399). \u00bfPor qu\u00e9 no (400, 400)? Porque el punto (0, 0) es parte de nuestro <em>canvas<\/em>, empezamos a contar desde el cero, algo que programando es muy com\u00fan.<\/p>\n<figure id=\"attachment_66\" aria-describedby=\"caption-attachment-66\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-66 size-full\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_016.jpg\" alt=\"\" width=\"800\" height=\"615\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_016.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_016-300x231.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_016-768x590.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-66\" class=\"wp-caption-text\">Figura 16. Formas b\u00e1sicas en CodeLab<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Lo primero que debemos hacer para empezar a dibujar es crear nuestro canvas o lienzo. Para ello, dentro de la funci\u00f3n podemos utilizar el m\u00e9todo de la siguiente manera: createCanvas(400, 200); El m\u00e9todo entre sus par\u00e9ntesis acepta dos par\u00e1metros: el tama\u00f1o del lienzo en la dimensi\u00f3n x y su tama\u00f1o en la dimensi\u00f3n y o, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/350"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=350"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/350\/revisions"}],"predecessor-version":[{"id":351,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/350\/revisions\/351"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}