{"id":621,"date":"2019-07-05T20:29:29","date_gmt":"2019-07-05T18:29:29","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=621"},"modified":"2019-08-17T19:30:14","modified_gmt":"2019-08-17T17:30:14","slug":"621-2","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/621-2\/","title":{"rendered":"3.2. Les funcions draw()<\/span> i setup()<\/span>"},"content":{"rendered":"

Ja hem comentat en reptes anteriors que el codi que posem a la funci\u00f3 setup()<\/span> nom\u00e9s s\u2019executa un cop, mentre que el que posem a la funci\u00f3 draw()<\/span> s\u2019executa cont\u00ednuament. Com explica el llibre, la funci\u00f3 draw()<\/span> s\u2019executa 60 cops per segon (m\u00e9s endavant veurem que podem modificar aquesta velocitat) i per a demostrar-ho ens proposa executar el codi de l\u2019exemple 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, sense res m\u00e9s, sense la funci\u00f3 setup()<\/span>.<\/p>\n
Aquest programa escriur\u00e0 a la consola JavaScript la frase \u00abI\u2019m drawing\u00bb i el nombre de fotogrames que s\u2019han executat. La variable frameCount<\/span>, guarda el nombre de fotogrames que s\u2019han visualitzat des del comen\u00e7ament de l\u2019execuci\u00f3 del codi. Com hem vist, per defecte, es visualitzen 60 fotogrames per segon.<\/p>\n
\"\"<\/p>\n
En aquesta captura de pantalla podeu veure com es va escrivint el text a la consola cada cop que s\u2019executa la funci\u00f3 draw()<\/span>.<\/p>\n
L\u2019exemple 5-2 proposa una cosa semblant, per\u00f2 fent servir la funci\u00f3 setup()<\/span> i la funci\u00f3 draw()<\/span> per a comparar els resultats. Segur que sense executar el programa ja us feu una idea de qu\u00e8 \u00e9s el que passar\u00e0.<\/p>\n
Al final d\u2019aquest exemple ens explica els tres llocs on podem posar codi en un programa p5.js:<\/p>\n
    \n
  1. Fora de setup()<\/span> i draw()<\/span> posarem les declaracions de variables.<\/li>\n
  2. Dins de setup()<\/span> posarem el codi que nom\u00e9s s\u2019hagi d\u2019executar un cop.<\/li>\n
  3. Dins de draw()<\/span> posarem el codi que s\u2019executa cont\u00ednuament.<\/li>\n<\/ol>\n
    Com que la resta d\u2019exemples del cap\u00edtol 5 s\u00f3n for\u00e7a clars, us recomanem que els feu tots. A continuaci\u00f3, us fem uns breus aclariments de punts que pensem que poden generar algun dubte.<\/p>\n
    Per a provar aquests exemples, podeu feu servir l\u2019editor de p5.js.<\/p>\n
    La posici\u00f3 del ratol\u00ed<\/h2>\n
    Els exemples 5-4 i 5-5 s\u00f3n molt semblants. En tots dos casos a la funci\u00f3 setup()<\/span> creem el canvas<\/em>, definim el color (negre) i la transpar\u00e8ncia (102 sobre 255) amb la instrucci\u00f3 fill()<\/span><\/a> i diem que no voldrem vores amb la instrucci\u00f3 noStroke()<\/span><\/a>. L\u2019\u00fanica difer\u00e8ncia entre els dos exemples \u00e9s la crida a la funci\u00f3 background()<\/span> al comen\u00e7ament de la funci\u00f3 draw()<\/span>. Aquesta funci\u00f3 torna a pintar tot el fons del color indicat, esborrant el que hi hagu\u00e9s abans.<\/p>\n
    En els dos exemples, a la funci\u00f3 draw()<\/span> nom\u00e9s hi tenim una instrucci\u00f3:<\/p>\n
    ellipse(mouseX, mouseY, 9, 9);<\/pre>\n
    Qu\u00e8 significa aix\u00f2? Qu\u00e8 s\u00f3n les variables mouseX <\/span>i mouseY<\/span>?<\/p>\n
    B\u00e9, \u00e9s f\u00e0cil de suposar que aquestes dues variables ens diuen quina \u00e9s la posici\u00f3 del ratol\u00ed en el moment actual. Aix\u00ed, el codi de l\u2019exemple dibuixa un cercle en la posici\u00f3 on hi ha el ratol\u00ed. Com que la funci\u00f3 draw()<\/span> es repeteix 60 cops per segon, es dibuixen 60 cercles cada segon. I, aix\u00ed, si movem el ratol\u00ed a poc a poc, es dibuixar\u00e0 una l\u00ednia for\u00e7a negre i, en canvi, si el movem r\u00e0pid podem, fins i tot, deixar petits espais entre els cercles.<\/p>\n
    En l\u2019exemple 5-4, tot el que es va dibuixant es queda al canvas<\/em>, mentre que en l\u2019exemple 5-5, cada cop es pinta el fons just abans de dibuixar el cercle. D\u2019aquesta manera dona la sensaci\u00f3 que el cercle es mou, tot i que el que estem fent \u00e9s dibuixar-lo de nou cada cop.<\/p>\n
    En l\u2019exemple 5-6, s\u2019introdueixen les variables pmouseX <\/span>i pmouseY<\/span>. Aquestes variables ens diuen quina era la posici\u00f3 del ratol\u00ed en el fotograma anterior. Aix\u00ed, podem pintar una l\u00ednia continua en comptes de nom\u00e9s punts separats com f\u00e8iem en l\u2019exemple anterior. Aquesta \u00e9s la instrucci\u00f3 clau:<\/p>\n
    line(mouseX, mouseY, pmouseX, pmouseY);<\/pre>\n
    Dibuixem una l\u00ednia des de la posici\u00f3 actual del ratol\u00ed mouseX<\/span>, mouseY<\/span>, a la posici\u00f3 anterior del ratol\u00ed pmouseX<\/span>, pmouseY<\/span>. Podem dibuixar la l\u00ednia al rev\u00e9s (de la posici\u00f3 anterior a l\u2019actual)? Hi haur\u00e0 alguna difer\u00e8ncia? Proveu-ho.<\/p>\n
    L\u2019exemple 5-7 \u00e9s f\u00e0cil d\u2019entendre, encara que inclou dues funcions noves: dist()<\/span><\/a> i strokeWeight()<\/span><\/a> Tot i que amb el context es pot saber b\u00e9 el que fan, recordeu que al manual de refer\u00e8ncia de p5.js es pot trobar la informaci\u00f3 completa d\u2019aquestes instruccions.<\/p>\n
    L\u2019exemple 5-8 \u00e9s m\u00e9s complex, no solament pel que fa, sin\u00f3 que tamb\u00e9 per les instruccions que fa servir. Recordeu que la instrucci\u00f3 x <\/strong>+= y<\/strong> \u00e9s equivalent a x <\/strong>= x<\/strong> + y<\/strong>.<\/p>\n
    El que pret\u00e9n aquest exemple \u00e9s mostrar una manera de fer que el cursor segueixi el ratol\u00ed lentament en comptes d\u2019instant\u00e0niament com ho fa en els exemples que hem vist fins ara. De fet, tal com est\u00e0 fet, com m\u00e9s a prop est\u00e0 el ratol\u00ed, m\u00e9s lentament s\u2019apropa el dibuix a aquest.<\/p>\n
    Revisem aquest exemple:<\/p>\n
    var x = 0;\u00a0\u00a0\u00a0\u00a0     \/\/ \u00c9s la posici\u00f3 x on dibuixarem el cercle\r\nvar easing = 0.01; \/\/ Indica quant s\u2019incrementa la velocitat\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0           \/\/ segons com de lluny estigui el ratol\u00ed\r\n\r\nfunction setup() {\r\n  createCanvas(220, 120);\r\n}\r\n\r\nfunction draw() {\r\n  var targetX = mouseX;\u00a0\u00a0      \/\/ Guardem la posici\u00f3 x del ratol\u00ed\r\n  x += (targetX - x) * easing; \/\/ Aquesta \u00e9s l\u2019operaci\u00f3 clau\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0                 \/\/ l\u2019expliquem amb aquest codi\r\n\r\n  ellipse(x, 40, 12, 12);\r\n  print(targetX + \" : \" + x); \/\/ Escriu a la consola la posici\u00f3\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0                \/\/ x del ratol\u00ed i l\u2019x on dibuixem\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0                \/\/ el cercle\r\n}<\/pre>\n
    Comencem dibuixant el cercle en la posici\u00f3 x<\/strong>=0. Dins de la funci\u00f3 draw()<\/span> guardem la posici\u00f3 x<\/em> del ratol\u00ed i, per a decidir on dibuixarem el proper cercle, el que fem \u00e9s calcular la difer\u00e8ncia de posici\u00f3 entre el ratol\u00ed (targetX<\/span>) i el darrer cercle que hem dibuixat (x<\/em>) i la multipliquem per aquesta variable easing <\/span>que far\u00e0 que la dist\u00e0ncia sigui major com m\u00e9s gran sigui el valor d\u2019aquesta variable.<\/p>\n
    Proveu l\u2019exemple i proveu de canviar el valor de la variable easing<\/span>. Mireu els valors que s\u2019escriuen a la consola. Tamb\u00e9 jugueu amb la mida del canvas<\/em>. Potser, si el fem m\u00e9s llarg podem veure millor l\u2019efecte (quin dels dos valors hem de modificar per a canviar l\u2019amplada del canvas<\/em>?).<\/p>\n
    En l\u2019exemple 5-9 seg\u00fcent, a m\u00e9s velocitat major ser\u00e0 el cercle que es dibuixa.<\/p>\n
    Un consell:<\/strong> a l\u2019hora de provar aquest exemple, canvieu el canvas <\/em>per a fer-lo de 480 x 480.<\/p>\n<\/div>\n
    La idea \u00e9s la mateixa que la de l\u2019exercici anterior i, fins i tot, pot resultar m\u00e9s clar. Per\u00f2 el codi \u00e9s una mica m\u00e9s complicat. Qu\u00e8 fan tantes variables?<\/p>\n
    Les variables x<\/strong> i y<\/strong> guarden el valor de fins on toca dibuixar la l\u00ednia.<\/p>\n
    Les variables px<\/strong> i py<\/strong> guarden el valor de la posici\u00f3 anterior on es va dibuixar (si us fixeu, guarden els valors d\u2019x<\/em><\/strong> i y<\/strong> just abans d\u2019acabar la funci\u00f3 draw()<\/span>.<\/p>\n
    Les variables targetX <\/span>i targetY <\/span>es fan servir per a guardar la posici\u00f3 del ratol\u00ed en un moment donat. En realitat, l\u2019\u00fas de les variables targetX <\/span>i targetY <\/span>no \u00e9s imprescindible i podem fer el mateix amb aquest codi una mica m\u00e9s 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
    Ara, canvieu el valor que assignem a la variable easing<\/span>, posant 0.5 en comptes de 0.05, i intenteu respondre aquesta pregunta:<\/p>\n
    Quins dos canvis es produeixen quan modifiquem la variable easing<\/span>?<\/p>\n","protected":false},"excerpt":{"rendered":"
    Ja hem comentat en reptes anteriors que el codi que posem a la funci\u00f3 setup() nom\u00e9s s\u2019executa un cop, mentre que el que posem a la funci\u00f3 draw() s\u2019executa cont\u00ednuament. Com explica el llibre, la funci\u00f3 draw() s\u2019executa 60 cops per segon (m\u00e9s endavant veurem que podem modificar aquesta velocitat) i per a demostrar-ho ens […]<\/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\/wp-json\/wp\/v2\/pages\/621"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/comments?post=621"}],"version-history":[{"count":10,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/621\/revisions"}],"predecessor-version":[{"id":3876,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/621\/revisions\/3876"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}