{"id":1971,"date":"2019-07-10T13:54:02","date_gmt":"2019-07-10T11:54:02","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1971"},"modified":"2019-08-17T19:28:04","modified_gmt":"2019-08-17T17:28:04","slug":"3-2-las-funciones-draw-y-setup","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/3-2-las-funciones-draw-y-setup\/","title":{"rendered":"3.2. Las funciones draw()<\/span> y setup()<\/span>"},"content":{"rendered":"

Ya hab\u00edamos comentado en retos anteriores que el c\u00f3digo que ponemos a la funci\u00f3n setup()<\/span> solo se ejecuta una vez, mientras que el que ponemos a la funci\u00f3n draw()<\/span> se ejecuta continuamente. Como explica el libro, la funci\u00f3n draw()<\/span> se ejecuta 60 veces por segundo (m\u00e1s adelante veremos que podemos modificar esta velocidad) y para demostrarlo nos propone ejecutar el c\u00f3digo del ejemplo 5-1:<\/p>\n

function draw() {\r\n  \/\/ Displays the frame count to the console\r\n  print(\"I\u2019m drawing\");\r\n  print(frameCount);\r\n}<\/pre>\n
S\u00ed, sin nada m\u00e1s, sin funci\u00f3n\u00a0setup()<\/span>.<\/p>\n
Este programa escribir\u00e1 a la consola JavaScript la frase \u00abI\u2019m drawing\u00bb y el n\u00famero de fotogramas que se han ejecutado. La variable frameCount<\/span> guarda el n\u00famero de fotogramas que se han visualizado desde el comienzo de la ejecuci\u00f3n del c\u00f3digo. Como hemos visto, por defecto se visualizan 60 fotogramas por segundo.<\/p>\n
\"\"<\/p>\n
En esta captura de pantalla pod\u00e9is ver c\u00f3mo se va escribiendo el texto en la consola cada vez que se ejecuta la funci\u00f3n\u00a0draw()<\/span>.<\/p>\n
El ejemplo 5-2 propone una cosa parecida, pero usando la funci\u00f3n setup()<\/span> y la funci\u00f3n draw()<\/span> para comparar los resultados. Seguro que sin ejecutar el programa ya os hac\u00e9is una idea de qu\u00e9 es lo que pasar\u00e1.<\/p>\n
Al final de este ejemplo nos explica los tres lugares donde podemos poner c\u00f3digo en un programa p5.js:<\/p>\n
    \n
  1. Fuera de setup()<\/span> y draw()<\/span> pondremos las declaraciones de variables.<\/li>\n
  2. Dentro de setup()<\/span> pondremos el c\u00f3digo que solo se tenga que ejecutar una vez.<\/li>\n
  3. Dentro de draw()<\/span> pondremos el c\u00f3digo que se ejecuta continuamente.<\/li>\n<\/ol>\n
    Como el resto de ejemplos del cap\u00edtulo 5 son bastante claros, os recomendamos que los hag\u00e1is todos. A continuaci\u00f3n, os hacemos unas breves aclaraciones de puntos que pensamos pueden generar alguna duda.<\/p>\n
    Para probar estos ejemplos, pod\u00e9is usar el editor de p5.js.<\/p>\n
    La posici\u00f3n del rat\u00f3n<\/h2>\n
    Los ejemplos 5-4 y 5-5 son muy parecidos. En los dos casos en la funci\u00f3n setup()<\/span> creamos el canvas<\/em>, definimos el color (negro) y la transparencia (102 sobre 255) con la instrucci\u00f3n\u00a0fill()<\/span><\/a> y decimos que no querremos bordes con la instrucci\u00f3n\u00a0noStroke()<\/span><\/a>. La \u00fanica diferencia entre los dos ejemplos es el llamamiento a la funci\u00f3n background()<\/span> al comienzo de la funci\u00f3n draw()<\/span>. Esta funci\u00f3n vuelve a pintar todo el fondo del color indicado, borrando lo que hubiera antes.<\/p>\n
    En los dos ejemplos en la funci\u00f3n draw()<\/span> solo tenemos una instrucci\u00f3n:<\/p>\n
    ellipse(mouseX, mouseY, 9, 9);<\/pre>\n
    \u00bfQu\u00e9 significa esto? \u00bfQu\u00e9 son las variables mouseX <\/span>y\u00a0 mouseY<\/span>?<\/p>\n
    Bien, es f\u00e1cil suponer que estas dos variables nos dicen cu\u00e1l es la posici\u00f3n del rat\u00f3n en el momento actual. As\u00ed, el c\u00f3digo del ejemplo dibuja un c\u00edrculo all\u00ed donde est\u00e1 el rat\u00f3n. Como la funci\u00f3n draw()<\/span> se repite sesenta veces por segundo, se dibujan 60 c\u00edrculos cada segundo. Y, as\u00ed, si movemos el rat\u00f3n poco a poco, se dibujar\u00e1 una l\u00ednea bastante negra y, en cambio, si lo movemos r\u00e1pido podemos, incluso, dejar peque\u00f1os espacios entre c\u00edrculos.<\/p>\n
    En el ejemplo 5-4 todo lo que se va dibujando se queda en el canvas<\/em>, mientras que en el ejemplo 5-5, cada vez se pinta el fondo justo antes de dibujar el c\u00edrculo. De este modo, da la sensaci\u00f3n de que el c\u00edrculo se mueve, a pesar de que lo que estamos haciendo es dibujarlo de nuevo cada vez.<\/p>\n
    En el ejemplo 5-6 se introducen las variables pmouseX<\/span> y pmouseY<\/span>. Estas variables nos dicen cu\u00e1l era la posici\u00f3n del rat\u00f3n en el fotograma anterior. As\u00ed, podemos pintar una l\u00ednea continua en vez de solo puntos separados, como hac\u00edamos en el ejemplo anterior. Esta es la instrucci\u00f3n clave:<\/p>\n
    line(mouseX, mouseY, pmouseX, pmouseY);<\/pre>\n
    Dibujamos una l\u00ednea desde la posici\u00f3n actual del rat\u00f3n mouseX<\/span>, mouseY<\/span>, a la posici\u00f3n anterior del rat\u00f3n pmouseX<\/span>, pmouseY<\/span>. \u00bfPodemos dibujar la l\u00ednea a la inversa (de la posici\u00f3n anterior a la actual)? \u00bfHabr\u00eda alguna diferencia? Probadlo.<\/p>\n
    El ejemplo 5-7 es f\u00e1cil de entender, aunque incluye dos funciones nuevas: dist()<\/span><\/a> y strokeWeight()<\/span><\/a>. A pesar de que con el contexto se puede saber bien lo que hacen, recordad que en el manual de referencia de p5.js se puede encontrar completa informaci\u00f3n de estas instrucciones.<\/p>\n
    El ejemplo 5-8 es m\u00e1s complejo no solo por lo que hace, tambi\u00e9n por las instrucciones que usa. Recordad que la instrucci\u00f3n x<\/strong> += y<\/strong> es equivalente a x<\/strong> = x<\/strong> + y<\/strong>.<\/p>\n
    Lo que pretende este ejemplo es mostrar una manera de hacer que el cursor siga al rat\u00f3n lentamente en vez de instant\u00e1neamente, como hace en los ejemplos que hemos visto hasta ahora. De hecho, tal y como est\u00e1 hecho, cuanto m\u00e1s cerca est\u00e1 el rat\u00f3n, m\u00e1s lentamente se acerca el dibujo a \u00e9l.<\/p>\n
    Revisemos este ejemplo:<\/p>\n
    var x = 0;\u00a0\u00a0\u00a0\u00a0     \/\/ Es la posici\u00f3n x donde dibujaremos el c\u00edrculo\r\nvar easing = 0.01; \/\/ Indica cu\u00e1ndo se incrementa la velocidad \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0           \/\/ seg\u00fan cu\u00e1n lejos est\u00e9 el rat\u00f3n\r\n\r\nfunction setup() {\r\n  createCanvas(220, 120);\r\n}\r\n\r\nfunction draw() {\r\n  var targetX = mouseX;\u00a0\u00a0      \/\/ Guardamos la posici\u00f3n x del rat\u00f3n\r\n  x += (targetX - x) * easing; \/\/ Esta es la operaci\u00f3n clave\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0                \/\/ lo explicamos bajo este c\u00f3digo\r\n\r\n  ellipse(x, 40, 12, 12);\r\n  print(targetX + \" : \" + x); \/\/ Escribe en la consola la posici\u00f3n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0                \/\/ x del rat\u00f3n y la x donde dibujamos\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0               \/\/ el c\u00edrculo\r\n}<\/pre>\n
    Empezamos dibujando el c\u00edrculo en la posici\u00f3n x<\/strong>=0. Dentro de la funci\u00f3n draw()<\/span> guardamos la posici\u00f3n x<\/strong> del rat\u00f3n y, para decidir d\u00f3nde dibujaremos el pr\u00f3ximo c\u00edrculo, lo que hacemos es calcular la diferencia de posici\u00f3n entre el rat\u00f3n (targetX<\/span>) y el \u00faltimo c\u00edrculo que hemos dibujado (x<\/strong>) y multiplicarla por esta variable easing <\/span>que har\u00e1 que la distancia sea mayor cuanto mayor sea el valor de esta variable.<\/p>\n
    Probad el ejemplo y probad a cambiar el valor de la variable easing<\/span>. Mirad los valores que se escriben en la consola. Jugad tambi\u00e9n con el tama\u00f1o del canvas<\/em>. Quiz\u00e1s, si lo hacemos m\u00e1s largo podemos ver mejor el efecto (\u00bfcu\u00e1l de los dos valores tenemos que cambiar para cambiar la anchura del canvas<\/em>?).<\/p>\n
    En el ejemplo siguiente, 5-9, a m\u00e1s velocidad, mayor es el c\u00edrculo que se dibuja.<\/p>\n
    Un consejo<\/strong>: a la hora de probar este ejemplo, cambiad el canvas<\/em> para hacerlo de 480 x 480.<\/p>\n<\/div>\n
    La idea es la misma que la del ejercicio anterior e, incluso, puede resultar m\u00e1s clara. Pero el c\u00f3digo es algo m\u00e1s complicado. \u00bfQu\u00e9 hacen tantas variables?<\/p>\n
    Las variables x<\/strong> e y<\/strong> guardan el valor de hasta donde toca dibujar la l\u00ednea.<\/p>\n
    Las variables px<\/strong> y py<\/strong> guardan el valor de la posici\u00f3n anterior donde se dibuj\u00f3 (si os fij\u00e1is guardan los valores de x<\/strong> e y<\/strong> justo antes de acabar la funci\u00f3n draw()<\/span>.<\/p>\n
    Las variables targetX <\/span>y targetY<\/span> se usan para guardar la posici\u00f3n del rat\u00f3n en un momento dado. En realidad, el uso de las variables targetX <\/span>y targetY<\/span> no es imprescindible y podemos hacer lo mismo con este c\u00f3digo algo m\u00e1s simple:<\/p>\n
    var x = 0;\r\nvar y = 0;\r\nvar px = 0;\r\nvar py = 0;\r\nvar easing = 0.05;\r\n\r\nfunction setup() {\r\n      createCanvas(480, 480);\r\n      stroke(0, 102);\r\n}\r\nfunction draw() {\r\n     x += (mouseX - x) * easing;\r\n     y += (mouseY - y) * easing;\r\n     var weight = dist(x, y, px, py);\r\n     strokeWeight(weight);\r\n     line(x, y, px, py);\r\n     py = y;\r\n     px = x;\r\n}<\/pre>\n
    Ahora, cambiad el valor que asignamos a la variable easing<\/span>, poniendo 0.5 en vez de 0.05, y tratad de responder a esta pregunta:<\/p>\n
    \u00bfQu\u00e9 dos cambios se producen cuando modificamos la variable easing<\/span>?<\/p>\n","protected":false},"excerpt":{"rendered":"
    Ya hab\u00edamos comentado en retos anteriores que el c\u00f3digo que ponemos a la funci\u00f3n setup() solo se ejecuta una vez, mientras que el que ponemos a la funci\u00f3n draw() se ejecuta continuamente. Como explica el libro, la funci\u00f3n draw() se ejecuta 60 veces por segundo (m\u00e1s adelante veremos que podemos modificar esta velocidad) y para […]<\/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\/1971"}],"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=1971"}],"version-history":[{"count":14,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1971\/revisions"}],"predecessor-version":[{"id":3875,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1971\/revisions\/3875"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}