Introdução à Programação Gráfica 

usando Processing

INTERAÇÃO

É a estrutura de controle do fluxo lógico que permite executar diversas vezes um mesmo trecho do algoritmo até que uma certa condição seja satisfeita.

Existem diversos tipos de estruturas de repetição, o que as diferencia é o local no qual a condição é tratada.

Permite executar diversas vezes o mesmo trecho 

Cada execução é chamada de iteração

Pára quando uma certa condição for satisfeita

Nessa estrutura, um fluxo de execução será repetido enquanto uma certa condição esteja sendo satisfeita. 

while (condição)
    comando a ser executado

Caso haja mais de um comando a ser executado, eles devem ser separados linha a linha ou por ponto e vírgulas. Para delimitar o bloco, todos os comandos a serem executados devem estar entre colchetes ({}). 

while (condição)
{
    primeiro comando a ser executado
    segundo comando a ser executado
    ...
    comando n a ser executado
}

Dessa forma, a condição é testada antes de executar o trecho de código. Ou seja, se, da primeira vez o resultado for falso, os comandos não são executados nenhuma vez.

Observe que se a condição for sempre verdadeira, a estrutura de repetição se repete indefinidamente e o programa fica travado em um loop infinito. Neste caso, o processamento fica travado nesta linha.

Repete enquanto a condição for verdadeira (true)

Condição testada antes de executar o código

while(condição)

{

   primeira instrução;

   segunda instrução;

   //...

}

Nessa estrutura, um fluxo de execução será repetido pelo menos uma vez. Cada vez que terminar a execução de um dos fluxos, o teste condicional é feito para verificar se o fluxo é executado novamente. 

do
           comando a ser executado
while (condição)

Caso haja mais de um comando a ser executado, eles devem ser separados linha a linha ou por ponto e vírgulas. Para delimitar o bloco, todos os comandos a serem executados devem estar entre chaves ({}). 

do
{
          primeiro comando a ser executado
    segundo comando a ser executado
          ...
    comando n a ser executado
     } while (condição)

Dessa forma, a condição é testada depois de executar o trecho de código. Ou seja, se, da primeira vez o resultado da condição for falso, mesmo assim os comandos são executados pelo menos uma vez.

Repete enquanto a condição for verdadeira (true)

Condição testada depois de executar o código

do

{

   // Instrução 1

   // Instrução 2

} while(condição);

Ocorrem casos que é difícil determinar quantas vezes um bloco será executado. Sabe-se que ele será executado quando uma certa condição for satisfeita. Às vezes, não é intuitivo determinar quantas vezes um bloco vai ser executado. Nestas vezes, os comandos while e do while são recomendados.
No caso de se saber quantas vezes um bloco deve ser executado, o comando for permite a execução de um bloco um número determinado de vezes. 

for (inicialização;condição;incremento)
              comando

Caso haja mais de um comando a ser executado, eles devem ser separados linha a linha ou por ponto e vírgulas. Para delimitar o bloco, todos os comandos a serem executados devem estar entre chaves ({}). 

for (inicialização;condição;incremento)
{
    comando 1
    ...
    comando n
     }

O comando for é equivalente a: 

inicialização
while (condição)
{
comando 1
...
comando n
           incremento
      }

 

Por exemplo: 

for (num=1;num<=10;num=num+1)
             comando

É equivalente a: 

num=1 
while (num<=10) {    
            comando    num = num + 1
     }

Repete enquanto a condição for verdadeira (true)

for (inicialização; condição ; incremento)

{

    comando 1;

    comando 2;

// ...

} 

inicialização
while (condição)
{
comando 1
...
comando n
           incremento
}

Às vezes, trabalha-se com condições complexas que são difíceis de serem representadas no início ou no final de um bloco. Dessa forma, a estrutura de repetição com teste no meio utiliza-se do comando break que é útil para interromper a repetição a qualquer momento da execução. Quando o fluxo é interrompido, passa-se, diretamente, para o fluxo imediatamente superior. 

while (true) //Ou outra condição
{
          primeiro comando a ser executado
    segundo comando a ser executado
          if (condição)
        break
          terceiro comando a ser executado
     n comando a ser executado
      }

