Laços de Repetição e vetores

Como usar laços de repetição no nosso sketch, considerando que ele já é um laço de repetição?

A maneira mais fácil de entender o uso de laços de repetição em um sketch é criando uma simulação com vários elementos. Vamos lá!

Um desafio

Queremos desenvolver um sketch que simule uma corrida de pessoas em raias de uma piscina.

Nosso rascunho de sketch é como abaixo. Existem cinco competidores, que tem velocidades diferentes a cada vez que uma corrida inicia. Ao chegar na "borda" da piscina, a corrida acaba e um competidor é declarado vencedor.

Rascunho do que queremos obter no sketch

Identificando os elementos principais

O primeiro passo é entender quais são os elementos principais de desenho no sketch. Nesse caso, temos:

• Retângulo para a Piscina

• Circulo para cada competidor

• Texto para título e número dos competidores

Com isso, podemos escrever o primeiro rascunho do sketch. Vamos usar o conceito de functions para separar bem algumas partes do sketch!

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

function mostraTitulo() {
  textSize(20);
  fill(0);
  noStroke();
  text("Olimpíadas dos Círculos", 90, 40);
}

function desenhaPiscina() {
  stroke('gray');
  fill(239, 252, 255);
  rect(20, 60, 360, 320);
}

function draw() {
  background(240);
  
  mostraTitulo();
  desenhaPiscina();
}

Além dos elementos de desenho, precisamos pensar sobre quais variáveis são necessárias para controlarmos essa simulação.

Vamos controlar, para cada competidor:

• Posição, para podermos desenhar no local correto

• Velocidade, para atualizar sua posição de maneira correta

Além disso, precisamos de uma variável que diga se a corrida terminou ou não.

Um começo: corrida de um só

Um jeito simples de pensarmos na lógica do nosso sketch é trabalhar com apenas um competidor. Como isso seria feito?

Um competidor possui sua posição representada por uma coordenada cartesiana (x, y). Essa posição é atualizada de acordo com sua velocidade. Ao chegar em um limite em y determinado, a corrida acaba.

O código abaixo cria esse primeiro rascunho.

let x, y, velo, terminou, raioCompetidor;

function setup() {
  createCanvas(400, 400);
  raioCompetidor = 30;
  x = width / 2;
  y = 350;
  velo = 1.5;
  terminou = false;
}

function mostraTitulo() {
  textSize(20);
  fill(0);
  noStroke();
  text("Olimpíadas dos Círculos", 90, 40);
}

function desenhaPiscina() {
  stroke('gray');
  fill(239, 252, 255);
  rect(20, 60, 360, 320);
}

function draw() {
  background(240);
  
  mostraTitulo();
  desenhaPiscina();
  
  noStroke();
  fill('#FF9797');
  
  circle(x, y, raioCompetidor);
  
  if (y > 60 + raioCompetidor) {
    y -= velo;
  }
}

Próximo passo: representando os competidores

Já que conseguimos resolver para um competidor apenas, podemos pensar em como criar um conjunto de competidores para lidar com a mesma lógica!

Assim, podemos criar um vetor para guardar as posições y dos competidores!

let comp_y;

function setup() {
    comp_y = []; // declarando um vetor no Javascript
}

Dessa maneira, temos:

let xInicial, terminou, raioCompetidor, velo;
let compY;

function setup() {
  createCanvas(400, 400);
  raioCompetidor = 30;
  xInicial = 75; // como calcular com base na quantidade de competidores?
  velo = 0.5;
  compY = [350, 350, 350, 350, 350];
  terminou = false;
}

function mostraTitulo() {
  textSize(20);
  fill(0);
  noStroke();
  text("Olimpíadas dos Círculos", 90, 40);
}

function desenhaPiscina() {
  stroke('gray');
  fill(239, 252, 255);
  rect(20, 60, 360, 320);
}

function draw() {
  background(240);
  
  mostraTitulo();
  desenhaPiscina();
  
  noStroke();
  fill('#FF9797');
  
  // Para cada competidor, desenhamos um circulo
  for (let i = 0; i < 5; i++) { 
    circle(xInicial + (i * raioCompetidor * 2), compY[i], raioCompetidor);
  }
}

