{"id":424,"date":"2022-10-06T10:58:26","date_gmt":"2022-10-06T08:58:26","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=424"},"modified":"2022-11-13T13:39:09","modified_gmt":"2022-11-13T11:39:09","slug":"7-2-movimiento-lineal","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/7-2-movimiento-lineal\/","title":{"rendered":"7.2. Movimiento lineal"},"content":{"rendered":"

El ejemplo m\u00e1s sencillo que podemos crear es el de una variable que aumente a lo largo del tiempo y que usemos para determinar alg\u00fan par\u00e1metro de nuestro dibujo.<\/p>\n

\"\"
Figura 78. Movimiento lineal
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

En la figura 78 vemos que hemos creado al principio del c\u00f3digo una variable posX<\/span> que hemos inicializado con el valor 100 y que luego en el draw()<\/span> estamos utilizando para determinar la posici\u00f3n en el eje x<\/em> de la elipse que dibujamos. Tras dibujarla, aumentamos el valor de posX<\/span> en una unidad (recordemos que posX ++<\/span> es equivalente a posX = posX + 1<\/span>), por lo que nuestra elipse comienza en la posici\u00f3n x<\/em> 100 y, puesto que el draw()<\/span> se ejecuta 60 veces por segundo, su posici\u00f3n va aumentando 60 unidades cada segundo, desplaz\u00e1ndose hacia la derecha del canvas<\/em>. En el ejemplo no estamos redibujando el fondo para que se aprecie la estela que deja el movimiento de la figura.<\/p>\n

Podemos controlar f\u00e1cilmente la velocidad y la direcci\u00f3n de este movimiento variando la cantidad que le sumamos a la posici\u00f3n en cada frame<\/em>. Para ello, podemos utilizar una variable que almacene esta \u00abvelocidad\u00bb. Cuanta mayor cantidad sumemos a la posici\u00f3n, m\u00e1s r\u00e1pido ser\u00e1 el movimiento. Para cambiar la direcci\u00f3n del movimiento, basta con cambiar el signo del valor que sumamos: si sumamos valores negativos en lugar de positivos a la posici\u00f3n, el movimiento ser\u00e1 hacia la izquierda en lugar de hacia la derecha.<\/p>\n

\"\"
Figura 79. Modificando la velocidad del movimiento
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

En este ejemplo vemos claramente la diferencia de velocidad entre el movimiento de las dos elipses. Veamos a continuaci\u00f3n un ejemplo manteniendo la misma velocidad, pero cambiando su direcci\u00f3n:<\/p>\n

\"\"
Figura 80. Modificando la direcci\u00f3n del movimiento
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

La clave a la hora de cambiar la direcci\u00f3n del movimiento la tenemos en la l\u00ednea 15: en lugar de utilizar el operador +=<\/span> estamos utilizando el -=<\/span>, de manera que las 5 unidades de la variable speed<\/span> se est\u00e1n restando en cada frame <\/em>al valor de initPos2 en lugar de estar sum\u00e1ndose. Podr\u00edamos obtener el mismo resultado manteniendo el operador +=<\/span> pero cambiando el signo de speed<\/span>:<\/p>\n

initPos2 += -speed;<\/pre>\n
En dos dimensiones<\/h3>\n
Hasta ahora, el movimiento que hemos programado en nuestras formas ha sido en una \u00fanica dimensi\u00f3n, solo se est\u00e1n moviendo en el eje x<\/em>, pero podemos incluir una nueva variable para que el movimiento de produzca tanto en el eje x<\/em> como en el y<\/em>.<\/p>\n
\"\"
Figura 81. Movimiento diagonal
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En este caso, como estamos utilizando el mismo valor speed<\/span> para aumentar la posici\u00f3n tanto en el eje x<\/em> como en el y<\/em>, el movimiento es diagonal a exactamente 45\u00ba, pero si utilizamos valores distintos de velocidad para un eje y para otro, la pendiente del movimiento cambiar\u00e1.<\/p>\n
Condiciones de borde<\/h3>\n
Ahora mismo, seg\u00fan tenemos nuestro c\u00f3digo, la variable que determina la posici\u00f3n del c\u00edrculo aumenta (o disminuye) hasta el infinito haciendo que el c\u00edrculo desaparezca del canvas<\/em>. En muchos casos, este comportamiento no ser\u00e1 el deseado y querremos controlar qu\u00e9 ocurre cuando nuestra figura alcanza los l\u00edmites del canvas<\/em>.<\/p>\n
Para ello, podemos ayudarnos de las ya conocidas estructuras condicionales para detectar cu\u00e1ndo la variable que almacena la posici\u00f3n de la figura llega a determinado valor. Uno de los comportamientos que podemos programar es que nuestra figura reaparezca por el lado contrario del canvas<\/em>; veamos c\u00f3mo llevarlo a cabo:<\/p>\n
\"\"
Figura 82. Condiciones de borde
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En el ejemplo anterior hemos creado una condici\u00f3n que detecta cu\u00e1ndo la posici\u00f3n en y del c\u00edrculo rebasa el l\u00edmite inferior del canvas<\/em> y, cuando lo hace, resetea la posici\u00f3n a la parte superior del canvas<\/em>. Debemos tener en cuenta que el c\u00edrculo se dibuja desde su centro, por lo que para que rebase completamente el l\u00edmite del canvas<\/em> debemos considerar tambi\u00e9n el tama\u00f1o del c\u00edrculo.<\/p>\n
Una vez que tenemos definida esta estructura condicional que detecta cu\u00e1ndo el c\u00edrculo rebasa el l\u00edmite inferior del canvas<\/em>, podemos variar dentro del condicional otro tipo de par\u00e1metros adem\u00e1s de la posici\u00f3n en el eje y<\/em>. Podr\u00edamos crear una especie de lluvia aleatoria de c\u00edrculos de distintos tama\u00f1os, colores y velocidades cambiando un par de par\u00e1metros.<\/p>\n
\"\"
Figura 83. Lluvia aleatoria
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En lugar de hacer que el c\u00edrculo reaparezca por el lado contrario del canvas<\/em>, podr\u00edamos querer que rebotase. Para ello, lo que debemos hacer es simplemente cambiar de signo su velocidad cuando detectemos que ha llegado al l\u00edmite:<\/p>\n
\"\"
Figura 84. Rebote
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En el caso de la figura anterior, solo estamos detectando la colisi\u00f3n con el borde inferior del canvas<\/em>, por lo que cuando el c\u00edrculo vaya hacia arriba rebasar\u00e1 el l\u00edmite superior del canvas<\/em> sin rebotar. Para a\u00f1adir la nueva condici\u00f3n, podemos usar el operador l\u00f3gico OR<\/span>:<\/p>\n
if(posY >= height \u2013 size \/ 2 || posY <= 0 + size \/ 2) {\r\n  speed = -speed;\r\n}<\/pre>\n
Podemos realizar esta comprobaci\u00f3n en los cuatro bordes del canvas<\/em> si tenemos movimiento en dos dimensiones a\u00f1adiendo una nueva condici\u00f3n:<\/p>\n
\/\/ REBOTE VERTICAL\r\nif(posY >= height \u2013 size \/ 2 || posY <= 0 + size \/ 2) { speedY = -speedY; }\r\n\r\n\/\/ REBOTE HORIZONTAL\r\nif(posX >= width \u2013 size \/ 2 || posX <= 0 + size \/ 2) {\r\n  speedX = -speedX;\r\n}<\/pre>\n
Y para que el c\u00f3digo quede m\u00e1s limpio y organizado, podemos encapsular todas estas comprobaciones en una funci\u00f3n:<\/p>\n
function checkBorders(){\r\n  \/\/ REBOTE VERTICAL\r\n  if(posY >= height \u2013 size \/ 2 || posY <= 0 + size \/ 2) { speedY = -speedY; } \/\/ REBOTE HORIZONTAL if(posX >= width \u2013 size \/ 2 || posX <= 0 + size \/ 2) {\r\n    speedX = -speedX;\r\n  }\r\n}<\/pre>\n
Veamos un ejemplo completo con rebote en los cuatro bordes del canvas<\/em>:<\/p>\n
\"\"
Figura 85. Rebote en todos los bordes
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
El ejemplo m\u00e1s sencillo que podemos crear es el de una variable que aumente a lo largo del tiempo y que usemos para determinar alg\u00fan par\u00e1metro de nuestro dibujo. En la figura 78 vemos que hemos creado al principio del c\u00f3digo una variable que hemos inicializado con el valor 100 y que luego en el […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/424"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=424"}],"version-history":[{"count":3,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/424\/revisions"}],"predecessor-version":[{"id":781,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/424\/revisions\/781"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}