O comando continue interrompe a execução de uma iteração do laço e passa para a próxima. Quando o comando continue é chamado dentro de um “for” o controle passa para o comando de incremento.

Interrompe a estrutura e passa para a próxima iteração

Estrutura Quando é testada a condição Quantidade de
execuções 		Efeito do comando continue
while início 0 ou mais Passa para a próxima
iteração, ou seja, testa a condição
do while fim 1 ou mais Passa para a próxima
iteração, ou seja, testa a condição
for início 0 ou mais Faz o incremento e depois testa
a condição
Teste no meio Qualquer lugar Depende se utiliza while, do
while ou for 		Depende se utiliza while, do while ou for.

 

É possível misturar a estrutura de repetição com a estrutura condicional.

Em mais um exemplo, o degradê é obtido através do desenho de uma linha e alteração de cor ao mesmo tempo.

Por padrão, a estrutura for produz repetições em uma dimensão. Colocando uma estrutura for dentro da outra, pode-se iterar por duas dimensões. No exemplo a seguir, o ponto percorre as linhas e colunas durante a execução.

void setup() {

  size(200,300);

}

void draw() {

  background(128);

  for(int x=0;x<mouseX;x=x+10) {

    line(x,10,x,200);

  }

}

void setup() {

  size(300,300);

  noFill();

  smooth();

}

void draw() {

  background(255);

  for(int i=10;i<mouseY;i=i+5) {

    ellipse(width/2, height/2, i, i);

  }

}

void setup() {

  size(255,255);

 

}

void draw() {

  background(255);

  for(int x=0;x<mouseX;x = x + 10) {

    for(int y=0;y<mouseY;y=y+10) {

      point(x, y);

    }

  }

}

void setup() {

  size(255,255);

 

}

void draw() {

  background(255);

  translate(width/2,height/2);

  // Map é a função "regra de três"

  float m = map(mouseX,0,width,0,10);

  for(int i=0;i<m;i++) {

    line(0,0,0,mouseY);

    rotate(2*PI/10);

  }

}

Nem todos os computadores possuem dois botões

Variáveis para trabalhar com mouse

A posição do mouse também é refletida como uma variável do Processing. Tais variáveis só fazem sentido quando acessadas no modo contínuo do Processing. Por exemplo, a variável mouseX contém a posição do mouse no eixo horizontal e a variável mouseY contém a posição do mouse no eixo vertical. Lembre-se: o valor de mouseY, diferentemente da matemática, sobe de cima para baixo em um programa.

O mouse pode determinar também a posição de desenho dos elementos.

Outras duas variáveis úteis em relação à interação com o mouse são as variáveis pmouseX e pmouseY. Tais variáveis permitem que se obtenha o valor de posicionamento do mouse no frame anterior. A combinação de mouseX, mouseY, pmouseX e pmouseY permite a criação de diferentes efeitos de desenho.

Funções para trabalhar com mouse

Ocorre quando o usuário arrasta o mouse na tela

Funções geralmente relacionadas com mouse

PFont f;

void setup() {

  size(300,300);

  f = createFont("Arial", 15);

  textFont(f);

}

void draw() {

  background(0);

  text("mouseX = " + mouseX, 10, 20);

  text("mouseY =" + mouseY, 10, 60);

}

void setup() {

  size(300,300);

}

void draw() {

  background(0);

  // O retangulo segue o cursor.

  rect(mouseX, mouseY, width/3, height/3);

}

A alteração no valor do rectMode altera a posição de desenho da figura. Para desligar a visualização do cursor, chame a função noCursor().

void setup() {

  size(300,300);

  noCursor();

}

void draw() {

  background(0);

  // O retângulo é desenhado em relação ao centro

  rectMode(CENTER);

    // O retangulo segue o cursor.

  rect(mouseX, mouseY, width/5, height/5);

  ellipse(mouseX,height/2, width/5, height/5);

  ellipse(width/2,mouseY, width/5, height/5);

}

void setup() {

  size(300,300);

  noCursor(); // Desliga o mouse

}

void draw() {

  background(0);

  ellipse(width/2, height/2, mouseX, mouseY);

}

void setup() {

  size(255,255);

}

