Variáveis, Condicionais e Loops - azevedolab.net · O programa ladybug03.pde traz os requisitos...

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


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


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


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;


}

Código para programa moving_circle02.pde

8


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


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


}

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


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


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


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() {


r = random(256);

g = random(256);

b = random(256);

a = random(256);

diamX = random(20);

diamY = random(20);

x = random(width);

y = random(height);


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


15


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


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


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() {


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


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


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


float r = 150;

float g = 0;

float b = 0;

void setup() {

size(200, 200);

}

void draw() {


stroke(255);



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


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


float r = 0;

float b = 0;

float g = 0;

void setup() {

size(200, 200);

}

void draw() {


stroke(0);


line(0, height/2, width, height/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


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


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


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


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


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


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


30



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



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çã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çã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


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

Variáveis, Condicionais e Loops - azevedolab.net · O programa ladybug03.pde traz os requisitos...

Documents

Transcript of Variáveis, Condicionais e Loops - azevedolab.net · O programa ladybug03.pde traz os requisitos...