1.5 Variáveis

Vamos dar continuidade aos nossos estudos de P5 e ver novos conceitos.

Até agora estamos trabalhando com valores inseridos diretamente dentro dos comandos do P5. Esse procedimento “engessa” o código, pois se precisarmos modificar um parâmetro q se repete, por exemplo, teremos q alterar um por um. Uma saída para este tipo de situação seria criar um recurso para facilitar a alteração de valores de um parâmetro. Para tanto vamos conhecer algo q é tão natural no dia a dia de um programador como é o ato de respirar: declarar variáveis.

Variável é um elemento q pode armazenar valores, ou seja, q pode variar seu conteúdo. Ao invés de associar valores diretamente no código, criamos variáveis, associamos valores a elas e inserimos as variáveis dentro do código. Uma vez feita uma alteração de valores na variável, todos os lugares dentro do código q usarem essa variável serão afetados pela mudança. Observe o código abaixo:

semaforo_sem_variavel

Temos um “semáforo” desenhado no meio da tela, formado por 3 pontos de mesmo tamanho (strokeWeight igual a 30 pixels) e cada um com um valor de cor (stroke) diferente. Suponhamos que eu deseje deslocar o “semafóro” para direita ou para a esquerda, por exemplo. Bastaria modificar o primeiro valor do comando point() dos 3 círculos, q atualmente é 200, ou seja, teremos q repetir uma operação três vezes para ter o resultado desejado. Imagine se fossem 100 ou 500 pontos? Como “otimizar ” essa operação e ganhar tempo? Podemos criar uma variável chamada posX (vc pode dar quase qualquer nome para uma variável pois existem exceções) e associar um valor a ela. Se eu quiser alterar a posição do semáforo, bastará modificar o valor da variável uma única vez, e tudo dentro do código q utilizar aquela variável sofrerá a mudança. Vejamos como vai ficar.

No início do código escrevemos let posX; para criarmos as variáveis chamadas globais. Dentro de function setup() {} eu escrevo o valor desejado para a variável criada. No nosso exemplo posX será igual a 200. Feito isso, precisamos agora inserir a variável “dentro” do código. Como desejamos q essa variável atue na coordenada X dos pontos criados, cada comando point() terá a variável posX no primeiro parâmetro dentro dos parênteses. O código ficará como abaixo:

semaforo_variavel

A princípio nada acontece, pois posX tem um valor q nós já usamos anteriormente, mas ao mudar o valor de 200 para 300 dentro de posX, todos os pontos do semáforo serão deslocados. Veja qto trabalho a gente economiza usando variáveis!

Indo um pouco além. Uma variável pode assumir diversos tipos de valores (números, palavras, inclusive comandos). Experimente digitar posX = random(width) logo acima do comando background(220) dentro de function draw() {} e veja o q acontece.

semaforo_variavel_random
O código acima, quando executado, apresenta o semáforo em diversas posições ao longo do eixo X, pois a variável posX assume valores aleatórios dentro a largura do canvas.
1.5 Variáveis