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;
}
}