Abrimos el editor en l\u00ednea de p5.js y autom\u00e1ticamente se carga con este c\u00f3digo:<\/p>\n
function setup<\/span>() {\r\n createCanvas<\/span>(400, 400);\r\n}\r\nfunction draw<\/span>() {\r\n background<\/span>(220);\r\n}<\/pre>\nEn la funci\u00f3n setup()<\/span> estamos creando el espacio donde dibujaremos, el canvas<\/em>, de un tama\u00f1o de 400 p\u00edxeles de anchura y 400 de altura.<\/p>\nProbad a cambiar la anchura a 600 p\u00edxeles y ejecutad el programa. Fijaos en c\u00f3mo crece el recuadro del canvas<\/em>. Volved a poner la anchura a 400 p\u00edxeles.<\/p>\n<\/div>\nEn la funci\u00f3n draw()<\/span> seleccionamos el color de fondo del canvas<\/em>. M\u00e1s adelante, en este mismo cap\u00edtulo, veremos c\u00f3mo pintar con diferentes colores.<\/p>\nVamos al libro y copiamos el ejemplo 3-2. Lo que hacemos es dibujar un canvas<\/em> de 480 puntos de anchura y 120 de altura. Despu\u00e9s pintamos el canvas<\/em> de color gris y dibujamos un punto en la posici\u00f3n horizontal 240 y vertical 60\u2026 p\u00edxeles, est\u00e1 claro.<\/p>\nfunction setup<\/span>() {\r\n createCanvas<\/span>(480, 120);\r\n}\r\n\r\nfunction draw<\/span>() {\r\n background<\/span>(204);\r\n point<\/span>(240, 60);\r\n}<\/pre>\nUn p\u00edxel es un punto muy peque\u00f1o, as\u00ed que cuesta un poco verlo. Pero est\u00e1 justo en el medio.<\/p>\n
El sistema de coordenadas<\/h3>\n
Vamos a hacer una peque\u00f1a prueba. En el ejercicio anterior, cambiamos la posici\u00f3n donde dibujamos el punto:<\/p>\n
point<\/span>(10, 60);<\/pre>\nEl punto lo encontraremos ahora en la parte izquierda del canvas<\/em>. Y a la misma altura vertical. Lo cambiamos de nuevo:<\/p>\npoint<\/span>(10, 10);<\/pre>\nAhora lo tenemos en la parte superior izquierda. Podemos hacer m\u00e1s pruebas con diferentes posiciones, pero ya podemos ver que el sistema de coordenadas de p5.js pone la posici\u00f3n 0, 0 (si empezamos por 0) arriba a la izquierda y, por lo tanto, en este canvas<\/em>, la \u00faltima posici\u00f3n, en la parte de abajo, a la derecha, ser\u00e1 la posici\u00f3n 479, 119.<\/p>\nProbad a cambiar el punto de lugar y comprobad si aparece en el lugar donde cre\u00e9is que tiene que aparecer. \u00bfQu\u00e9 pasa si ponemos el punto en la posici\u00f3n 480, 120?<\/p>\n<\/div>\n
Figuras b\u00e1sicas<\/h3>\n
En la p\u00e1gina 20 tenemos las funciones que nos permiten dibujar las figuras b\u00e1sicas a partir de las cuales podemos hacer casi cualquier dibujo. No las explicaremos aqu\u00ed porque est\u00e1n todas explicadas en el libro; solo cabe advertir algunos puntos a tener presente:<\/p>\n
\n- x<\/strong> e y<\/strong> siempre representan coordenadas. La x<\/strong>, la posici\u00f3n horizontal, y la y<\/strong>, la vertical.<\/li>\n
- Hay figuras que las dibujamos a partir de los v\u00e9rtices. Se indican todos los v\u00e9rtices de la figura y se dibujan l\u00edneas de punto a punto.<\/li>\n
- Los rect\u00e1ngulos, sin embargo, se dibujan a partir de la coordenada de su v\u00e9rtice superior izquierda y despu\u00e9s se indican los p\u00edxeles de anchura y de altura (por este orden).<\/li>\n
- Las elipses se dibujan de una manera parecida a los rect\u00e1ngulos. Tenemos unas coordenadas y la anchura y la altura. Pero, en este caso, las coordenadas indican el centro de la elipse.<\/li>\n
- La figura m\u00e1s complicada de todas es el arco.<\/li>\n<\/ul>\n
El siguiente paso que hay que hacer es probar todos los ejemplos que est\u00e1n en el libro, del 3-3 al 3-6.<\/p>\n
Par\u00e9monos un momento en el ejemplo 3-6. Y en particular en esta instrucci\u00f3n:<\/p>\n
ellipse<\/span>(278, -100, 400, 400);<\/pre>\n\u00bfQu\u00e9 quiere decir que la posici\u00f3n y<\/strong> del centro de la elipse sea -100? Pues que el centro de la elipse est\u00e1 fuera del canvas<\/em>, 100 puntos por encima de su l\u00edmite superior. S\u00ed, podemos \u00abpintar\u00bb fuera del canvas<\/em>.<\/p>\nLa funci\u00f3n arc()<\/span><\/h4>\nEl ejemplo 3-7 usa la funci\u00f3n arc()<\/span>.<\/p>\nPodemos recurrir a esta funci\u00f3n usando radianes o grados seg\u00fan nos sea m\u00e1s \u00fatil. Para poder usar radianes, p5.js tiene definidas un conjunto de constantes relacionadas con el n\u00famero pi. En la figura 3-2 del libro se puede apreciar un c\u00edrculo donde se ven todas las posiciones tanto en radianes como en grados.<\/p>\n
Para empezar nos tenemos que fijar en que la posici\u00f3n 0 se encuentra a la derecha del c\u00edrculo (en un reloj ser\u00edan las 3). Pi se encuentra justo en el otro lado; por lo tanto, si vamos de 0 a pi, dibujaremos un semic\u00edrculo. Prob\u00e9moslo:<\/p>\n
function setup<\/span>() {\r\n createCanvas<\/span>(480, 120);\r\n}\r\n\r\nfunction draw<\/span>() {\r\n background<\/span>(204);\r\n arc<\/span>(90, 60, 80, 80, 0, PI);\r\n}<\/pre>\nHay que recordar lo siguiente:<\/p>\n
arc<\/span>(x, y, width, height, inicioDibujo, finalDibujo<\/span>);<\/pre>\n\n- Los dos primeros n\u00fameros son las coordenadas del centro del c\u00edrculo (o elipse).<\/li>\n
- Los dos siguientes son la anchura y la altura (son iguales \u21d2 es un c\u00edrculo).<\/li>\n
- El quinto indica d\u00f3nde empezamos a dibujar (en el punto 0).<\/li>\n
- El sexto indica hasta d\u00f3nde dibujamos (en el punto pi).<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_007.jpg\")
<\/p>\n
Esto es lo que hemos dibujado. Repasemos ahora las constantes que tiene definidas p5.js:<\/p>\n
\n- PI: el n\u00famero pi.<\/li>\n
- TWO_PI: el n\u00famero pi por 2. Equivale al punto 0. Puede ser \u00fatil en algunas ocasiones.<\/li>\n
- HALF_PI: el n\u00famero pi dividido por 2. Pensemos en un reloj. Si 0 equivale a las 3 y pi equivale a las 9, medio pi equivale a las 6.<\/li>\n
- QUARTER_PI: el n\u00famero pi dividido por 4.<\/li>\n<\/ul>\n
Con estas constantes podemos dividir un c\u00edrculo en 8 partes y dibujar cualquier arco que englobe cualquier conjunto continuo de estas partes. Evidentemente, no hace falta que nos quedemos con estas constantes y podr\u00edamos ser m\u00e1s meticulosos. Un ejemplo:<\/p>\n
function setup<\/span>() {\r\n createCanvas<\/span>(480, 120);\r\n}\r\n\r\nfunction draw<\/span>() {\r\n background<\/span>(204);\r\n arc<\/span>(90, 60, 80, 80, PI<\/span>+HALF_PI<\/span>,0);\r\n arc<\/span>(180, 60, 80, 80, PI<\/span>+HALF_PI<\/span>,(PI<\/span>\/6));\r\n arc<\/span>(270, 60, 80, 80, PI<\/span>+HALF_PI<\/span>,(PI<\/span>\/3));\r\n arc<\/span>(360, 60, 80, 80, PI<\/span>+HALF_PI<\/span>,HALF_PI<\/span>);\r\n}<\/pre>\nEste c\u00f3digo dibujar\u00e1 esto:<\/p>\n
![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/06\/PID_00258586_008.jpg\")
<\/p>\n
Lo cual, si lo vemos como un reloj, equivale a las 12:15, las 12:20, las 12:25 y las 12:30.<\/p>\n
Usando grados<\/h4>\n
Si no nos gusta esto de usar radianes, tambi\u00e9n podemos usar grados, teniendo en cuenta que dividimos el c\u00edrculo en 360 grados y que la posici\u00f3n cero, de nuevo, est\u00e1 en la parte derecha del c\u00edrculo. Para usar los grados, podemos, o bien usar la funci\u00f3n radiants()<\/span>, que hace la conversi\u00f3n de grados a radianes, o bien, tal como se explica en el ejemplo 3-9, podemos indicar, en la funci\u00f3n setup()<\/span>, que trabajaremos siempre con grados, usando la funci\u00f3n angleMode(DEGREES)<\/span>.<\/p>\nSuperposici\u00f3n de figuras<\/h3>\n
No tiene ning\u00fan misterio. Las figuras se pintan seg\u00fan se ejecuta la instrucci\u00f3n correspondiente. Por lo tanto, si dibujamos primero un c\u00edrculo y despu\u00e9s un rect\u00e1ngulo, el rect\u00e1ngulo estar\u00e1 por encima del c\u00edrculo.<\/p>\n
Propiedades de las figuras<\/h3>\n
Podemos cambiar diferentes propiedades de las figuras. Algunas (enlazadas a su explicaci\u00f3n en el manual de referencia de p5.js) son:<\/p>\n
\n- La funci\u00f3n noStroke()<\/span><\/a> elimina el borde de las figuras.<\/li>\n
- La funci\u00f3n strokeWeight()<\/span><\/a> nos permite determinar la anchura del borde de las figuras.<\/li>\n
- Con la funci\u00f3n strokeJoin()<\/span><\/a> podemos hacer que los \u00e1ngulos sean redondeados.<\/li>\n
- La funci\u00f3n strokeCap()<\/span><\/a> determina c\u00f3mo es el final de las l\u00edneas.<\/li>\n
- La funci\u00f3n rectMode()<\/span><\/a> nos permite determinar c\u00f3mo se tienen que interpretar los par\u00e1metros que recibe la funci\u00f3n rect()<\/span>. Mirad el manual de referencia para tener m\u00e1s informaci\u00f3n.<\/li>\n
- La funci\u00f3n ellipseMode()<\/span><\/a> nos permite determinar c\u00f3mo se tienen que interpretar los par\u00e1metros que recibe la funci\u00f3n ellipse()<\/span>. Mirad el manual de referencia para tener m\u00e1s informaci\u00f3n.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
El cap\u00edtulo 3: Dibujar Si no lo hab\u00e9is hecho ya, lo primero que haremos ser\u00e1 leer la primera p\u00e1gina de este cap\u00edtulo del libro. Nos explica qu\u00e9 es esto del canvas y c\u00f3mo se define su tama\u00f1o. \u00bfDudas? \u00a1Usad el foro del aula! Abrimos el editor en l\u00ednea de p5.js y autom\u00e1ticamente se carga con […]<\/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\/3627"}],"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=3627"}],"version-history":[{"count":8,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/3627\/revisions"}],"predecessor-version":[{"id":4179,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/3627\/revisions\/4179"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=3627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}