Vamos utilizar o código anterior, mas agora com algumas alterações para torná-lo mais interessante.

int x = 1;

void setup()
{ 
  size(480,360);
  frameRate(30);
  smooth();
}

void draw()
{
  if (x > 30)
  background(150);
  else 
  background(0);
  
    
  strokeWeight(2);
  fill(0,0,255);
  ellipse(100.,height*0.25,80.,80.);
  fill(255,0,0);
  ellipse(300.,height*0.25,80.,120.);
  
  strokeWeight(3);
  rect(100.,height*0.6,80.,80.);
  fill(0,255,0);
  rect(300.,height*0.6,80.,120.);
  
  strokeWeight(5);
  line(100.,height*0.5,350.,height*0.5);
  
  strokeWeight(12);
  line(450.,height*0.15,450.,height*0.95);
  
  x++;
  if (x == 60)
      x = 0;

}

Use CTRL+R e veja o programa em execução. Vamos ver as mudanças que realizamos.

Logo na primeira linha definimos uma variável. Usamos a variável x como controle para nossa animação, conforme explicamos adiante. Dentro da função setup(), você vê a expressão frameRate(30). Como ela, definimos quantas vezes a função draw() é executada em cada segundo. Neste caso, a função draw() será executada 30 vezes por segundo. Altere esse valor algumas vezes, tanto valores maiores como menores, e veja o efeito.

Temos duas linhas que definem a cor de fundo. Explicamos isso em alguns instantes. No momento, note que utilizamos apenas um valor para a cor, com background(150). Este é um modo de utilização do padrão RGB. Com um único valor, este será utilizado para as três cores do padrão.

Outro acréscimo importante são as linhas com fill(a,b,c). Nesta linha definimos a cor de preenchimento do que será desenhado na tela após a sua definição. Por exemplo, em sua primeira aparição no código temos fill(0,0,255). Neste momento definimos uma cor de preenchimento. Abaixo dessa linha definimos uma elipse, que terá o preenchimento com a essa cor. Mas logo após, temos a linha fill(255,0,0), definindo outra cor. Assim, as figuras indicadas daí para frente utilização esta nova cor, até que apareça novamente outro fill(a,b,c).

Se você compilou/rodou o programa, viu que ele não é estático como o programa anterior. A cor de fundo fica alternando entre duas cores diferentes. Como fizemos isto? Utilizando a mágica proporciona pela função draw(). Lembre-se que a função draw() é executada várias vezes por segundo. Em nosso caso, 30 vezes por segundo. Definimos essa taxa de repetição quando escrevemos frameRate(30), conforme já explicado. Portanto, alterar a cor de fundo é simples: basta alterar os valores quando escrevemos background(a,b,c). Para isso servem as linhas no começo e no final da função draw(). Veja o trecho do código que estamos falando.

  if (x > 30)
  background(150);
  else 
  background(0);
(...)
  x++;
  if (x == 60)
      x = 0;

Na primeira linha do código, declaramos e atribuímos um valor para uma variável (int x = 1;). Esta será a variável de controle para alterar a cor de fundo. No início da função draw(), utilizamos um simples if..else para verificar o valor de x. Se x for menor que 30, usamos background(150); se for maior, usamos background(0). Se não escrevermos mais nada, também nada acontece. Como definimos a variável com x = 1 no início do código, sempre seria escolhida a opção background(150). Mas como a função draw() é executada várias vezes por segundo, cada vez que ela é executada o valor de x é incrementado em uma unidade. Fazemos isso com x++ quase no fim do código.

Dessa forma, a variável x inicia o programa utilizando o valor 1, mas aumenta para 2, 3, e assim por diante, cada vez que draw() é executada. Quando x passar a valer 30, o if...else fará a escolha por background(0). E para garantir que a cor fique alternando, usamos mais um if para retornar o valor de x para zero.

Use a sua criatividade. Com esses simples exemplos você já viu como desenhar várias formas geométricas na tela, como alterar características como espessura da linha, cor de preenchimento das figuras, cor de fundo da janela, e até a ideia básica para gerar uma animação por utilizar a função draw(). Na próxima seção você verá uma animação mais interessante.