Control de flujo, condiciones y bucles para artistas

Tablero de ajedrez

Llegamos al final de la sección donde hemos aprendido como el control de flujo nos permite condicionar y repetir bloques de código.

En esta lección vamos a repasar todos los conceptos haciendo un interesante ejercicio mientras introducimos el uso de los bucles anidados, una situación que sucede cuando dentro de un bucle tenemos otro bucle.

Para demostrar visualmente lo que ocurre he decidido enseñaros cómo dibujar un tablero de ajedrez, será un poco largo pero estoy seguro de que os gustará.

¿Conocéis la estructura de un tablero de ajedrez? Se trata de una superficie cuadrada dividida en 8x8 cuadrados, 32 blancos y 32 negros. Empezando por el cuadrado de la esquina superior ubicamos la primera fila en la que el primer cuadrado es blanco, el segundo negro, el tercero blanco otra vez y así. Para la segunda fila se alternan los colores, de manera que nunca queden dos cuadrados del mismo color unidos por un lado.

Tablero de madera con casillas blancas en amarillo y negras en marrón.

Ya sabemos dibujar cuadrados y rellenarlos de colores, así que podríamos dibujar los 64 cuadrados manualmente en el lienzo... pero seamos realistas, ¿quién haría eso sabiendo que podemos usar bucles?

Para afrontar este problema vamos a empezar por lo más básico, dividir el lienzo equitativamente en 64 cuadrados. Esto lo podemos hacer trazando líneas rectas, dividiendo el ancho y alto del lienzo entre 8 para saber el tamaño de los cuadrados y en un bucle trazar las líneas horizontales y verticales:

14 - Bucles anidados/sketch.js

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

function draw() {
  background(220);
  
  var ancho_celda = width/8;
  var alto_celda = height/8;
  
  // Divisiones horizontales
  for (var i=1; i<=8; i++){
    var x = ancho_celda * i
    line(0, x, height, x)
  }

  // Divisiones verticales
  for (var j=1; j<=8; j++){
    var y = alto_celda * j
    line(y, 0, y, width)
  }
}

Muy bien, con esto hemos conseguido dibujar el tablero y sólo nos falta pintar las celdas acordemente.

Por desgracia lo que hemos hecho no nos sirve para nada y es que esto sólo dibuja el tablero y lo que nosotros necesitamos son cuadrados pintarlos de colores... así que tendremos que pensar otra forma de hacerlo utilizando cuadrados.