Condicional IF

Em programação, muitas vezes precisamos que o código tome decisões: executar uma instrução apenas quando determinada situação acontece, ou escolher entre caminhos diferentes dependendo de um valor. Para isso usamos as estruturas condicionais. O comando if permite executar um bloco de instruções somente quando uma condição for verdadeira.

A estrutura do if tem, no mínimo, duas partes:

1. uma condição, escrita entre parênteses, que é avaliada como verdadeira ou falsa;
2. um bloco de instruções, entre chaves, que só é executado quando a condição é verdadeira.

Também é possível acrescentar um bloco else, que é executado quando a condição é falsa, e blocos else if, para testar outras condições em sequência.

O formato do comando if é o seguinte:

if (condição) {
  // bloco executado se a condição for verdadeira
} else {
  // bloco executado se a condição for falsa
}

Nesse exemplo, a condição é testada uma única vez. Se ela for verdadeira, o primeiro bloco é executado; caso contrário, o bloco do else é executado. Diferente do for, o if não repete nada sozinho — ele apenas decide qual caminho seguir.

Exemplo 1: mudar a cor de acordo com um valor

Uma aplicação simples do if no p5.js é decidir a aparência de uma forma com base no valor de uma variável. No exemplo abaixo, o círculo é pintado de vermelho se o tamanho for maior que 100, e de azul caso contrário.

function setup() {
  createCanvas(400, 400);
  background(255);

  let tamanho = 120;

  if (tamanho > 100) {
    fill(255, 0, 0);
  } else {
    fill(0, 0, 255);
  }

  ellipse(200, 200, tamanho, tamanho);
}

Exemplo 2: reagir à posição do mouse

O if fica ainda mais interessante quando combinado com a função draw(), que roda continuamente. No exemplo a seguir, a cor do fundo muda dependendo de em qual metade da tela o mouse está: usamos if, else if e else para tratar três situações diferentes.

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

function draw() {
  if (mouseX < 150) {
    background(255, 200, 200);
  } else if (mouseX < 250) {
    background(200, 255, 200);
  } else {
    background(200, 200, 255);
  }

  ellipse(mouseX, mouseY, 40, 40);
}