2. Repte 2. Autòmats

2.3. Segona part: estructures de control

2.3.5. Solucions als exercicis del repte

Solució a l’exercici plantejat al final de l’apartat dels condicionals

var figura = "quadrat"; // Canvieu aquest valor per a provar l’exercici

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

function draw() {
  background(200);
	if (figura == "cercle") {
		ellipse(200,200,100,100);
	}
	if (figura == "quadrat") {
		rect(150,150,100,100);
	}
}

Degradat vertical

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

Degradat horitzontal però de blanc a negre

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

Triangle degradat

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

Degradat oblic

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ó a l’exercici del rellotge

Anirem veient el codi a poc a poc.

Primer tenim el bucle que fem amb la instrucció for:

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

Ho repetim 60 cops perquè 60 són els minuts i segons que té un rellotge.

Dins d’aquest for hi tenim quatre if:

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

Aquest primer if ens dibuixa totes les línies del rellotge. No volem pintar les 60 línies, sinó que només en pintem una per cada 5 minuts (igual que en un rellotge). Per això calculem el residu de dividir els minuts per 5 i pintem si el residu és 0 (és un múltiple de 5).

Segon if:

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

Aquest if dibuixa la maneta de les hores. Mirem l’hora que és (està guardada a la variable hores), calculem el residu de dividir per 12 (perquè les hores van de 0 a 23 i així passem a hores de 0 a 11) i multipliquem per 5 (per a buscar el minut adequat per a pintar aquesta hora). Pintem les hores de color vermell i, a més a més, fem la ratlla una mica més llarga.

Tercer if:

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

Pintem la maneta dels minuts. Com que tenim 60 minuts, això és més fàcil, pintarem aquella ratlla que coincideixi amb els minuts actuals. També la fem més llarga i, a més a més, de color verd.

I quart if:

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

És el mateix que els minuts. En aquest cas, pintem de blanc.

Prova l’exercici i canvia els valors que creguis convenient.