void draw() {

  background(mouseX);

  rectMode(CENTER);

  translate(width/2,height/2);

  fill(mouseY);

  rect(0,0, 60,60);

}

A função map serve como uma regra de 3.

void setup() {

  size(600,400);

}

void draw() {

  background(0);

  fill(mouseX, 0, 0);

  // O retângulo vai até o fim da tela

  rect(0, height/2, mouseX, 10);

}

void setup() {

  size(600,400);

}

void draw() {

  background(0);

  // mouseX vai de 0 a width. Gostaria que fosse de 0 a 255

  float cor = map(mouseX, 0, width, 0, 255);

  fill(cor, 0, 0);

  // O retângulo vai até o meio da tela

  // mouseX vai de 0 até width. Gostaria que fosse de 0 a width/2

  float larguraBarra = map(mouseX, 0, width, 0, width/2);

  rect(0, height/2, larguraBarra, 10);

}

void setup() {

  size(600,400);

}

void draw() {

  point(mouseX, mouseY);

}

void setup() {

  size(600,400);

}

void draw() {

  line(mouseX, mouseY, pmouseX, pmouseY);

}

void setup() {

  size(600,400);

  smooth();

  strokeWeight(12);

  stroke(0,0,0,128);

}

void draw() {

  // Só desenhe o ponto quando o mouse for pressionado

  if(mousePressed) {

    point(mouseX, mouseY);

  }

}

void setup() {

  size(600,400);

  smooth();

  stroke(0,0,0,128);

}

