Usando condicionais

Agora nós já entendemos bem sobre como o draw está acontecendo e como fazer com que coisas “andem” no nosso grid. Antes de mais nada, vamos revisar um pouco o conceito da animação. Primeiro fizemos nossa bolinha andar na horizontal e depois na vertical. O desafio principal era simples, usando o background no setup, ao invés de no draw.

let x, y;

function setup() {
  createCanvas(400, 400);  
  x = 0;
  y = 0;
}

function draw() {
  fill(x, y, 200);
  circle(x, 200, 50);
  circle(200, y, 50);
  x = x + 3;
  y = y + 3;
}

Poderíamos ter feito esse sketch apenas com uma variável? Sim! O que estamos mudando de um circle para outro? Apenas qual das dimensões varia. Enquanto um muda o X, o outro muda o valor de Y. Poderíamos ter chamado essa variável de qualquer outra coisa e usado ela em lugares diferentes.

let posicao;

function setup() {
  createCanvas(400, 400);  
  background(255);
  posicao = 0;
}

function draw() {
  fill(posicao, posicao, 200);
  circle(posicao, 200, 50);
  circle(200, posicao, 50);
  posicao = posicao + 3;
}

Legal! Nessa ideia de renomearmos as variáveis, podemos começar a dar nomes que realmente significam algo pra elas. Por exemplo, poderíamos fazer um circle que se move na horizontal e que varia sua posição X, certo?

let posicaoX;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
}

function draw() {
  background(220);
  circle(posicaoX, 200, 50);
  posicaoX = posicaoX + 3;
}

Mas o que é esse número 3 que estamos somando na posição? Se colocarmos um valor, o que acontece? (trocamos para 10). E se colocarmos um valor menor? (trocamos para 1). E se colocarmos um valor menor do que zero!? (trocamos para -1). Qual nome poderíamos colocar nessa variável? Quando mudamos, altera o que, exatamente? Velocidade!

let posicaoX, velocidade;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
  velocidade = 3;
}

function draw() {
  background(220);
  circle(posicaoX, 200, 50);
  posicaoX = posicaoX + velocidade;
}

Agora que já pensamos em nomear as variáveis de posição e velocidade, vamos começar a pensar em como usar condicionais no nosso sketch.

Vocês já viram as condicionais em Algoritmos 1, aqueles comandos que usamos para poder fazer algumas linhas de código serem executadas só algumas vezes, não sempre. (desenhar um fluxograma na lousa)

Como fazemos para nosso círculo “andar” até a borda e parar em algum momento? (desenha na lousa a bolinha e vai andando até a borda do grid. Quando chegar lá, falamos sobre não mudar a velocidade, deixar parado)

let posicaoX, velocidade;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
  velocidade = 3;
}

function draw() {
  background(220);
  circle(posicaoX, 200, 50);
  if (posicaoX < 400) {
	  posicaoX = posicaoX + velocidade;
	}
}

Olha só, fizemos ela parar! 🎉

Mas ela parou na metade… Será que conseguimos fazê-la parar bem na borda com borda? Qual é o diâmetro do círculo? Uhmm…. Já que o diâmetro é 50, o raio é 25, certo? Então vamos pensar que eu preciso fazer o círculo andar toda vez que sua posição for menor do que a borda do grid menos o raio do círculo.

let posicaoX, velocidade;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
  velocidade = 3;
}

function draw() {
  background(220);
  circle(posicaoX, 200, 50);
  if (posicaoX < 400 - 25) {
	  posicaoX = posicaoX + velocidade;
	}
}

Isso poderia ficar melhor… Podemos criar outra variável para o raio do círculo!

let posicaoX, velocidade, raio;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
  velocidade = 3;
  raio = 25;
}

function draw() {
  background(220);
  circle(posicaoX, 200, raio * 2);
  if (posicaoX < 400 - raio) {
	  posicaoX = posicaoX + velocidade;
	}
}

E, só pra vocês saberem, o p5.js também nos dá duas variáveis prontas (no mesmo estilo do mouseX e mouseY) para sabermos o tamanho do grid. São chamadas de width e height , para largura e altura.

let posicaoX, velocidade, raio;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
  velocidade = 3;
  raio = 25;
}

function draw() {
  background(220);
  circle(posicaoX, 200, raio * 2);
  if (posicaoX < width - raio) {
	  posicaoX = posicaoX + velocidade;
	}
}

Agora o nosso desafio é conseguir fazer esse círculo voltar… Será que conseguimos? Nossa primeira opção talvez seja usar o que vimos antes, quando trocamos os valores da velocidade. Quando colocamos uma velocidade menor do que zero, a bolinha andou no sentido contrário, né? Vamos fazer isso, então.

let posicaoX, velocidade, raio;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
  velocidade = 3;
  raio = 25;
}

function draw() {
  background(220);
  circle(posicaoX, 200, raio * 2);
  if (posicaoX < width - raio) {
    posicaoX = posicaoX + velocidade;
  }
  else {
    velocidade = -3;
  }
}

Mas por que não está funcionando? Nós trocamos a velocidade! 😥

O que acontece é que o draw está sendo chamado várias vezes, lembram? Então em algum momento a posicaoX chegou na condição e está executando o velocidade como -1, mas não está aplicando de fato na mudança da variável. Precisamos fazer com que a variável mude com uma velocidade sempre. O objetivo é que o círculo sempre esteja tendo sua posição alterada pela velocidade, sendo para um lado ou para outro.

Como fazemos isso? Vamos pensar. Se queremos que a posição SEMPRE seja alterada, precisamos tirar essa linha posicaoX = posicaoX + velocidade da condicional, porque isso faz com que seja executado só de vez em quando. Mas ao tirar isso da condicional, o que entra no if? Sim, a decisão sobre qual é a velocidade!

let posicaoX, velocidade, raio;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
  velocidade = 3;
  raio = 25;
}

function draw() {
  background(220);
  circle(posicaoX, 200, raio * 2);
  posicaoX = posicaoX + velocidade;
  
  if (posicaoX < width - raio) {
    velocidade = 3;
  }
  else {
    velocidade = -3;
  }
}

Ah…. Quase funcionou! Como resolvemos esse problema? Talvez possamos pensar na condicional um pouco diferente. Que tal a seguinte frase: Quando a posição X do círculo estiver menor ou igual ao raio dele, a velocidade deve ser POSITIVA, para que vá para a direita. Quando a posição X do círculo estiver na borda do grid, mudamos a velocidade para NEGATIVA.

let posicaoX, velocidade, raio;

function setup() {
  createCanvas(400, 400);  
  posicaoX = 0;
  velocidade = 3;
  raio = 25;
}

function draw() {
  background(220);
  circle(posicaoX, 200, raio * 2);
  posicaoX = posicaoX + velocidade;
  
  if (posicaoX >= width - raio) {
    velocidade = -3;
  }
  if (posicaoX <= raio) { // tiramos o ELSE e colocamos esse if
    velocidade = 3;
  }
}