{"id":2011,"date":"2019-07-10T18:00:16","date_gmt":"2019-07-10T16:00:16","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=2011"},"modified":"2019-08-17T23:11:21","modified_gmt":"2019-08-17T21:11:21","slug":"4-4-movimiento","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/4-4-movimiento\/","title":{"rendered":"4.4. Movimiento"},"content":{"rendered":"

Seguro que record\u00e1is que hab\u00edamos visto ya que la funci\u00f3n\u00a0draw()<\/span> se repite 60 veces por segundo. Y tambi\u00e9n que hab\u00edamos dicho que esto se puede cambiar. La funci\u00f3n que nos permite cambiar el n\u00famero de veces que se repite la funci\u00f3n\u00a0draw()<\/span> por segundo se llama\u00a0frameRate()<\/span><\/a>. Podemos usar esta funci\u00f3n de dos maneras diferentes:<\/p>\n

    \n
  1. Podemos usarla para consultar cu\u00e1ntas veces por segundo se repite actualmente la funci\u00f3n\u00a0draw()<\/span>.<\/li>\n
  2. Tambi\u00e9n podemos usarla para fijar este valor.<\/li>\n<\/ol>\n

    Frame rate<\/em><\/strong> o fotogramas por segundo<\/a>, que es la traducci\u00f3n m\u00e1s habitual, es un concepto que viene del v\u00eddeo y se refiere al n\u00famero de im\u00e1genes que proyecta un reproductor de v\u00eddeo en un segundo. Es un concepto heredado de las pel\u00edculas anal\u00f3gicas, pero que se contin\u00faa usando en el v\u00eddeo y animaciones digitales. En el cine, para garantizar la continuidad de la imagen, se usan 24 fotogramas por segundo.<\/p>\n<\/div>\n

    El ejemplo 8-1 del libro usa la primera opci\u00f3n; consultad el frameRate()<\/span> y mostrad el resultado de la consulta en la consola. Si lo us\u00e1is, ver\u00e9is que no siempre da el mismo resultado, que va variando entre 55 y 65 aproximadamente.<\/p>\n

    <\/p>\n

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

    p5.js intenta que el n\u00famero de fotogramas por segundo sean 60. Pero esto depende de muchas cosas: la velocidad del procesador, de todo aquello que se est\u00e9 ejecutando en el ordenador, del navegador (no todos los navegadores ejecutan JavaScript del mismo modo), del c\u00f3digo que haya dentro de draw()<\/span>. p5.js tiene que \u00abpelearse\u00bb con todas estas posibilidades para conseguir que el n\u00famero de fotogramas sea el indicado y se mantenga estable. Esto es bastante complicado y por eso el valor fluct\u00faa.<\/p>\n

    \n<\/div>\n

    En el ejemplo 8-2 se a\u00f1ade, a la funci\u00f3n\u00a0setup()<\/span> la segunda opci\u00f3n y nos sugiere cambiar el valor de fotogramas por segundo a n\u00fameros m\u00e1s bajos. Hacedlo y comprobad c\u00f3mo se comporta a diferentes velocidades.<\/p>\n

    Velocidad y direcci\u00f3n<\/span><\/h2>\n

    Nuestras animaciones tendr\u00e1n diferentes objetos que se pueden mover a diferentes velocidades, de forma que teniendo el n\u00famero de fotogramas por segundo de base, tendremos que usar variables para determinar la velocidad de cada objeto. Una cosa parecida pasar\u00e1 con la direcci\u00f3n en que se mueven los objetos.<\/p>\n

    El ejemplo 8-3 es un buen ejemplo de movimiento fluido donde usamos una variable, speed<\/span>, para determinar la velocidad del objeto. Modificando el valor de esta variable, el objeto se mueve m\u00e1s r\u00e1pido o m\u00e1s despacio (probad a modificar el valor de\u00a0speed<\/span> a 1 y a 0.25).<\/p>\n

    El movimiento va de izquierda a derecha gracias a la modificaci\u00f3n de la variable x<\/strong>, que nos marca la posici\u00f3n horizontal. Cuando la x<\/strong> tiene un valor superior al l\u00edmite derecho del canvas<\/em>, el objeto se deja de ver.<\/p>\n

    Un \u00faltimo detalle interesante, a pesar de que ya lo hab\u00edamos visto, es el hecho de que pintando el fondo de nuevo cada vez, borramos la figura ya dibujada antes de dibujar una nueva.<\/p>\n

    A partir de este ejemplo b\u00e1sico, se pueden hacer variaciones. As\u00ed, el ejemplo 8-4 hace que, cuando la variable x<\/strong> tiene un valor m\u00e1s grande que la medida horizontal del canvas m\u00e1s el radio de la figura (esto quiere decir que la figura habr\u00e1 desaparecido), le pone el valor inicial para que vuelva a salir por la derecha. Esta variaci\u00f3n se hace con este c\u00f3digo:<\/p>\n

    if (x > width+radius) { \/\/ Si la imagen sale del canvas\r\n x = -radius;     \/\/ la movemos a la izquierda.\r\n}<\/pre>\n
    Y el ejemplo 8-5 hace que rebote al llegar al final. Como pod\u00e9is ver, el rebotar son dos cosas: primero, cambiar la direcci\u00f3n (que no es m\u00e1s que hacer la velocidad negativa) y, segundo, cambiar la figura para que la boca apunte a la derecha.<\/p>\n
    x += speed * direction; \/\/ Si direction es 1 se mueve de izquierda\r\n            \/\/ a derecha.\r\n            \/\/ Si direction es -1 se mueve de derecha\r\n            \/\/ a izquierda.\r\nif ((x > width - radius) || (x < radius)) {\r\n direction = -direction; \/\/ Cambiar la direcci\u00f3n\r\n}\r\nif (direction == 1) {\r\n arc(x, 60, radius, radius, 0.52, 5.76); \/\/ Hacia la derecha\r\n} else {\r\n arc(x, 60, radius, radius, 3.67, 8.9); \/\/ Hacia la izquierda\r\n}<\/pre>\n
    Movi\u00e9ndose en cualquier direcci\u00f3n<\/span><\/h2>\n
    Mover un objeto de derecha a izquierda es f\u00e1cil. En general, cualquier movimiento horizontal o vertical ser\u00e1 f\u00e1cil de simular porque solo habr\u00e1 que modificar la posici\u00f3n x<\/strong> o la posici\u00f3n y<\/strong>. Pero si queremos mover un objeto en una direcci\u00f3n que no sea la horizontal o la vertical, habr\u00e1 que modificar x<\/strong> e y<\/strong> de forma que el movimiento parezca suave, por lo que habr\u00e1 que calcular qu\u00e9 posici\u00f3n tendr\u00e1 que tener el objeto en cada momento.<\/p>\n
    Este c\u00e1lculo que nos permite dibujar el objeto donde toca cuando toca recibe el nombre, en ingl\u00e9s, de tweening<\/em><\/strong>, y en castellano le llamamos\u00a0interpolar<\/strong><\/a> (poner una cosa entre otras).<\/p>\n<\/div>\n
    Viendo el c\u00f3digo del ejemplo 8-6 del libro nos puede parecer que la interpolaci\u00f3n es una cosa complicada. Pero no es as\u00ed; vamos a ver el ejemplo paso a paso para ver que no es complicado.<\/p>\n
    <\/strong><\/p>\n
    Fe de erratas<\/strong><\/p>\n
    En el libro hay un error en la instrucci\u00f3n<\/p>\n
    y = startY + ((stopY-startX) * pct);<\/pre>\n
    como estamos calculando la posici\u00f3n de la y<\/strong>, startX<\/span> tendr\u00eda que ser en realidad\u00a0startY<\/span> y, por lo tanto, la instrucci\u00f3n tendr\u00eda que ser esta:<\/p>\n
    y = startY + ((stopY-startY) * pct);<\/pre>\n
    Usaremos esta versi\u00f3n corregida en esta gu\u00eda.<\/p>\n<\/div><\/p>\n
    Lo primero que hace el ejemplo es declarar las variables que usa: \u00a1ocho! Bien, vamos a hacer un repaso de qu\u00e9 hace cada una de ellas. Empezamos por las cuatro primeras, que son las m\u00e1s f\u00e1ciles de entender; indican la posici\u00f3n inicial y final del objeto:<\/p>\n
    var startX = 20; \/\/ Indica la posici\u00f3n x inicial\r\nvar stopX = 160; \/\/ Indica la posici\u00f3n x final \r\nvar startY = 30; \/\/ Indica la posici\u00f3n y inicial\r\nvar stopY = 80; \/\/ Indica la posici\u00f3n y final<\/pre>\n
    Las dos siguientes tambi\u00e9n son f\u00e1ciles de entender: indican la posici\u00f3n actual del objeto:<\/p>\n
    var x = startX; \/\/ Posici\u00f3n x actual\r\nvar y = startY; \/\/ Posici\u00f3n y actual<\/pre>\n
    Solo nos quedan dos que son algo m\u00e1s complicadas:<\/p>\n
    var step = 0.005; \/\/ Tama\u00f1o de cada paso que daremos (de 0.0 hasta 1.0)\r\nvar pct = 0.0;  \/\/ Porcentaje ya hecho (0.0 to 1.0)<\/pre>\n
    De las dos variables, pct<\/span> es quiz\u00e1s la m\u00e1s clara. Nos indica qu\u00e9 porcentaje de recorrido hemos hecho. Empezaremos por 0 (por eso, siempre la inicializaremos a 0.0) y acabaremos cuando sea 1.0.<\/p>\n
    step<\/span> es la variable quiz\u00e1s m\u00e1s complicada de entender. Determina el tama\u00f1o de cada paso que daremos y, en la pr\u00e1ctica, cu\u00e1ntos pasos haremos para ir de un lugar al otro. Si nos fijamos en el c\u00f3digo que hay en la funci\u00f3n\u00a0draw()<\/span>, en cada vuelta el porcentaje que hemos avanzado incrementa la cantidad guardada en la variable step<\/span>.<\/p>\n
    Como vamos de 0 a 1 en incrementos de 0.005, en realidad esto significa que haremos 200 pasos antes de llegar al destino (0.005 * 200 \u21d2 1).<\/p>\n
    Vemos ahora el c\u00f3digo de la funci\u00f3n\u00a0draw()<\/span>:<\/p>\n
    function draw() {\r\n background(0);\r\n if (pct < 1.0) {\r\n  x = startX + ((stopX-startX) * pct); \/\/ nueva posici\u00f3n x\r\n  y = startY + ((stopY-startY) * pct); \/\/ nueva posici\u00f3n y\r\n  pct += step;\r\n }\r\n ellipse(x, y, 20, 20);\r\n}<\/pre>\n
    Vamos a hacer una breve simulaci\u00f3n de c\u00f3mo funcionar\u00eda el programa:<\/p>\n
    Valores iniciales:<\/p>\n
    var startX = 20; \/\/ Indica la posici\u00f3n x inicial\r\nvar stopX = 160; \/\/ Indica la posici\u00f3n x final \r\nvar startY = 30; \/\/ Indica la posici\u00f3n y inicial\r\nvar stopY = 80; \/\/ Indica la posici\u00f3n y final \r\nvar step = 0.005; \/\/ Tama\u00f1o de cada paso que daremos (de 0.0 hasta 1.0)\r\nvar pct = 0.0;  \/\/ Porcentaje ya hecho (0.0 to 1.0)<\/pre>\n\n\n\n\n\n\n\n\n
    N.\u00ba ejecuciones
    \n draw()<\/span><\/th>\n    		Valores de la variable
    \n pct<\/span>
    \nal entrar en la funci\u00f3n
    \n draw()<\/span><\/th>\n    		Valores de las variables x<\/em> e y<\/em> calculadas dentro del
    \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\u00f3n de x<\/em> la calculamos sumando a la posici\u00f3n inicial la distancia a recorrer (posici\u00f3n final menos posici\u00f3n inicial), multiplicado por el porcentaje que hemos recorrido.<\/p>\n
    Como trabajamos en p\u00edxeles (y los p\u00edxeles no se pueden dividir), el ordenador autom\u00e1ticamente hace un redondeo, que es el valor que hemos puesto entre par\u00e9ntesis junto al resultado.<\/p>\n
    Ejercicios<\/span><\/h3>\n
    Para entender bien este ejemplo, vale la pena probar a cambiar algunas cosas. Aqu\u00ed van unas cuantas propuestas:<\/p>\n