{"id":947,"date":"2019-07-07T20:43:59","date_gmt":"2019-07-07T18:43:59","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=947"},"modified":"2019-08-17T23:11:19","modified_gmt":"2019-08-17T21:11:19","slug":"4-4-moviment","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/4-4-moviment\/","title":{"rendered":"4.4. Moviment"},"content":{"rendered":"

Segur que recordareu que, tal com ja hem vist, la funci\u00f3 draw()<\/span> es repeteix 60 cops per segon. I tamb\u00e9 que ja hem comentat que aix\u00f2 es pot canviar. La funci\u00f3 que ens permet canviar el nombre de vegades que es repeteix la funci\u00f3 draw()<\/span> per segon es diu frameRate()<\/span><\/a>. Podem fer servir aquesta funci\u00f3 de dues maneres diferents:<\/p>\n

    \n
  1. Podem fer-la servir per a consultar quants cops per segon es repeteix actualment la funci\u00f3 draw()<\/span>.<\/li>\n
  2. Tamb\u00e9 podem fer-la servir per a fixar aquest valor.<\/li>\n<\/ol>\n

    Frame rate<\/em><\/strong> o fotogrames per segon<\/a>, que \u00e9s la traducci\u00f3 m\u00e9s habitual, \u00e9s un concepte que ve del v\u00eddeo i es refereix al nombre de imatges que projecta un reproductor de v\u00eddeo en un segon. \u00c9s un concepte heretat de les pel\u00b7l\u00edcules anal\u00f2giques, per\u00f2 que es continua fent servir en el v\u00eddeo i animacions digitals. Al cinema, per a garantir la continu\u00eftat de la imatge, es fan servir 24 fotogrames per segon.<\/p>\n<\/div>\n

    L\u2019exemple 8-1 del llibre fa servir la primera opci\u00f3: consulta el frameRate()<\/span> i mostra el resultat de la consulta a la consola. Si el feu servir, veureu que no sempre dona el mateix resultat, que va variant entre 55 i 65 aproximadament.<\/p>\n

    <\/p>\n

    Fotogrames a p5.js<\/strong><\/p>\n

    p5.js intenta que el nombre de fotogrames per segon sigui 60. Per\u00f2 aix\u00f2 dep\u00e8n de moltes coses: la velocitat del processador, de tot all\u00f2 que s\u2019estigui executant a l\u2019ordinador, del navegador (no tots els navegadors executen JavaScript de la mateixa manera), del codi que hi hagi dins de draw()<\/span>. p5.js s\u2019ha de \u00abbarallar\u00bb amb totes aquestes possibilitats per a aconseguir que el nombre de fotogrames sigui l\u2019indicat i es mantingui estable. Aix\u00f2 \u00e9s for\u00e7a complicat, per la qual cosa el valor fluctua.<\/p>\n

    \n<\/div>\n

    L\u2019exemple 8-2 afegeix la segona opci\u00f3 a la funci\u00f3 setup()<\/span> i ens suggereix canviar el valor dels fotogrames per segon a nombres m\u00e9s baixos. Feu-ho i comproveu com es comporta a diferents velocitats.<\/p>\n

    Velocitat i direcci\u00f3<\/h2>\n

    Les nostres animacions tindran diferents objectes que es poden moure a diferents velocitats, de manera que tenint el nombre de fotogrames per segon de base, haurem de fer servir variables per a determinar la velocitat de cada objecte. Una cosa semblant passar\u00e0 amb la direcci\u00f3 en qu\u00e8 es mouen els objectes.<\/p>\n

    L\u2019exemple 8-3 \u00e9s un bon exemple de moviment fluid on fem servir una variable, speed<\/span>, per a determinar la velocitat de l\u2019objecte. Modificant el valor d\u2019aquesta variable, l\u2019objecte es mou m\u00e9s r\u00e0pid o m\u00e9s a poc a poc (proveu a modificar el valor d\u2019speed<\/span> a 1 i a 0.25).<\/p>\n

    El moviment va d\u2019esquerra a dreta gr\u00e0cies a la modificaci\u00f3 de la variable x<\/strong> que ens marca la posici\u00f3 horitzontal. Quan l\u2019x<\/strong> t\u00e9 un valor superior al l\u00edmit dret del canvas<\/em>, l\u2019objecte es deixa de veure.<\/p>\n

    Un darrer detall interessant, malgrat ja ho hem vist, \u00e9s el fet que pintant el fons de nou cada cop, esborrem la figura ja dibuixada abans de dibuixar-ne una de nova.<\/p>\n

    A partir d\u2019aquest exemple b\u00e0sic, es poden fer diverses variacions. Aix\u00ed l\u2019exemple 8-4 fa que quan la variable x<\/strong> t\u00e9 un valor m\u00e9s gran que la mida horitzontal del canvas<\/em> m\u00e9s el radi de la figura (aix\u00f2 vol dir que la figura haur\u00e0 desaparegut), li posa el valor inicial perqu\u00e8 torni a sortir per la dreta. Aquesta variaci\u00f3 es fa amb aquest codi:<\/p>\n

    if (x > width+radius) { \/\/ Si la imatge surt del canvas\r\n x = -radius;     \/\/ la movem a l\u2019esquerra.\r\n}<\/pre>\n
    I l\u2019exemple 8-5 fa que reboti quan arriba al final. Com podeu veure, el rebot implica dues coses: primer canviar la direcci\u00f3 (que no \u00e9s m\u00e9s que fer la velocitat negativa) i, despr\u00e9s, canviar la figura perqu\u00e8 la boca apunti a la dreta.<\/p>\n
    x += speed * direction; \/\/ Si direction \u00e9s 1 es mou d\u2019esquerra\r\n            \/\/ a dreta.\r\n            \/\/ Si direction \u00e9s -1 es mou de dreta\r\n            \/\/ a esquerra.\r\nif ((x > width - radius) || (x < radius)) {\r\n direction = -direction; \/\/ Canviar la direcci\u00f3\r\n}\r\nif (direction == 1) {\r\n arc(x, 60, radius, radius, 0.52, 5.76); \/\/ Cap a la dreta\r\n} else {\r\n arc(x, 60, radius, radius, 3.67, 8.9); \/\/ Cap a la esquerra\r\n}<\/pre>\n
    Movent-se en qualsevol direcci\u00f3<\/h2>\n
    Moure un objecte de dreta a esquerra \u00e9s f\u00e0cil. En general, qualsevol moviment horitzontal o vertical ser\u00e0 f\u00e0cil de simular perqu\u00e8 nom\u00e9s caldr\u00e0 modificar la posici\u00f3 x<\/strong> o la posici\u00f3 y<\/strong>. Per\u00f2 si volem moure un objecte en una direcci\u00f3 que no sigui l\u2019horitzontal o la vertical, caldr\u00e0 modificar x<\/strong> i y<\/strong> de manera que el moviment sembli suau, per la qual cosa caldr\u00e0 calcular quina posici\u00f3 haur\u00e0 de tenir l\u2019objecte en cada moment.<\/p>\n
    Aquest c\u00e0lcul que ens permet dibuixar l\u2019objecte on toca quan toca, rep el nom, en angl\u00e8s, de tweening<\/em><\/strong> i, en catal\u00e0, li direm interpolar<\/strong><\/a> (posar una cosa entre altres).<\/p>\n<\/div>\n
    Veient el codi de l\u2019exemple 8-6 del llibre, ens pot semblar que la interpolaci\u00f3 \u00e9s una cosa complicada. Per\u00f2 no \u00e9s aix\u00ed. Vegem l\u2019exemple pas a pas per a veure que no \u00e9s complicat.<\/p>\n
    <\/strong><\/p>\n
    Fe d\u2019errades<\/strong><\/p>\n
    Al llibre hi ha una errada a la instrucci\u00f3:<\/p>\n
    y = startY + ((stopY-startX) * pct);<\/pre>\n
    Com que estem calculant la posici\u00f3 de l\u2019y<\/strong>, startX<\/span> hauria de ser en realitat startY<\/span> i, per tant, la instrucci\u00f3 hauria de ser aquesta:<\/p>\n
    y = startY + ((stopY-startY) * pct);<\/pre>\n
    Farem servir aquesta versi\u00f3 corregida en aquesta guia.<\/p>\n<\/div><\/p>\n
    El primer que fa l\u2019exemple \u00e9s declarar les variables que fa servir: vuit! B\u00e9, fem un rep\u00e0s de qu\u00e8 fa cadascuna d\u2019aquestes. Comencem per les quatre primeres que s\u00f3n les m\u00e9s f\u00e0cils d\u2019entendre i indiquen la posici\u00f3 inicial i final de l\u2019objecte:<\/p>\n
    var startX = 20; \/\/ Indica la posici\u00f3 x inicial\r\nvar stopX = 160; \/\/ Indica la posici\u00f3 x final \r\nvar startY = 30; \/\/ Indica la posici\u00f3 y inicial\r\nvar stopY = 80; \/\/ Indica la posici\u00f3 y final<\/pre>\n
    Les dues seg\u00fcents tamb\u00e9 s\u00f3n f\u00e0cils d\u2019entendre: indiquen la posici\u00f3 actual de l\u2019objecte:<\/p>\n
    var x = startX; \/\/ Posici\u00f3 x actual\r\nvar y = startY; \/\/ Posici\u00f3 y actual<\/pre>\n
    Nom\u00e9s ens en queden dues que s\u00f3n una mica m\u00e9s complicades:<\/p>\n
    var step = 0.005; \/\/ Mida de cada pas que fem (de 0.0 fins a 1.0)\r\nvar pct = 0.0;  \/\/ Percentatge ja fet (0.0 to 1.0)<\/pre>\n
    De les dues variables, pct<\/span> \u00e9s potser la m\u00e9s clara. Ens indica quin percentatge de recorregut ja hem fet. Comen\u00e7arem per 0 (per aix\u00f2 sempre la inicialitzarem a 0.0) i acabarem quan sigui 1.0.<\/p>\n
    step<\/span> \u00e9s potser la variable m\u00e9s complicada d\u2019entendre. Determina la mida de cada pas que farem i, a la pr\u00e0ctica, quants passos farem per anar d\u2019un lloc a un altre. Si ens fixem en el codi que hi ha a la funci\u00f3 draw()<\/span>, a cada volta el percentatge que hem avan\u00e7at s\u2019incrementa la quantitat guardada a la variable step<\/span>.<\/p>\n
    Com que anem de 0 a 1 en increments de 0.005, aix\u00f2 en realitat significa que farem 200 passos abans d\u2019arribar al dest\u00ed (0.005 * 200 \u21d2 1).<\/p>\n
    Vegem ara el codi de la funci\u00f3 draw()<\/span>:<\/p>\n
    function draw() {\r\n background(0);\r\n if (pct < 1.0) {\r\n  x = startX + ((stopX-startX) * pct); \/\/ nova posici\u00f3 x\r\n  y = startY + ((stopY-startY) * pct); \/\/ nova posici\u00f3 y\r\n  pct += step;\r\n }\r\n ellipse(x, y, 20, 20);\r\n}<\/pre>\n
    Fem una breu simulaci\u00f3 de com funcionaria el programa.<\/p>\n
    Valors inicials:<\/p>\n
    var startX = 20; \/\/ Indica la posici\u00f3 x inicial\r\nvar stopX = 160; \/\/ Indica la posici\u00f3 x final \r\nvar startY = 30; \/\/ Indica la posici\u00f3 y inicial\r\nvar stopY = 80; \/\/ Indica la posici\u00f3 y final \r\nvar step = 0.005; \/\/ Mida de cada pas que fem (de 0.0 fins a 1.0)\r\nvar pct = 0.0;  \/\/ Percentatge ja fet (0.0 to 1.0)<\/pre>\n\n\n\n\n\n\n\n\n
    N\u00fam. execucions
    \n draw()<\/span><\/th>\n    		Valors de la variable
    \n pct<\/span>
    \nquan entra en la funci\u00f3
    \n draw()<\/span><\/th>\n    		Valors de les variables x<\/em> i y<\/em> calculades dins l\u2019
    \n if
    \nx = startX + ((stopX-startX) * pct);
    \ny = startY + ((stopY-startY) * pct);<\/span><\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n0<\/td>\nx<\/em> = 20 + ((160 – 20) * 0) \u21d2 0
    \ny<\/em> = 30 + ((80 – 30) * 0) \u21d2 0<\/td>\n<\/tr>\n
    2<\/td>\n0.005<\/td>\nx<\/em> = 20 + ((160 – 20) * 0.005) \u21d2 20.7 (21)
    \ny<\/em> = 30 + ((80 – 30) * 0.005) \u21d2 30.25 (30)<\/td>\n<\/tr>\n
    3<\/td>\n0.010<\/td>\nx<\/em> = 20 + ((160 – 20) * 0.010) \u21d2 21.4 (21)
    \ny<\/em> = 30 + ((80 – 30) * 0.010) \u21d2 30.5 (31)<\/td>\n<\/tr>\n
    4<\/td>\n0.015<\/td>\nx<\/em> = 20 + ((160 – 20) * 0.015) \u21d2 22.1 (22)
    \ny<\/em> = 30 + ((80 – 30) * 0.015) \u21d2 30.75 (31)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Cada posici\u00f3 de l\u2019x<\/strong>la calculem sumant a la posici\u00f3 inicial la dist\u00e0ncia a rec\u00f3rrer (posici\u00f3 final menys posici\u00f3 inicial) multiplicat pel percentatge que hem recorregut.<\/p>\n
    Com que treballem en p\u00edxels (i els p\u00edxels no es poden dividir) l\u2019ordinador autom\u00e0ticament fa un arrodoniment, que \u00e9s el valor que hem posat entre par\u00e8ntesi al costat del resultat.<\/p>\n
    Exercicis<\/h3>\n
    Per a entendre b\u00e9 aquest exemple, val la pena provar de canviar algunes coses. Aqu\u00ed hi ha unes quantes propostes:<\/p>\n