Control de flujo, condiciones y bucles para artistas

Hora de practicar

Un experimento genial que podemos hacer es programar un círculo que se mueva en diagonal por el lienzo, pero si se sale del margen entonces cambiará revertirá su dirección.

Partiremos de un ejemplo básico donde el círculo se mueve en diagonal hasta el infinito:

var circulo = { x: 0, y: 0 }

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220)
  // Pintamos el círculo
  fill(220, 0, 0)
  ellipse(circulo.x, circulo.y, 50, 50)
  // Movemos el círculo
  circulo.x += 2
  circulo.y += 2
}

Ahora lo que vamos a hacer es una condición justo al final del draw para comprobar si la posición que tenemos después de modificarla se ha salido del lienzo. Eso sería tan fácil de comprobar si la posición x del círculo es mayor que el ancho del lienzo o si la posición y es mayor que la altura del lienzo:

// Comprobamos si nos salimos del lienzo
if (circulo.x > width) {
  print("El círculo se ha salido del lienzo")
}

Con esto ya tenemos nuestra condición lista y lo que tocaría es modificar el código para que el círculo cambie la dirección. ¿Cómo podemos hacerlo?

Una solución este problema muy utilizada utiliza en los videojuegos es definir una nueva variable para representar si la dirección es positiva o negativa. Supodnremos que si es 1 será positiva y si es -1 será negativa:

var circulo = { x: 0, y: 0, d: 1 }

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220)
  // Pintamos el círculo
  fill(220, 0, 0)
  ellipse(circulo.x, circulo.y, 50, 50)
  // Movemos el círculo en base a la dirección
  circulo.x += 2 * circulo.d
  circulo.y += 2 * circulo.d
  // Comprobamos si nos salimos del lienzo
  if (circulo.x > width) {
    print("El círculo se ha salido del lienzo")
  }
}

Ahora si multiplicamos esa dirección por la cantidad que se mueve el círculo conseguiremos sumar o restar dependiendo del caso y sólo tendremos que cambiar la dirección si nos salimos del lienzo haciendo algo tan fácil como multiplicar por -1, ya que si tenemos -1 pasará a ser 1 y si tenemos 1 pasará a ser -1:

var circulo = { x: 0, y: 0, d: 1 }

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220)
  // Pintamos el círculo
  fill(220, 0, 0)
  ellipse(circulo.x, circulo.y, 50, 50)
  // Movemos el círculo en base a la dirección
  circulo.x += 2 * circulo.d
  circulo.y += 2 * circulo.d
  // Comprobamos si nos salimos del lienzo
  if (circulo.x > width) {
    circulo.d *= -1
  }
}

Con esto habremos logrado que el círculo rebote en la esquina de abajo.

Ejercicio

Os reto a mejorar el programa para que el círculo no desaparezca por la esquina superior izquierda y que en su lugar vuelva a rebotar hacia abajo haciendo que la figura nunca deje de moverse. Podéis pausar el vídeo y continuar para ver la solución:

Mostrar solución
var circulo = { x: 0, y: 0, d: 1 }

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220)
  // Pintamos el círculo
  fill(220, 0, 0)
  ellipse(circulo.x, circulo.y, 50, 50)
  // Movemos el círculo
  circulo.x += 2 * circulo.d
  circulo.y += 2 * circulo.d
  // Comprobamos si nos salimos del lienzo
  if (circulo.x > width) {
    circulo.d *= -1
  }
  if (circulo.x < 0) {
    circulo.d *= -1
  }
}