Variáveis, Condicionais e
Loops
©2
01
5 D
r. W
alte
r F.
de
Aze
ve
do
Jr.
1
azevedolab.net
2
Exercício de Programaçãowww.processing.org
Exercício de programação: 1) Use a figura da joaninha que você gerou na aula anterior
e a transforme numa figura dinâmica, usando-se as funções setup() e draw(). 2)
Permita que a joaninha interaja com o mouse, variando sua posição na tela. 3) Permita
que as cores das pintas mudem conforme a posição do mouse. 4) Permita que a cor
dos olhos mude conforme a posição do mouse. Use um padrão de cores diferente do
usado para as manchas.
O programa ladybug03.pde traz os requisitos descritos no slide anterior. Abra o código
e verifique os trechos relativos à mudança de cor e interação com o mouse.
3
Programa ladybug03.pdewww.processing.org
Já vimos o conceito de variável no curso de Python. Na linguagem de programação
Processing temos que declarar as variáveis, de forma que o programa aloque o
tamanho de memória adequado para cada variável. Vejamos os tipos de variáveis que
iremos usar no presente curso.
Variáveis do tipo boolean, podem ser true ou false;
Variáveis do tipo char, usadas para strings;
Variáveis do tipo byte, para números entre –128 e 127;
Variáveis do tipo short, para números entre –32768 e 32767;
Variáveis do tipo int, para números entre –2147483648 e 2147483647;
Variáveis do tipo long, para números acima da faixa acima;
Variáveis do tipo float, para números com ponto decimal;
Variáveis do tipo double, para números com ponto decimal, mas com maior precisão.
4
Variáveiswww.processing.org
Os nomes de variáveis em Processing seguem as mesmas regras vistas para
linguagem Python. Abaixo temos um exemplo para declaração de variável inteira (int).
Na primeira linha definimos a variável a como inteira e, na segunda linha, atribuímos 5
à variável a.
Podemos declarar uma variável em uma linha de código, como no exemplo abaixo.
Além de atribuirmos valores numéricos, ou strings, ou ainda, valores lógicos, podemos
atribuir expressões algébricas, envolvendo variáveis, como em alguns dos exemplos
abaixo (em vermelho).
5
Variáveiswww.processing.org
int a; // Declare an int named a
a = 5; // Assign 5 to variable a
int a = 5; // Declare an int named a and assign 5 to it
int count = 0; // Declare an int named count, assigned the value 0
char letter = ' a'; // Declare a char named letter, assigned the value 'a'
double d = 132.32; // Declare a double named d, assigned the value 132.32
boolean happy = false; // Declare a boolean named happy, assigned the value false
float x = 4.0; // Declare a float named x, assigned the value 4.0
float y; // Declare a float named y (no assignment)
y = x + 5.2; // Assign the value of x plus 5.2 to the previously declared y
float z = x *y + 15.0; // Declare a variable named z, assign it the value which
// is x times y plus 15.0.
Podemos declarar as variáveis em qualquer parte do código, por enquanto, vamos
declarar as variáveis no início do código. Como no código para o programa
moving_circle01.pde. Declaramos as variáveis inteiras circleX e circleY, com as
coordenadas do centro do círculo. Em seguida temos a função setup(), que define a
janela. Na função draw(), definimos a cor de fundo e da linha, funções
background(255) e stroke(0), respectivamente. Definimos a cor de preenchimento,
fill(175). A função ellipse() usa as variáveis circleX e circleY para definir o centro, em
seguida temos a equação circleX = circleX + 1, que atualiza a coordenada circleX em
cada ciclo de execução da função draw(). O resultado de executarmos o código, é que
temos um circulo movendo-se da esquerda para direita.
6
Variáveiswww.processing.org
int circleX = 0;
int circleY = 100;
void setup() {
size(480, 200);
}
void draw() {
background(255);
stroke(0);
fill(175);
ellipse(circleX, circleY, 50, 50);
circleX = circleX + 1;
}
O programa moving_circle02.pde traz três declarações de variáveis, além das duas
anteriores, variáveis circleX e circleY, temos uma nova variável do tipo float para o
tamanho do círculo, circleSize. Além disso, usamos mouseX e mouseY, para
modificarmos o centro do círculo, conforme a posição do mouse. Vejam, mouseX e
mouseY, também são variáveis, essas variáveis são chamadas variáveis de sistema.
Ao executarmos o código, vemos que o centro do círculo é definido pelo mouse, e o
círculo cresce de forma contínua. No próximo slide temos o código completo, com
destaque para a nova função ellipse(), que introduz as variáveis de sistema mouseX e
mouseY, para a definição do centro.
7
Variáveiswww.processing.org
int circleSize = 0;
int circleX = 0;
int circleY = 100;
void setup() {
size(480, 480);
}
void draw() {
background(0);
stroke(255);
fill(175);
ellipse(circleX + mouseX, circleY + mouseY, 50+circleSize, 50+circleSize);
circleSize = circleSize + 1;
circleX = circleX + 1;
}
Código para programa moving_circle02.pde
8
Variáveiswww.processing.org
No programa moving_circle03.pde, usamos as coordenadas do mouse, definidas pela
variáveis de sistema mouseX e mouseY, para que a cor da bola seja mudada durante
seu trajeto. As coordenadas do mouse são atribuídas às variáveis r e g, que são
usadas como argumentos para função fill(r,g,0).
9
Variáveiswww.processing.org
int circleX = 0;
int circleY = 100;
float r;
float g;
void setup() {
size(480, 200);
}
void draw() {
background(255);
stroke(0);
r = mouseX;
g = mouseY;
fill(r,g,0);
ellipse(circleX, circleY, 50, 50);
circleX = circleX + 1;
}
Ao definirmos o nome de uma variável, devemos ter cuidado para não usarmos os
mesmos nomes das variáveis de sistema. Além das variáveis de sistema mouseX e
mouseY, temos as variáveis mostradas na lista abaixo.
frameRate: Taxa de quadros do segundo.
screen.width: Largura da tela em pixels.
screen.height: Altura da tela em pixels.
key: A última tecla precionada do teclado.
keyCode: Código numérico para última tecla pressionada do teclado.
keyPressed: Retorna true ou false, se uma tecla for pressionada.
mousePressed: Retorna true ou false, se o mouse for pressionado.
mouseButton: Retorna que botão do mouse foi pressionado.
10
Variáveiswww.processing.org
float r = 100;
float g = 150;
float b = 200;
float a = 2;
float diam = 80;
float x = 200;
float y = 200;
void setup() {
size(400, 400);
background(255);
smooth();
}
void draw() {
// Use those variables to draw an ellipse
stroke(0);
fill(r, g, b, a);
ellipse(x, y, diam, diam);
}
O programa ellipse_with_variables.pde usa variáveis para definirmos o centro e o
tamanho do círculo, variáveis x,y, e diam, respectivamente. Além disso, usamos uma
variável para definir a cor de preenchimento, usando-se o sistema RGB, variável a.
Aproveitamos a oportunidade para introduzirmos o conceito de transparência, o
quarto argumento da função fill(). A transparência permite que a cor de preenchimento
varie de totalmente transparente, valor 0, até opaco, valor 255. Como usamos a função
draw() a função é repetida e vai tornando-se opaca. Execute o código e veja o
resultado.
11
Variáveiswww.processing.org
Como na linguagem Python, a linguagem Processing tem uma função para números
pseudo-aleatórios, a função random(). A função random(x1,x2) retorna um número do
tipo float no intervalo [x1 e x2), ou seja, x2 não incluído. No exemplo abaixo é gerado
um retângulo, cuja a largura é um número do tipo float entre 1 e 100, sem incluir o 100.
Podemos converter o número aleatório gerado para inteiro, como mostrado no trecho
de código abaixo.
O trecho de código acima gera um inteiro entre 1 e 99.
12
Função random()www.processing.org
size(200,200);
float w = random(1,100);
rect(0,0,w,50);
size(200,200);
int w = int(random(1,100));
rect(0,0,w,50);
float r;
float g;
float b;
float a;
float diam;
float x;
float y;
void setup() {
size(400, 400);
background(0);
smooth();
}
void draw() {
// Fill all variables with random values
r = random(256);
g = random(256);
b = random(256);
a = random(256);
diam = random(20);
x = random(width);
y = random(height);
// Use values to draw an ellipse
noStroke();
fill(r, g, b, a);
ellipse(x, y, diam, diam);
}
Abaixo temos o código do programa random_variables01.pde. Este programa gera
uma série de círculos com posições, cores, transparência e diâmetros aleatórios. As
variáveis aleatórias estão em destaque.
13
Função random()www.processing.org
float r;
float g;
float b;
float a;
float diamX;
float diamY;
float x;
float y;
void setup() {
size(400, 400);
background(0);
smooth();
}
void draw() {
// Fill all variables with random values
r = random(256);
g = random(256);
b = random(256);
a = random(256);
diamX = random(20);
diamY = random(20);
x = random(width);
y = random(height);
// Use values to draw an ellipse
noStroke();
fill(r, g, b, a);
ellipse(x, y, diamX, diamY);
}
No programa random_variables02.pde temos que a largura e altura são distintas e
aleatórias, gerando elipses, ao invés de círculos. Abaixo temos o código.
14
Função random()www.processing.org
15
Exercício de Programaçãowww.processing.org
Exercício de programação: Modifique o código do programa zoog06.pde, de forma que
os olhos tenham cores do sistema RGB definidos de forma aleatória. Além disso, o
Zoog surge da parte inferior da tela e vai subindo. Para os olhos, use variáveis
aleatórias eyeR, eyeG e eyeB. Para o movimento, substitua as variáveis de sistema,
mouseX e mouseY pelas variáveis do tipo float, zoogX e zoogY. Estas variáveis terão
valores iniciais definidos na função setup(), como indicado abaixo. Chame o novo
programa de zoog07.pde . As reticências (...) no trecho de código abaixo, não fazem
parte do código, indicam que você tem que completar o código, programando a função
draw(), seguindo as diretrizes estabelecidas acima.
float zoogX;
float zoogY;
float eyeR;
float eyeG;
float eyeB;
void setup() {
size(480, 480);
zoogX = width/2; // Zoog always starts in the middle
zoogY = height + 100; // Zoog starts below the screen
smooth();
}
.....
Os condicionais if, else e else if são similares aos equivalentes vistos em Python. A
principal diferença, é que o bloco vinculado à ocorrência de cada uma deles, deve ficar
limitado por chaves. Vejamos a estrutura geral abaixo.
Podemos incluir o else if, equivalente ao elif do Python, como no pseudocódigo abaixo.
16
If, else e else ifwww.processing.org
if (expressão booleana) {
// bloco de código vinculado à condição verdadeira
}
else {
// bloco de código vinculado à condição falsa
}
if (expressão booleana 1) {
// bloco de código vinculado à condição verdadeira da expressão booleana 1
}
else if (expressão booleana 2) {
// bloco de código vinculado à condição verdadeira da expressão booleana 2
else {
// código vinculado à condição falsa
}
As expressão booleanas são testes lógicos de condições, tais como maior que (>),
menor que e outros. A tabela abaixo tem a lista dos operadores relacionais.
Maior que: >
Maior ou igual: >=
Menor que: <
Menor ou igual: <=
Igual: ==
Diferente: !=
Além dos operadores relacionais, podemos usar operadores lógicos, como ou (or), e
(and) e negação (not). Abaixo seguem os operadores lógicos em Processing.
Operador ou: ||
Operador e: &&
Operador negação: !
17
If, else e else ifwww.processing.org
No programa random_variables03.pde temos um nova variável aleatória, myFig, que
varia entre 1 e 4, sem incluir o 4. Usamos a função int(random(1,4)), para assim
geramos números inteiros entre 1 e 3. Realizamos o teste da variável myFig, se for
igual a 1, desenhamos uma elipse, se for igual a 2, desenhamos um círculo, e para 3,
desenhamos um retângulo, este trecho está vermelho no código mostrado no próximo
slide. O resultado é a geração de figuras aleatórias nos aspectos de cores,
transparência, posição e tipo de figura, como mostrado abaixo.
18
If, else e else ifwww.processing.org
float r;
float g;
float b;
float a;
float diamX;
float diamY;
float x;
float y;
float myFig;
void setup() {
size(400, 400);
background(0);
smooth();
}
void draw() {
// Fill all variables with random values
r = random(256);
g = random(256);
b = random(256);
a = random(256);
diamX = random(20);
diamY = random(20);
x = random(width);
y = random(height);
myFig = int(random(1,4));
// Use values to draw an ellipse
ellipseMode(CENTER);
rectMode(CENTER);
noStroke();
fill(r, g, b, a);
if (myFig == 1){
ellipse(x, y, diamX, diamY);
}else if (myFig == 2){
ellipse(x, y, diamX, diamX);
}else {
rect(x, y, diamX, diamY);
}
}
19
If, else e else ifwww.processing.org
float r = 150;
float g = 0;
float b = 0;
void setup() {
size(200, 200);
}
void draw() {
background(r, g, b);
stroke(255);
line(width/2, 0, width/2, height);
if (mouseX > width/2) {
r = r + 1;
} else {
r = r - 1;
}
if (r > 255) {
r = 255;
} else if (r < 0) {
r = 0;
}
}
O programa conditionals01.pde gera uma tela de 200 x 200 pixels e usa o código RGB
para gerar a cor de fundo. Usamos as variáveis de sistema width e height, para definir
uma linha e um if (mouseX > width/2), para testar se a variável de sistema mouseX é
maior que metade da largura, variável de sistema width/2. Se for, somamos 1 à variável
r, caso contrário, subtraímos 1 da variável r. Os ifs estão em destaque em vermelho no
código abaixo.
20
If, else e else ifwww.processing.org
float r = 150;
float g = 0;
float b = 0;
void setup() {
size(200, 200);
}
void draw() {
background(r, g, b);
stroke(255);
line(width/2, 0, width/2, height);
if (mouseX > width/2) {
r = r + 1;
} else {
r = r - 1;
}
if (r > 255) {
r = 255;
} else if (r < 0) {
r = 0;
}
}
O segundo if, testa se a variável r excedeu o valor de 255, fixando r = 255, caso esta
condição seja verdadeira. Em seguida temos um else if, que testa se r é menor que 0,
neste caso fixamos r = 0. Tais testes previnem que os valores atribuídos à variável r
excedam os limites (entre 0 e 255), visto que esta variável é usada para intensidade da
cor vermelha, na função background().
21
If, else e else ifwww.processing.org
Podemos limitar os valores a serem atribuídos a uma dada variável, por meio da
função constrain(). Esta função pede três argumentos, o primeiro é a variável a ser
limitada, o segundo é o valor mínimo, sendo o terceiro o valor máximo. Abaixo temos
um trecho de código que limita os valores das variáveis r, g, b à faixa de 0 a 255. Tal
atribuição de valores garante que as variáveis não passem de valores fixados.
No próximo slide temos um código onde os valores de RGB são limitados. Execute o
código conditionals02.pde e vincule mentalmente cada trecho de código à mudança de
cor que ocorre.
22
r = constrain(r, 0, 255);
g = constrain(g, 0, 255);
b = constrain(b, 0, 255);
If, else e else ifwww.processing.org
float r = 0;
float b = 0;
float g = 0;
void setup() {
size(200, 200);
}
void draw() {
background(r, g, b);
stroke(0);
line(width/2, 0, width/2, height);
line(0, height/2, width, height/2);
if (mouseX > width/2) {
r = r + 1;
} else {
r = r - 1;
}
if (mouseY > height/2) {
b = b + 1;
} else {
b = b - 1;
}
if (mousePressed) {
g = g + 1;
} else {
g = g - 1;
}
r = constrain(r, 0, 255);
g = constrain(g, 0, 255);
b = constrain(b, 0, 255);
}
Abaixo temos o código conditionals02.pde.
23
If, else e else ifwww.processing.org
void setup() {
size(200, 200);
}
void draw() {
background(255);
stroke(0);
line(100, 0, 100, 200);
line(0, 100, 200, 100);
// Fill a black color
noStroke();
fill(0);
if (mouseX < 100 && mouseY < 100) {
rect(0, 0, 100, 100);
} else if (mouseX > 100 && mouseY < 100) {
rect(100, 0, 100, 100);
} else if (mouseX < 100 && mouseY > 100) {
rect(0, 100, 100, 100);
} else if (mouseX > 100 && mouseY > 100) {
rect(100, 100, 100, 100);
}
}
No código conditionals03.pde introduzimos o uso do operador lógico &&. Veja que
testamos quatro condições, se for satisfeita uma dada condição, preenchemos de preto
um dado quadrante. Por exemplo, o primeiro if testa se as variáveis de sistema
mouseX e mouseY são ambas menores que 100, caso sejam, preenchemos o primeiro
quadrado da esquerda de preto. Analise as outras condições.
24
If, else e else ifwww.processing.org
Além das situações de testes analisadas, podemos usar uma variável booleana para
ser testada. Uma variável booleana admite valores true ou false. No código
conditionals04.pde testamos a posição do mouse, e caso esteja dentro do retângulo
central, e o mouse clicado, atribuímos true à variável button, caso contrário atribuímos
false. Com button verdadeiro desenhamos um fundo branco, caso contrário mantemos
o desenho inalterado.
25
If, else e else ifwww.processing.org
boolean button = false;
int x = 50;
int y = 50;
int w = 100;
int h = 75;
void setup() {
size(200, 200);
}
void draw() {
if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h && mousePressed) {
button = true;
} else {
button = false;
}
if (button) {
background(255);
stroke(0);
} else {
background(0);
stroke(255);
}
fill(175);
rect(x, y, w, h);
}
Abaixo temos o código para conditionals04.pde. Veja quantas condições são testadas
com o if.
26
If, else e else ifwww.processing.org
int x = 0;
int speed = 1;
void setup() {
size(200, 200);
smooth();
}
void draw() {
background(255);
x = x + speed;
if ((x > width) || (x < 0)) {
speed = speed * -1;
}
// Display circle at x location
stroke(0);
fill(175);
ellipse(x, 100, 32, 32);
}
O programa bouncing_ball.pde gera uma bola que se move e, ao atingir uma
extremidade, muda de direção. Para isto usamos um condicional if, onde verificamos
se o valor atribuído à variável da coordenada x, está fora do limite, e caso esteja,
invertemos o sinal do incremento, ou seja, multiplicamos por -1 a variável speed.
27
If, else e else ifwww.processing.org
O programa simple_gravity.pde simula a queda de uma bola de borracha que retorna
depois de atingir o solo. A simulação é bem simples, mas pode posteriormente, ser
modificada para adicionarmos mais realismo físico à simulação. Veja que toda vez que
a variável y excede a variável de sistema height, reduzimos a velocidade 0.95. Note
que os valores das variáveis não tem realismo físico. Não foi introduzidos valores para
a aceleração da gravidade, mas, mesmo sem realismos físico, a simulação
graficamente é interessante. Além disso, com poucas linhas de código conseguimos
obter nossa simulação. No próximo slide temos o código completo, em destaque temos
o teste que inverte o movimento da bola.
28
If, else e else ifwww.processing.org
float x = 100; // x location of ball
float y = 0; // y location of ball
float speed = 0; // speed of ball
float gravity = 0.1;
void setup() {
size(200, 480);
}
void draw() {
background(255);
// Display the ball
fill(0);
noStroke();
ellipseMode(CENTER);
ellipse(x, y, 10, 10);
y = y + speed;
speed = speed + gravity;
// If ball reaches the bottom reverse speed
if (y > height) {
speed = speed * -0.95;
}
}
Código para o programa simple_gravity.pde.
29
If, else e else ifwww.processing.org
30
Exercício de Programaçãowww.processing.org
Exercício de programação: Modifique o código do programa zoog07.pde, de forma que
o Zoog se movimente pela tela, com variação da velocidade ao longo x e y. Chame o
novo código de zoog08.pde.
Vimos loop while() na linguagem Python, de forma similar temos loop while em
Processing, que segue o seguinte esquema.
Como vimos em Python, temos que ter uma variável sentinela, que muda seu estado
durante a execução do loop. Até que a condição do loop while deixe de ser verdadeira.
Abaixo temos um trecho de código que desenha sucessivos retângulos, até que a
condição não seja mais satisfeita.
31
Loop whilewww.processing.org
while (condição) {
// bloco de código que é repetido enquando a condição for verdadeira
}
// Bloco de código vinculado quando a condição deixa de ser verdadeira.
size(300,400);
int y = 10;
while (y < height) {
rect(100, y, 100, 10);
y = y + 30;
}
O loop for tem uma definição mostrada abaixo.
No loop acima, o valor inicial do i é zero, e o bloco vinculado ao loop é executado.
Depois, é somado 1 à variável i e testada a condição ( i < 10), caso seja satisfeita o
bloco de código é executado mais uma vez. O processo se repete, até que a condição
(i < 10) não seja mais satisfeita, e o loop for é encerrado. Podemos usar i ++, como
incremento. Podemos ter i = i -1 para decremento, ou i--.
32
Loop forwww.processing.org
for (int i = 0; i < 10; i = i + 1)) {
// bloco de código que é repetido enquando a condição (i<10) for verdadeira
}
// Bloco de código vinculado quando a condição deixa de ser verdadeira.
void setup() {
size(200, 200);
}
void draw() {
background(255);
for (int y = 0; y < height; y += 10) {
stroke(0);
line(0, y, width, y);
}
}
Abaixo temos o código loop_for.pde, que desenha linhas horizontais, enquanto o y for
menor que a variável de sistema height.
33
Loop forwww.processing.org
34
Exercício de Programaçãowww.processing.org
Exercício de programação: Modifique o código do programa zoog08.pde, de forma que
o Zoog seja usado um loop for para definirmos múltiplos braços para o Zoog. Chame o
novo código de zoog09.pde.
35
Exercício de Programaçãowww.processing.org
Exercício de programação: Programe um jogo para simulação da queda de um disco
voador (flying_saucer01.pde). O disco sofre uma pane em seu motor de dobra
espacial, e começa o processo de queda livre. O único recurso que sua tripulação tem,
é tentar ativar a força de anti-gravidade auxiliar (antigrav), que pode proporcionar uma
queda mais controlada. Use a variável de sistema mousePressed para acionar o
antigrav. Uma forma possível de implementar o antigrav está mostrada no trecho de
código abaixo.
Veja que, além de ativar o antigrav, que é uma redução na velocidade de queda, speed
= speed * -0.45, mostramos uma mensagem no console, com a função println("Your
score",score).
void mousePressed(){
speed = speed * -0.45;
println("Your score",score);
}
36
Exercício de Programaçãowww.processing.org
Exercício de programação (continuação): Crie um sistema de pontuação, cada ciclo de
execução da função draw() soma 1 à variável score. Use a variável de sistema height
para ter acesso a altura do seu disco voador. O jogo acaba quando y> height, quando
isto ocorre, o programa mostra uma mensagem no console, indicando o fim de jogo e o
escore. Por exemplo:
Implemente no seu código um condicional if que testa se o escore é maior que 2000,
caso seja, subtraímos 300 pixels da coordenada y, abaixo temos uma implementação
possível para esta tarefa, esta subtração faz o disco aumentar sua altitude de voo.
Veja que temos uma variável score_antigrav, que é incrementada toda vez que o
antigrav é acionado. Esta variável, do tipo float, terá valor inicial 2000.
Use a criatividade para desenhar o seu disco voador!
println("Your score ",score);
println("Game Over!");
if (score > score_antigrav ) {
println("Super antigrav!");
y = y -300;
score_antigrav = score_antigrav + 1700;
}
37
Exercício de Programaçãowww.processing.org
Meu disco voador.
-MODEL, Mitchell L. Bioinformatics Programming Using Python. Sebastopol: O’Reilly Media, Inc., 2011. 1584 p.
-REAS, Casey & FRY, Bem. Geeting Started with Processing. Sebastopol: O’Reilly Media, Inc., 2010. 194 p.
-SHIFFMAN, Daniel. Learning Processing. A Beginner’s Guide to Programming Images, Animation, and Interaction.
Burlington: Morgan Kaufmann, 2008. 453 p.
-SHIFFMAN, Daniel. The Nature of Code: Simulating Natural Systems with Processing. Mountain View: The Nature of Code,
2012. 498 p.
Última atualização: 25 de agosto de 2015.
38
Referênciaswww.processing.org
Top Related