{"id":358,"date":"2022-10-04T14:03:27","date_gmt":"2022-10-04T12:03:27","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=358"},"modified":"2022-10-04T14:03:27","modified_gmt":"2022-10-04T12:03:27","slug":"2-8-propiedades-de-las-formas","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/2-8-propiedades-de-las-formas\/","title":{"rendered":"2.8. Propiedades de las formas"},"content":{"rendered":"<p>A la hora de dibujar nuestras formas, hay ciertos m\u00e9todos que podemos utilizar para cambiar su apariencia.<\/p>\n<h3>Grosor del trazo<\/h3>\n<p>El grosor del trazo por defecto es de 1 px, pero lo podemos cambiar con el m\u00e9todo <span class=\"courier\">strokeWeight()<\/span> d\u00e1ndole como par\u00e1metro entre sus par\u00e9ntesis el grosor deseado en p\u00edxeles. Si no queremos trazo en nuestras figuras, tambi\u00e9n podemos usar el m\u00e9todo <span class=\"courier\">noStroke()<\/span>.<\/p>\n<figure id=\"attachment_72\" aria-describedby=\"caption-attachment-72\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-72\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_019.jpg\" alt=\"\" width=\"800\" height=\"384\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_019.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_019-300x144.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_019-768x369.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-72\" class=\"wp-caption-text\">Figura 19. Grosor del trazo<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<h3>Uniones y final del trazo<\/h3>\n<p>Adem\u00e1s del grosor, tambi\u00e9n podemos variar el tipo de uni\u00f3n entre trazos y su remate final utilizando los m\u00e9todos <span class=\"courier\">strokeJoin()<\/span> y <span class=\"courier\">strokeCap()<\/span> respectivamente.<\/p>\n<figure id=\"attachment_74\" aria-describedby=\"caption-attachment-74\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-74\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_020.jpg\" alt=\"\" width=\"800\" height=\"412\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_020.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_020-300x155.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_020-768x396.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-74\" class=\"wp-caption-text\">Figura 20. Uniones y final del trazo<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<h3>Modos de dibujo<\/h3>\n<p>Para muchas de las formas b\u00e1sicas, podemos cambiar el modo como sus par\u00e1metros definen las coordenadas donde se dibujan, lo cual puede resultarnos \u00fatil en determinados contextos.<\/p>\n<figure id=\"attachment_76\" aria-describedby=\"caption-attachment-76\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-76\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_021.jpg\" alt=\"\" width=\"800\" height=\"335\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_021.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_021-300x126.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_021-768x322.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-76\" class=\"wp-caption-text\">Figura 21. Modos de dibujo<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>Pese a que las dos elipses anteriores tienen los mismos par\u00e1metros <span class=\"courier\">ellipse(200, 200, 100, 100)<\/span> se dibujan en distintas posiciones del <em>canvas<\/em>, ya que su modo de dibujo es diferente.<\/p>\n<p>Pod\u00e9is consultar <span class=\"courier\">ellipseMode()<\/span> y <span class=\"courier\">rectMode()<\/span> en la referencia de P5 para ver los distintos modos de dibujo.<\/p>\n<p>Todas estas propiedades, una vez definidas, afectan a todas las formas que dibujemos a continuaci\u00f3n, a no ser que volvamos a definirlas. Si son propiedades que se van a mantener durante todo nuestro dibujo, tambi\u00e9n podemos definirlas en el <span class=\"courier\">setup()<\/span>, que se ejecuta una \u00fanica vez al principio.<\/p>\n<figure id=\"attachment_78\" aria-describedby=\"caption-attachment-78\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-78\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_022.jpg\" alt=\"\" width=\"800\" height=\"331\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_022.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_022-300x124.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_022-768x318.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-78\" class=\"wp-caption-text\">Figura 22. Modos de dibujo y orden de ejecuci\u00f3n<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>A la hora de dibujar nuestras formas, hay ciertos m\u00e9todos que podemos utilizar para cambiar su apariencia. Grosor del trazo El grosor del trazo por defecto es de 1 px, pero lo podemos cambiar con el m\u00e9todo d\u00e1ndole como par\u00e1metro entre sus par\u00e9ntesis el grosor deseado en p\u00edxeles. Si no queremos trazo en nuestras figuras, [&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\/358"}],"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=358"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/358\/revisions"}],"predecessor-version":[{"id":359,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/358\/revisions\/359"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}