Map, text e slider

Na última aula nós conseguimos fazer nossa bolinha ir e voltar. Uma das coisas que não fizemos foi fazer a velocidade definida por parâmetro continuar a mesma, independente de para onde a bolinha estiver indo. Se quisermos ir para a “esquerda”, a velocidade é a que definimos no início mas negativa. Se for para a “direita”, positiva. Como mudamos o mesmo valor só trocando o sinal?

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 = velocidade * -1;
	}
	if (posicaoX <= raio) {
		velocidade = velocidade * -1;
	}
}

Pronto! Agora a velocidade troca de sinal sempre e tudo vai dar certo 😬.

Não funcionou… Por quê!? 😩

Estamos fazendo duas verificações. A primeira é sobre a bolinha chegando na borda da direita. Se a posição X vai passar a largura do canvas (até o raio da bolinha), não deixamos, fazemos ela voltar:

if (posicaoX >= width - raio) {
	  velocidade = velocidade * -1;
}

E se a posição X vai passar o raio (para a esquerda), também não deixamos! Fazemos ela dar meia volta

if (posicaoX <= raio) {
		velocidade = velocidade * -1;
}

O problema é que nesse momento a bolinha tenta ir para a direita, mas a condição continua verdadeira. Precisamos fazer a seguinte pergunta: vc está vindo da direita? Se sim, invertemos, se não, não precisamos inverter. Como fazer isso? Podemos verificar a própria velocidade! Se ela for negativa, está vindo da direita para a esquerda.

if (posicaoX <= raio && velocidade < 0) {
		velocidade = velocidade * -1;
}

Pronto!

Agora vamos fazer os desafios que deixamos?

1. Fazer na diagonal

let posicaoX, posicaoY, velocidade, raio;

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

function draw() {
  background(220);
  circle(posicaoX, posicaoY, raio * 2);
  posicaoX = posicaoX + velocidade;
  posicaoY = posicaoY + velocidade;
  
  if (posicaoX >= width - raio) {
	  velocidade = velocidade * -1;
	}
	if (posicaoX <= raio && velocidade < 0) {
		velocidade = velocidade * -1;
	}
}

1. Colocar uma mudança de cor ao bater nas bordas

let posicaoX, posicaoY, velocidade, raio;

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

function draw() {
  background(220);
  circle(posicaoX, posicaoY, raio * 2);
  posicaoX = posicaoX + velocidade;
  posicaoY = posicaoY + velocidade;
  
  if (posicaoX >= width - raio) {
      fill(255, 0, 0);
	  velocidade = velocidade * -1;
	}
	if (posicaoX <= raio && velocidade < 0) {
      fill(0, 255, 0);
	  velocidade = velocidade * -1;
	}
}

Hoje vamos pensar em um problema: como podemos fazer o background mudar de cor de acordo com a posição do mouse? Basta usarmos mouseX ou mouseY, certo?

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

function draw() {
  background(mouseX);
}

O problema é que antes de eu atingir o final da largura do canvas, ele já ficou branco. Não é o que eu queria. Queria que ele ficasse branco só quando eu chegasse lá no fim dele com o mouse (na horizontal).

Será que tem algum jeito de fazermos isso?

O p5.js nos dá um comando que nos ajuda muito com isso. Quero apresentar a vocês o comando map.

O que é o map? Qual é sua anatomia?

map(valor, começo_1, parada_1, começo_2, parada_2)

O map faz um mapeamento entre dois intervalos. Então se temos um canvas que vai de 0 a 400 de largura, esses são os valores possíveis para nosso mouseX, certo? Dessa maneira, precisamos mapear os valores entre 0 a 400 para os valores de mínimo e máximo de cores, sendo de 0 a 255.

Ou seja, quando o mouseX for 400, a cor tem que ser 255, quando for 0, a cor tem que ser 0. E quando estiver no meio, uma conta tem que ser feita para saber qual é o valor mapeado.

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

function draw() {
  let bgColor = map(mouseX, 0, 400, 0, 255);
  background(bgColor);
}

Funciona! 🎉

Até agora vimos como desenhar coisas, animá-las, condicioná-las, mudar suas cores, mapear intervalos… Ufa! Agora queremos conseguir colocar um texto no nosso sketch!

Como fazer isso? Usando o comando text!

Esse comando é bastante simples: ele escreve algo no canvas em uma posição determinada por suas posições x e y.

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

function draw() {
  background(222);
  
  text("Olá, mundo!", 200, 200);
}

Uma coisa legal é que podemos usar emojis!

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

function draw() {
  background(222);
  
  text("Olá, mundo! 🌎", 200, 200);
}

Mas nós mal conseguimos ler…. Como aumentar isso?

Usamos o comando textSize.

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

function draw() {
  background(222);
  textSize(40);
  text("Olá, mundo! 🌎", 70, 200);
}

Yay! E agora eu queria muito mudar o tamanho do texto de maneira a descobrir qual fica legal. Mas não queria usar mouseX ou mouseY. Será que tem jeito?

Podemos usar algum controle de interface para nos ajudar com a mudança dos valores de uma variável…. Quê?

Vamos adicionar uma coisa no nosso sketch que traz um controle, uma maneira de controlarmos algum valor por input do usuário. Vamos conhecer o slider!

let slider;

function setup() {
  createCanvas(400, 400);
  
  slider = createSlider(10, 255);
  slider.position(10, 10);
  slider.size(80);
}

function draw() {
  background(222);
  let tamanhoTexto = slider.value();
  textSize(tamanhoTexto);
  text("Olá, mundo! 🌎", 70, 200);
}

Olha só, agora conseguimos fazer o tamanho do texto mudar de acordo com um controle nosso! Podemos ter mais de um slider!? SIM! Olha essa ideia que legal, usar sliders para determinar cores!

let sliderR, sliderG, sliderB;

function setup() {
  createCanvas(400, 400);
  
  sliderR = createSlider(0, 255, 0);
  sliderG = createSlider(0, 255, 0);
  sliderB = createSlider(0, 255, 0);
  
  sliderR.position(10, 10);
  sliderR.size(80);
  
  sliderG.position(90, 10);
  sliderG.size(80);
  
  sliderB.position(170, 10);
  sliderB.size(80);
}

function draw() {
  background(222);
  
  let r = sliderR.value();
  let g = sliderG.value();
  let b = sliderB.value();
  fill(r, g, b);
  circle(200, 200, 100);
}

Perceba que precisamos lidar com as posições dos sliders e também com os valores padrão dos mesmos, como terceiro parâmetro do comando createSlider.