2. Reto 2. Autómatas

2.3. Segunda parte: estructuras de control

2.3.5. Soluciones a los ejercicios del reto

Solución al ejercicio planteado al final del apartado de condicionales

var figura = "cuadrado"; // Cambiad este valor para probar el ejercicio

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

function draw() {
  background(200);
	if (figura == "círculo") {
		ellipse(200,200,100,100);
	}
	if (figura == "cuadrado") {
		rect(150,150,100,100);
	}
}

Degradado vertical

for (var i=0; i<=255; i++ ) {
  stroke(i);
  line(xIni,yIni+i,xIni+256,yIni+i);
}

Degradado horizontal pero de blanco a negro

for (var i=0; i<=255; i++ ) {
  stroke(256-i);
  line(xIni+i,yIni,xIni+i,yIni+256);
}

Triángulo degradado

for (var i=0; i<=255; i++ ) {
  stroke(i);
  line(xIni,yIni+i,xIni+i,yIni);
}

Degradado oblicuo

for (var i=0; i<=255; i++ ) {
  stroke(i);
  line(xIni,yIni+i,xIni+i,yIni);
}
for (var i=0; i<=255; i++ ) {
  stroke(256-i);
  line(xIni+i,yIni+256,xIni+256,yIni+i);
}

Solución al ejercicio del reloj

Iremos viendo el código poco a poco.

Primero, tenemos el bucle que hacemos con la instrucción for:

for (var i=0;i<60;i++){

Repetimos 60 veces porque 60 son los minutos y segundos que tiene un reloj.

Dentro de este for tenemos cuatro if:

    if (i % 5 == 0) {
      stroke(0);
      line(0, -40, 0, -60);
    }

Este primero nos dibuja todas las líneas del reloj. No queremos pintar las 60 líneas, sino que solo pintamos una por cada 5 minutos (igual que en un reloj). Por eso calculamos el residuo de dividir los minutos por 5 y pintamos si el residuo es 0 (es un múltiplo de 5).

Segundo if:

    if (i == (horas % 12 * 5)) {
      stroke(255,0,0);
      line(0, -40, 0, -70);
    }

Este dibuja la manecilla de las horas. Miramos la hora que es (está guardada en la variable horas), calculamos el residuo de dividir por 12 (porque las horas van de 0 a 23 y así pasamos a horas de 0 a 11) y multiplicamos por 5 (para buscar el minuto adecuado para pintar esta hora). Pintamos las horas de color rojo y, además, hacemos la raya algo más larga.

Tercer if:

    if (i == minutos) {
      stroke(0,0,255);
      line(0, -40, 0, -70);
    }

Pintamos la manecilla de los minutos. Como tenemos 60 minutos, esto es más fácil, pintaremos aquella raya que coincida con los minutos actuales. También la hacemos más larga y además de color verde.

Y cuarto if:

    if (i == segundos) {
      stroke(255);
      line(0, -40, 0, -60);
    }

Es lo mismo que los minutos. En este caso pintamos de blanco.

Probad el ejercicio y cambiad los valores que creáis conveniente.