Lección 3 – Geoidlabs

Lección 3: Rebontando por la pantalla

Requerimientos: Haber leído Lección 2.

En este lección veremos cómo realizar la animación de un cuadrado rebotando por la pantalla, sin salir de los límites de ésta.

Movimiento hacia abajo:

Primero comenzaremos con el movimiento del cuadrado hacia abajo, inciando desde la esquina superior izquierda.

Para ello, debemos almacenar dicha posición incial para luego ir actualizándola. Como vimos en la lección anterior, esto lo hacemos mediante variables. Por lo tanto definiremos:

int posicionX = 0;
int posicionY = 0;

A diferencia de la lección anterior, el valor inicial de las variables lo estamos estableciendo en la misma declaración. Hacerlo de esta manera o al comienzo de la función setup() es indistinto.

Luego debemos guardar el tamaño del cuadrado, ya que lo vamos a usar muchas veces dentro del codigo.

int tamCuadrado = 15;

De esta manera siempre nos referiremos al tamaño del cuadrado como tamCuadrado. Esto nos da la ventaja de poder modificar en un futuro de manera fácil el tamaño del cuadrado, sin tener que cambiar distintas secciones de código en donde se hace referencia.

Veamos cómo dibujar el cuadrado en la posición inicial:

#include <Geobuino.h>
Geobuino geo;
 
int tamCuadrado = 15;
int posicionX = 0;
int posicionY = 0;
 
void setup() {
 geo.begin();
 
}
 
void loop() {
 geo.waitFrame();
 geo.clearDisplay();
 geo.fillRect(posicionX, posicionY, tamCuadrado,tamCuadrado);
}

Estamos introduciendo la funcion fillRect(). Dicha función dibuja un rectángulo relleno. Los primeros 2 parámetros se refieren a la ubicación (x,y) de la esquina superior izquierda del cuadrado. Los últimos 2 parámetros corresponden al ancho y alto del cuadrado a dibujar.

Este código mostrará lo siguiente en pantalla:

Para poder animar el cuadrado en el eje y (movimiento hacia abajo), debemos actualizar la posición Y dentro de la función loop(). Esto se hace incrementando la variable posicionY.

posicionY = posicionY + 1;

Sin embargo, el incremento no siempre va a ser un número positivo, ya que nuestra intención es que al llegar al límite inferior de la pantalla, rebote. En ese caso no sería un incremento, sino un decremento.

Para manejar esta situación, debemos declarar una nueva variable:

int velocidadY = 1;

Esto nos permitirá cambiar la dirección del cuadrado, luego de una colisión con un borde de la pantalla.

De esta manera, el incremento dentro de loop(), quedaria:

posicionY = posicionY + velocidadY;

Si enviamos el sketch a la consola, veremos que el cuadrado se desliza hacia abajo. Sin embargo, se va más allá de los límites de la pantalla.

Es por eso que debemos detectar el momento en que el cuadrado toca el borde de la pantalla, para poder cambiar su dirección (es decir, cambiar el signo de la variable verlocidadY).

Ese momento ocurre cuando posicionY > (DISPLAY_HEIGHT – tamCuadrado)

DISPLAY_HEIGHT es una constante que representa el alto de la pantalla, 64 píxeles, mientras que DISPLAY_WIDTH representa al ancho, que es 128 píxeles.

Es decir, cuando la posición del cuadrado en el eje Y supera a la altura menos el lado del cuadrado, se produce la colisión con el borde. Entonces, haciendo uso de la sentencia if que aprendimos en la lección pasada, hacemos:

if(posicionY > (DISPLAY_HEIGHT - tamCuadrado)){
   velocidadY = -1;
 }

Algo similar debemos hacer cuando el cuadrado choca con el borde superior de la pantalla:

if(posicionY < 0){
   velocidadY = 1;
 }

Ya tenemos el cuadrado rebotando en el eje Y.

Si hacemos algo análogo con el eje X, nos quedaría el siguiente código:

#include <Geobuino.h>
Geobuino geo;
 
int tamCuadrado = 15;
int posicionX = 0;
int posicionY = 0;
int velocidadX = 1;
int velocidadY = 1;
 
 
void setup() {
 geo.begin();
 
}
 
void loop() {
  geo.waitFrame();
  geo.clearDisplay();
  posicionX = posicionX + velocidadX;
  posicionY = posicionY + velocidadY;
 
  if(posicionX < 0){
     velocidadX = 1;
  }
  if(posicionX > (DISPLAY_WIDTH - tamCuadrado)){
    velocidadX = -1;
  }
  if(posicionY < 0){
    velocidadY = 1;
  }
  if(posicionY > (DISPLAY_HEIGHT - tamCuadrado)){
    velocidadY = -1;
  }
 
  geo.fillRect(posicionX, posicionY, tamCuadrado,tamCuadrado);
}

Y ahora sí nuestro cuadrado se mueve en ambos ejes, y cada vez que rebota con alguno de los bordes, cambia de dirección.