void draw() {

  // O tamanho da linha é aleatório

  strokeWeight(random(5, 15));

  // Só desenhe a linha quando o mouse for pressionado

  if(mousePressed) {

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

}

void setup() {

  size(600,400);

  smooth();

  stroke(0,0,0,128);

  background(128);

}

void draw() {

  // O tamanho da linha é aleatório

  strokeWeight(random(5, 15));

  // Só desenhe a linha quando o mouse for pressionado

  if(mousePressed) {

    // Se for o botão esquerdo

    if(mouseButton==LEFT) {

      line(mouseX, mouseY, pmouseX, pmouseY);

    }

    // Se for o botão direito

    if(mouseButton==RIGHT) {

      // Salva a tela

      saveFrame();

      // Limpa a tela

      background(128);

    }

  }

}

void setup() {

  size(600,400);

  smooth();

  strokeWeight(10);

  background(128);

}

void draw() {

  // A cor é aleatória

  stroke(random(0, 256), random(0, 256), random (0, 256), 128);

  // Só desenhe a linha quando o mouse for pressionado

  if(mousePressed) {

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

}

void setup() {

  size(600,400);

  smooth();

  strokeWeight(10);

  background(128);

}

void draw() {

  // A cor é aleatória

  stroke(random(0, 256), random(0, 256), random (0, 256), 128);

  // Só desenhe a linha quando o mouse for pressionado

  if(mousePressed) {

    // mouseX deve estar restrito entre 100 e largura menos 100

    float mx = constrain(mouseX, 100, width-100);

    float my = constrain(mouseY, 100, height-100);

    float pmx = constrain(pmouseX, 100, width-100);

    float pmy = constrain(pmouseY, 100, height-100);

    line(mx, my, pmx, pmy);

  }

}

float x, largura;

void setup() {

  size(600,400);

  x = width/2;

  largura = 50;

}

void draw() {

  fill(0);

  if(mousePressed) {

    // Se x for maior que mouseX e x+largura for menor que mouseX

    if( (x < mouseX) && (x+largura > mouseX) ) {

      fill(255);

    }

  }

  rect(x, 0, largura, height);

}

float x, larguraX, y, larguraY;

void setup() {

  size(600,400);

  x = width/2;

  y = height/2;

  larguraX = 50;

  larguraY = 60;

}

void draw() {

  fill(0);

  if(mousePressed) {

    // Se x for maior que mouseX e x+largura for menor que mouseX

    if( (x < mouseX) && (x+larguraX > mouseX) &&

        (y < mouseY) && (y+larguraY > mouseY) ) {

      fill(255);

    }

  }

  rect(x, y, larguraX, larguraY);

}

float x, y, raio;

void setup() {

  size(600,400);

  x = width/2;

  y = height/2;

  raio = 30;

}

void draw() {

  background(128);

  // Movimento browniano

  x = x + random(-5, 5);

  y = y + random(-5, 5);

  fill(0);

  if(mousePressed) {

    if( dist(x, y, mouseX, mouseY)<raio) {

      fill(255);

    }

  }

  ellipse(x, y, raio*2, raio*2);

}

float x, y;

color corObj;

color corColisao;

void setup() {

  size(600,400);

  x = width/2;

  y = height/2;

  corColisao = color(255,0,0);

}

void draw() {

  background(128);

  // Movimento browniano

  x = x + random(-2, 2);

  y = y + random(-2, 2);

  // Pinta os objetos de colisão, observe que são iguais aos

  // objetos pintados

  fill(corColisao);

  triangle(x, y, x+50, y, x+25, y-50);

  rect(x, y+10, 50, 50);

  // Checa a colisão

  corObj = color(0);

  if(mousePressed) {

    color cor = get(mouseX, mouseY);

    // Se a cor clicada for igual à cor de colisão

    if(cor == corColisao) {

      corObj = color(255);

    } else {

      corObj = color(0);

    }

  }

  // Desenha os objetos a serem mostrados

  // Neste caso, o objeto mostrado é igual ao objeto de colisão

  fill(corObj);

  triangle(x, y, x+50, y, x+25, y-50);

  rect(x, y+10, 50, 50);

}

float x, y;

PImage aviao, aviaoMask;

color corColisao = color(255,0,0);

PFont f;

String mensagem;

void setup() {

  size(600,400);

  x = width/2;

  y = height/2;

  f = createFont("Arial", 20);

  textFont(f);

  corColisao = color(255,0,0);

  aviao     = loadImage("aviaoTransp.png"); // Imagem original

  aviaoMask = loadImage("aviaoMask.png");   // Máscara

}

void draw() {

  background(128);

  // Movimento browniano

  x = x + random(-2, 2);

  y = y + random(-2, 2);

  // Desenha o objeto de colisão

  image(aviaoMask, x, y);

 

  // Checa a colisão

  mensagem = "";

  if(mousePressed) {

    // Obtém a cor exata na posição

    color cor = get(mouseX, mouseY);

    // Se a cor clicada for igual à cor de colisão

    if(cor == corColisao) {

      mensagem = "Acertou!";

    } else {

      mensagem = "Errou!";

    }

  }

  // Desenha os objetos a serem mostrados

  background(0,0,255);

  text(mensagem, 30, 60);

  image(aviao, x, y);

 

  // Como gerar a máscara dentro do Processing, se você não souber usar Gimp, Photoshop ou similar

  //aviao.filter(THRESHOLD, 1);

  //aviao.filter(ERODE);

  //aviao.save("aviaoMascara.png");

}

color cor;

void setup() {

  size(600,400);

  cor = color(0);

  noStroke();

}

void draw() {

  // Desenha as cores disponíveis

  noStroke();

  fill(255,0,0);

  rect(0,10,30,30);

  fill(0,255,0);

  rect(30,10,30,30);

  fill(0,0,255);

  rect(60,10,30,30);

 

  // Se o mouse for pressionado

  if(mousePressed) {

    // Se estiver na barra de cores

    if(mouseX>0 && mouseX<90 && mouseY>10 && mouseY<40) {

      cor = get(mouseX, mouseY);

    }

    stroke(cor);

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

}

color cor;

float tam;

int tamStroke;

void setup() {

  size(600,400);

  cor = color(0);

  noStroke();

  tam = 30;

  tamStroke = 1;

}

void draw() {

  // Desenha as cores disponíveis

  noStroke();

  fill(255,0,0);

  rect(0,10,tam,tam);

  fill(0,255,0);

  rect(30,10,tam,tam);

  fill(0,0,255);

  rect(60,10,tam,tam);

  fill(0);

  rect(90,10,tam,tam);

  fill(255);

  rect(120,10,tam,tam);

 

  // Se o mouse for pressionado

  if(mousePressed) {

    // Se estiver na barra de cores

    if(mouseX>0 && mouseX<(tam*3) && mouseY>0 && mouseY<10+tam) {

       cor = get(mouseX, mouseY);

    }

    // Clicou no botão, aumenta o stroke

    if(mouseX>90 && mouseX<90+tam && mouseY>10 && mouseY<10+tam) {

      strokeWeight(tamStroke);

      tamStroke++;

    }

   

    // Clicou no outro, diminui o stroke

    if(mouseX>120 && mouseX<120+tam && mouseY>10 && mouseY<10+tam) {

      strokeWeight(tamStroke);

      tamStroke--;

    }

    stroke(cor);

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

}

int pontos = 0;

PFont f;

float x, y;

void setup() {

  size(600,400);

  f = createFont("Arial", 20);

  textFont(f);

  x = width/2;

  y = height/2;

}

void draw() {

  background(0);

  fill(255,0,0);

  rect(x, y, 50, 50);

 

  // Sem usar o mouse clicked, a pontuação fica errada!

  if(mousePressed) {

    color cor = get(mouseX, mouseY);

    if(cor==color(255,0,0)) {

      pontos++;

    }

  }

 

  text(pontos, 20, 20);

}

Exemplo com mouseClicked, incrementando a pontuação apenas uma vez

Pontua depois que o mouse é solto

int pontos = 0;

PFont f;

float x, y;

color cor;

void setup() {

  size(600,400);

  f = createFont("Arial", 20);

  textFont(f);

  x = width/2;

  y = height/2;

}

void draw() {

  background(0);

  fill(255,0,0);

  rect(x, y, 50, 50);

  cor = get(mouseX, mouseY);

  text(pontos, 20, 20);

}

void mouseClicked() {

  if(cor==color(255,0,0)) {

     pontos++;

  }

}

Exemplo com mousePressed, incrementando a pontuação apenas uma vez

Pontua antes que o mouse é solto

int pontos = 0;

PFont f;

float x, y;

color cor;

void setup() {

  size(600,400);

  f = createFont("Arial", 20);

  textFont(f);

  x = width/2;

  y = height/2;

}

void draw() {

  background(0);

  fill(255,0,0);

  rect(x, y, 50, 50);

  cor = get(mouseX, mouseY);

  text(pontos, 20, 20);

}

void mousePressed() {

  if(cor==color(255,0,0)) {

     pontos++;

  }

}

float dragX, dragY;

void setup() {

  size(600,400);

 

}

void draw() {

  background(0);

  ellipse(dragX, dragY, 100, 100);

}

// Quando faz o drag & drop, atualiza as variáveis

// de posição da elipse

void mouseDragged() {

  dragX = mouseX;

  dragY = mouseY;

}

float dragX, dragY;

color cor;

void setup() {

  size(600,400);

  cor = color(255);

}

void draw() {

  background(0);

  fill(cor);

  ellipse(dragX, dragY, 100, 100);

}

// Quando faz o drag & drop, atualiza as variáveis

// de posição da elipse

void mouseDragged() {

  dragX = mouseX;

  dragY = mouseY;

  cor = color(255,0,0);

}

void mouseReleased() {

  cor = color(255);

}

// Adaptado de REAS 26-04

float dragX, dragY, moveX, moveY;

void setup() {

  size(600,400);

  smooth();

}

void draw() {

  background(0);

  fill(255);

  ellipse(dragX, dragY, 110, 110);

  fill(255,0,0);

  ellipse(moveX, moveY, 100, 100);

  fill(0,255,0);

  ellipse(mouseX, mouseY, 90, 90);

}

// Quando faz o drag & drop, atualiza as variáveis

// de posição da elipse

void mouseDragged() {

  dragX = mouseX;

  dragY = mouseY;

}

void mouseMoved() {

  moveX = mouseX;

  moveY = mouseY;

}

O teclado é, sem dúvida, um dos dispositivos de interação de maior  popularidade no uso de dispositivos eletrônicos. Desde teclados computadorizados, aparelhos celulares, eletrodomésticos como microondas, máquinas de escrever, e, até mesmo, brinquedos, a interação via teclado é conhecida por todos. O teclado do computador é derivado da interface da máquina de escrever. Mesmo que o computador tenha evoluído nas últimas décadas e deixado de ser meramente uma máquina de criar textos, o teclado persiste e foi adaptado para o uso em games, navegação pela Internet e comunicação pessoal.

Variáveis para trabalhar com o teclado

A última variável que se preocupa com o teclado é a variável keyPressed. Tal variável é um valor lógico que poderá ser utilizado para a tomada de decisões.

Exemplo de uso

if(keyPressed) {

  // Instruções executadas quando um botão estiver pressionado

}

Embora o valor de key seja um caractere também é possível convertê-lo para uma representação numérica. Essa representação numérica é derivada de uma tabela de caracteres chamada tabela ASCII. Esta tabela representa cada caractere com um valor diferente de 0 até 255. Por exemplo, entre 48 e 57 temos os valores dos caracteres de 0 a 9. Entre 65 e 90 tem-se o intervalo das letras maiúsculas.

if(keyPressed) {

  if((key=='a') || (key=='A')) {

      // Instruções executadas quando a tecla for 'a' ou 'A'

 }

}

if(keyPressed) {

  if(int(key)==65) {

    // 65 é o correspondente a 'A' em ASCII

  }

}

Enquanto a variável key retorna um caractere ASCII, a variável keyCode  permite que se utilize a representação para teclas especiais. Esta representação inclui também as teclas como: UP, DOWN, LEFT, RIGHT, ALT, SHIFT e CONTROL, por exemplo. Observe que keyCode representa a tecla e não a letra. Por exemplo, ao pressionar a tecla ‘A’, independente se o valor é minúsculo ou maiúsculo, o valor obtido é 65. O exemplo abaixo demonstra a diferença entre key e keyCode. Uma lista dos valores está disponível no site do Java.

if(key==CODED)  {

   if(keyCode==UP) {

      // Instruções quando a tecla para cima

   } else if(keyCode==DOWN) {

     // Instruções quando a tecla para baixo

   }

}

Funções para trabalhar com o teclado

Evite desenhar dentro do keyPressed

void keyPressed() {

   if(key=='a') {

      // Executa quando a tecla for 'a' 

   } else if(key=='b') {

     // Executa quando a tecla for 'b'

   }

}

void keyReleased() {

    //  Instruções executadas quando a tecla é solta

}

Funções geralmente relacionadas com teclado

switch(variavel) {

   case VALOR1:

       // instrução executada se variaval for igual a VALOR1

    break;

   case VALOR2:

      //  instrução executada se variaval for igual a VALOR2

   break;

   case VALOR3:

   case VALOR4:

    //  instrução executada se variaval for igual a VALOR3 ou VALOR4

   default:

   // Caso contrário (não é VALOR1, VALOR2, VALOR3 ou VALOR4

   break;

}

PFont f;

void setup() {

  size(600, 400);

  // Carrega a fonte com metade da altura da tela

  f = createFont("Arial", height/2);

  textFont(f);

  // Alinha o texto

  textAlign(CENTER, BASELINE);

}

void draw() {

  background(0);

  // Exibe a tecla pressionada no meio da tela

  text(key, width/2, height/2);

}

PFont f;

void setup() {

  size(600, 400);

  // Carrega a fonte com metade da altura da tela

  f = createFont("Arial", height/2);

  textFont(f);

  // Alinha o texto

  textAlign(CENTER, BASELINE);

}

void draw() {

  background(0);

  // Exibe o valor da tecla pressionada no meio da tela

  text(int(key), width/2, height/2);

}

PFont f;

void setup() {

  size(600, 400);

  // Carrega a fonte com metade da altura da tela

  f = createFont("Arial", height/2);

  textFont(f);

  // Alinha o texto

  textAlign(CENTER, BASELINE);

}

void draw() {

  background(128);

  // Exibe o valor da tecla pressionada no meio da tela

  text(int(key), width/2, height/2);

  // Exibe a tecla pressionada como uma linha

  line(key, 0, key, height);

}

PFont f;

void setup() {

  size(600, 400);

  // Carrega a fonte com metade da altura da tela

  f = createFont("Arial", height/2);

  textFont(f);

  // Alinha o texto

  textAlign(CENTER, BASELINE);

  // Retângulo centralizado

  rectMode(CENTER);

}

void draw() {

  background(128);

  // Exibe o valor da tecla pressionada no meio da tela

  text(int(key), width/2, height/2);

 

  // Está entre '0' e '9'

  if(key>=48 && key<=57)

  {

    rect(width/2, height/2, (48-key)* 10, (48-key)* 10);

  }

}

PFont f;

void setup() {

  size(600, 400);

  // Carrega a fonte com metade da altura da tela

  f = createFont("Arial", height/2);

  textFont(f);

  // Alinha o texto

  textAlign(CENTER, BASELINE);

  // Retângulo centralizado

  rectMode(CENTER);

}

void draw() {

  background(128);

  // Exibe o valor da tecla pressionada no meio da tela

  text(int(key), width/2, height/2);

 

  // Está entre '0' e '9'

  if(key>='0' && key<='9')

  {

    rect(width/2, height/2, (48-key)* 10, (48-key)* 10);

  }

}

Controle de movimento a partir do keyCode sem considerar quando  a tecla foi pressionada

float x, y;

void setup() {

  size(600, 400);

  x = width/2;

  y = height/2;

}

void draw() {

  if(key==CODED) {

    // Se for para a esquerda

    if(keyCode==LEFT) {

      x = x - 5;

    } else if(keyCode==RIGHT) { // Se for para a direita

      x = x + 5;

    }

  }

 

  background(128);

  ellipse(x, y, 20, 20);

}

Controle de movimento a partir do keyCode e do keyPressed

float x, y;

void setup() {

  size(600, 400);

  x = width/2;

  y = height/2;

}

void draw() {

  if(keyPressed) {

    if(key==CODED) {

      // Se for para a esquerda

      if(keyCode==LEFT) {

        x = x - 5;

      } else if(keyCode==RIGHT) { // Se for para a direita

        x = x + 5;

      }

    }

  }

 

  background(128);

  ellipse(x, y, 20, 20);

}

float x, y;

void setup() {

  size(600, 400);

  x = width/2;

  y = height/2;

}

void draw() {

  if(keyPressed && key==CODED) {

    switch(keyCode) {

      case UP:

        y = y - 1;

      break;

      case DOWN:

        y = y + 1;

      break;

      case LEFT:

        x = x - 1;

      break;

      case RIGHT:

       x = x + 1;

      break;

    }

  }

 

  background(128);

  ellipse(x, y, 20, 20);

}

float x, y;

float xAlvo, yAlvo;

void setup() {

  size(600, 400);

  x = width/2;

  y = height/2;

  xAlvo = random(100,width-100);

  yAlvo = random(100,height-100);

  smooth();

}

void draw() {

  // Verifica o teclado

  if(keyPressed && key==CODED) {

    switch(keyCode) {

      case UP:

        y = y - 1;

        break;

      case DOWN:

        y = y + 1;

        break;

      case LEFT:

        x = x - 1;

        break;

      case RIGHT:

        x = x + 1;

        break;

    }

  }

 

  // Move o inimigo

  xAlvo = xAlvo + random(-3,3);

  yAlvo = yAlvo + random(-3,3);

  // Verifica a colisão

  // 30 é igual à soma do raio da mira e do alvo

  if(dist(x,y,xAlvo,yAlvo)<30) {

    background(155,0,0);

  } else {

    background(128);

  }

  fill(100, 0, 0, 128);

  // Desenha a mira

  ellipse(x, y, 50, 50);

  line(x, y-25, x, y-5);

  line(x, y+25, x, y+5);

  line(x-25, y, x-5, y);

  line(x+25, y, x+5, y);

  // Desenha o alvo

  fill(0,255,0, 128);

  ellipse(xAlvo, yAlvo, 10, 10);

}

float x, y;

float xAlvo, yAlvo;

int pontos, vidaAlvo;

PFont f;

void setup() {

  size(600, 400);

  x = width/2;

  y = height/2;

  xAlvo = random(100,width-100);

  yAlvo = random(100,height-100);

  vidaAlvo = 3;

  smooth();

  f = createFont("Arial", 20);

  textFont(f);

}

void draw() {

  // Verifica o teclado

  if(keyPressed) {

    if(key==CODED) {

      switch(keyCode) {

      case UP:

        y = y - 1;

        break;

      case DOWN:

        y = y + 1;

        break;

      case LEFT:

        x = x - 1;

        break;

      case RIGHT:

        x = x + 1;

        break;   

      }

    }

    if(key==' ') {

      if(dist(x,y,xAlvo,yAlvo)<10) {

        vidaAlvo = vidaAlvo - 1;

      }

    }

  }

  // Move o inimigo

  if(vidaAlvo<0)

  {

    xAlvo = random(100,width-100);

    yAlvo = random(100,height-100);

    vidaAlvo = 3;

    pontos = pontos + 1;

  }

  xAlvo = xAlvo + random(-3,3);

  yAlvo = yAlvo + random(-3,3);

  // Verifica a colisão

  // 30 é igual à soma do raio da mira e do alvo

  if(dist(x,y,xAlvo,yAlvo)<30) {

    background(155,0,0);

  }

  else {

    background(128);

  }

  fill(100, 0, 0, 128);

  // Desenha a mira

  ellipse(x, y, 50, 50);

  line(x, y-25, x, y-5);

  line(x, y+25, x, y+5);

  line(x-25, y, x-5, y);

  line(x+25, y, x+5, y);

  // Desenha o alvo

  fill(0,255,0, 128);

  ellipse(xAlvo, yAlvo, 10, 10);

  // Desenha o placar

  text(pontos, 20, 20);

  // Desenha a vida do inimigo

  text(vidaAlvo, 20, 40);

}

float x, y;

float xAlvo, yAlvo;

int pontos, vidaAlvo;

PFont f;

void setup() {

  size(600, 400);

  x = width/2;

  y = height/2;

  xAlvo = random(100,width-100);

  yAlvo = random(100,height-100);

  vidaAlvo = 3;

  smooth();

  f = createFont("Arial", 20);

  textFont(f);

}

void draw() {

  // Verifica o teclado

  if(keyPressed) {

    if(key==CODED) {

      switch(keyCode) {

      case UP:

        y = y - 1;

        break;

      case DOWN:

        y = y + 1;

        break;

      case LEFT:

        x = x - 1;

        break;

      case RIGHT:

        x = x + 1;

        break;   

      }

    }

  }

  // Move o inimigo

  if(vidaAlvo<0)

  {

    xAlvo = random(100,width-100);

    yAlvo = random(100,height-100);

    vidaAlvo = 3;

    pontos = pontos + 1;

  }

  xAlvo = xAlvo + random(-3,3);

  yAlvo = yAlvo + random(-3,3);

  // Verifica a colisão

  // 30 é igual à soma do raio da mira e do alvo

  if(dist(x,y,xAlvo,yAlvo)<30) {

    background(155,0,0);

  }

  else {

    background(128);

  }

  fill(100, 0, 0, 128);

  // Desenha a mira

  ellipse(x, y, 50, 50);

  line(x, y-25, x, y-5);

  line(x, y+25, x, y+5);

  line(x-25, y, x-5, y);

  line(x+25, y, x+5, y);

  // Desenha o alvo

  fill(0,255,0, 128);

  ellipse(xAlvo, yAlvo, 10, 10);

  // Desenha o placar

  text(pontos, 20, 20);

  // Desenha a vida do inimigo

  text(vidaAlvo, 20, 40);

}

void keyPressed() {

  if(key==' ') {

    if(dist(x,y,xAlvo,yAlvo)<10) {

      vidaAlvo = vidaAlvo - 1;

    }

  }

}

PFont f;

String texto;

void setup() {

  size(600, 400);

  smooth();

  f = createFont("Arial", 20);

  textFont(f);

  texto = "";

}

void draw() {

  background(0);

  // Desenha o texto

  text(texto+"|", 20, 20);

}

void keyTyped() {

  if(key==BACKSPACE) {

    // Tira o último caractere do texto se possível

    if(texto.length() > 0)  {

      texto = texto.substring(0,texto.length()-1);

    }

  } else {

    texto = texto + key;

  }

}