Variáveis locais e globais

Variáveis locais e globais

Quando variáveis são criadas dentro de um bloco, como por exemplo dentro de um FOR, IF ou WHILE, essas só existirão enquanto esse bloco for executado. Finda a execução do bloco, as eventuais variáveis nele criadas deixam de existir. Além disso, caso exista outra variável de mesmo nome fora desse bloco, essa é ignorada dentro do mesmo, valendo a que foi nele criada, e volta a valer, com o mesmo valor que já possuía, quando o bloco termina sua execução. O mesmo vale para o bloco de uma função. Variáveis criadas dentro da setup() só existirão durante sua execução. Variáveis criadas na draw() serão recriadas a cada execução da draw(), perdendo-se eventuais conteúdos de execuções anteriores. Então, não dá para criar uma variável dentro da setup(), iniciá-la com algum valor e depois acessá-la na draw(). Variáveis importantes para o programa, que precisam ser acessadas dentro de diferentes funções são chamadas de variáveis globais e precisam ser declaradas fora das funções, como mostrado no exemplo a seguir.

let largura; // criamos a variável global fora dos blocos das funções

function setup() {
  createCanvas(400, 400);
  largura = width / 3; // na setup() iniciamos a variável global com um valor...
}

function draw() {
  line(0, 0, largura, 200); // ...e usamos o valor no bloco draw!
}

Criando animações

Execute o código a seguir, que permite movimentar um quadrado pela tela com o mouse.

function setup() {
  createCanvas(1000, 1000);
  fill(255); // preenchimento na cor branca
}

function draw() {
  background(0); // fundo preto (apaga tudo)
  rect(mouseX, mouseY, 30, 30);
}

Devido à execução da função background(), a cada repetição da função draw() a janela é apagada antes do novo quadrado ser desenhado. Como resultado, temos uma animação bastante simples. Animações computadorizadas em geral funcionam a partir desse princípio: apagar a tela anterior e desenhar uma nova imagem (ou várias imagens), gerando com isso a ilusão de movimento.

Experimente incluir a chamada da função noCursor() dentro da setup(). O cursor do mouse será apagado e será como se o quadrado passasse a ser o novo cursor.

Atividade 2

Substitua o cursor por imagens vetoriais em formato SVG (veja o capítulo anterior).

Agora procure entender o funcionamento do programa a seguir, que move um quadrado na diagonal da tela.

// variáveis globais
let xq, yq, moveXq, moveYq; // posição e incrementos que geram movimentos

function setup() {
  createCanvas(1000, 1000);
  fill(255); // preenchimento na cor branca
  xq = 0;
  yq = 0; // inicia no canto superior esquerdo
  moveXq = 2;
  moveYq = 2; // valores a incrementar repetidamente a posição
}

function draw() {
  background(0); // fundo preto (apaga tudo)
  rect(xq, yq, 20, 20);
  xq = xq + moveXq;
  yq = yq + moveYq; // atualiza a posição
}

Atividade 3

Modifique o programa anterior para fazer outros tipos de movimentos, envolvendo mais elementos geométricos e eventualmente desenhos vetoriais se movendo pela tela. Pense também: como você faria para mudar a direção do movimento? E para aumentar a velocidade?

Atividade 4

Crie um programa que faz uma animação de um círculo que surge numa posição aleatória e se move numa direção e sentido aleatórios. Pense em como evitar que o desenho saia fora da janela.