Vamos nadar!

Agora precisamos fazer com que os competidores nadam. Queremos simular uma competição, então é interessante termos o elemento de aleatoriedade presente. Um competidor pode começar atrás mas depois ganhar a corrida, se sua velocidade aumentar em algum momento.

Primeiro, vamos fazer os competidores "nadarem", modificando suas posições Y, usando uma velocidade. Precisamos garantir que a variável velocidade exista e que estamos diminuindo o Y usando este valor.

for (let i = 0; i < 5; i++) { 
    circle(xInicial + (i * raioCompetidor * 2), compY[i], raioCompetidor);
    
    compY[i] -= velo;
 }

Adicionando isso estamos acessando o valor de y de um competidor indexado na posição i e então diminuindo por um valor determinado pela variável velo.

O problema é que eles nunca param! Precisamos melhorar essa lógica. Vamos adicionar um limite, para quando um competidor atingir, acabar a corrida.

for (let i = 0; i < 5; i++) { 
    circle(xInicial + (i * raioCompetidor * 2), compY[i], raioCompetidor);
    // Se o competidor estiver dentro do limite, atualizo sua posição
    if (compY[i] >= 60 + raioCompetidor) {
      compY[i] -= velo;
    }
}

Aqui temos um problema ainda: todos os competidores estão nadando com uma velocidade igual. Como queremos simular uma competição, vamos fazer com que suas velocidades sejam aleatórias a cada vez que atualizamos!

// Para cada competidor, desenhamos um circulo
for (let i = 0; i < 5; i++) { 
  circle(xInicial + (i * raioCompetidor * 2), compY[i], raioCompetidor);
  
  if (compY[i] >= 60 + raioCompetidor) {
    compY[i] -= random(-0.5, 1);
  }
}

Agora sim! 🎉

Os medalhistas!

Precisamos definir que a competição acabou e declarar o grande vencedor! Para isso, podemos usar uma variável para controlar o fim do jogo e então determinar o que desenhar quando isso acontecer.

for (let i = 0; i < 5; i++) { 
  circle(xInicial + (i * raioCompetidor * 2), compY[i], raioCompetidor);
  
  if (compY[i] >= 60 + raioCompetidor) {
    compY[i] -= random(-0.5, 1);
  }
  // Se não está no limite, já chegou na borda!
  else {
    terminou = true;
    vencedor = i;
    break; // sai do loop de atualização, a corrida acabou!
  }
}

Perceba o uso da palavra chave break. Ela serve para parar o laço de repetição! Quando um competidor chegar ao fim, ele para atualiza a variável de vencedor e de término e para de atualizar os valores.

Agora podemos trabalhar nosso sketch para lidar com essa informação:

function draw() {
  background(240);
  
  mostraTitulo();
  desenhaPiscina();
  
  noStroke();
  fill('#FF9797');
  
  if (terminou) {
    text("O Jogador " + (vencedor + 1) + " venceu!", 100, 200);
  }
  
  // Para cada competidor, desenhamos um circulo
  for (let i = 0; i < 5; i++) { 
    circle(xInicial + (i * raioCompetidor * 2), compY[i], raioCompetidor);
    
    // Só existe atualização dos competidores se o jogo não terminou
    if (!terminou) {
      if (compY[i] >= 60 + raioCompetidor) {
        compY[i] -= random(0, 1);
      }
      // Se não está no limite, já chegou na borda!
      else {
        terminou = true;
        vencedor = i;
        break; // sai do loop de atualização, a corrida acabou!
      }
    }
  }

Melhorias!

Perceba que ainda não fizemos os textos que mostram os números dos competidores. Como fazer isso? Inclusive, pense em como resolver os seguintes problemas:

• Conseguimos usar funções para melhorar o código?

• Como fazer com que o número de competidores seja controlado por uma variável sem afetar como o sketch funciona? (pode existir um número máximo)

• Como fazer com que exista não só um ganhador, mas um pódio, com medalha de ouro, prata e bronze?

• Será que dá pra melhorar essa sensação do "nado" dos competidores?