azevedolab.net Variáveis, Condicionais e Loops 2015 Dr. Walter F. de Azevedo Jr.

Transcrição

1 azevedolab.net 2015 Dr. Walter F. de Azevedo Jr. Loops Variáveis, Condicionais e 1

2 Exercício de Programação 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. 2

3 Programa ladybug03.pde 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

4 Variáveis 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 e 32767; Variáveis do tipo int, para números entre e ; 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

5 Variáveis 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. int a; a = 5; // Declare an int named a // Assign 5 to variable a Podemos declarar uma variável em uma linha de código, como no exemplo abaixo. int a = 5; // Declare an int named a and assign 5 to it 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). 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 = ; // Declare a double named d, assigned the value 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 ; // Declare a variable named z, assign it the value which // is x times y plus

6 Variáveis 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. 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; 6

7 Variáveis 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

8 Variáveis Código para programa moving_circle02.pde 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; 8

9 Variáveis 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). 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; 9

10 Variáveis 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

11 Variáveis 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. 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); 11

12 Função random() 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. size(200,200); float w = random(1,100); rect(0,0,w,50); Podemos converter o número aleatório gerado para inteiro, como mostrado no trecho de código abaixo. size(200,200); int w = int(random(1,100)); rect(0,0,w,50); O trecho de código acima gera um inteiro entre 1 e

13 Função random() 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. 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); 13

14 Função random() 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. 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); 14

15 Exercício de Programação 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; zoogy = height + 100; smooth();... // Zoog always starts in the middle // Zoog starts below the screen 15

16 If, else e else if 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. if (expressão booleana) { // bloco de código vinculado à condição verdadeira else { // bloco de código vinculado à condição falsa Podemos incluir o else if, equivalente ao elif do Python, como no pseudocódigo abaixo. 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 16

17 If, else e else if 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

18 If, else e else if 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

19 If, else e else if 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

20 If, else e else if 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. 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; 20

21 If, else e else if 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(). 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; 21

22 If, else e else if 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. r = constrain(r, 0, 255); g = constrain(g, 0, 255); b = constrain(b, 0, 255); 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

23 If, else e else if Abaixo temos o código conditionals02.pde. 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); 23

24 If, else e else if 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. 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); 24

25 If, else e else if 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

26 If, else e else if Abaixo temos o código para conditionals04.pde. Veja quantas condições são testadas com o if. 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); 26

27 If, else e else if 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. 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); 27

28 If, else e else if 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 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

29 If, else e else if Código para o programa simple_gravity.pde. 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; 29

30 Exercício de Programação 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. 30

31 Loop while Vimos loop while() na linguagem Python, de forma similar temos loop while em Processing, que segue o seguinte esquema. 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. 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. size(300,400); int y = 10; while (y < height) { rect(100, y, 100, 10); y = y + 30; 31

32 Loop for O loop for tem uma definição mostrada abaixo. 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. 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

33 Loop for Abaixo temos o código loop_for.pde, que desenha linhas horizontais, enquanto o y for menor que a variável de sistema height. void setup() { size(200, 200); void draw() { background(255); for (int y = 0; y < height; y += 10) { stroke(0); line(0, y, width, y); 33

34 Exercício de Programação 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. 34

35 Exercício de Programação 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. void mousepressed(){ speed = speed * -0.45; println("your score",score); 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). 35

36 Exercício de Programação 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: println("your score ",score); println("game Over!"); 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. if (score > score_antigrav ) { println("super antigrav!"); y = y -300; score_antigrav = score_antigrav ; 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 Use a criatividade para desenhar o seu disco voador! 36

37 Exercício de Programação Meu disco voador. 37

38 Referências -MODEL, Mitchell L. Bioinformatics Programming Using Python. Sebastopol: O Reilly Media, Inc., p. -REAS, Casey & FRY, Bem. Geeting Started with Processing. Sebastopol: O Reilly Media, Inc., p. -SHIFFMAN, Daniel. Learning Processing. A Beginner s Guide to Programming Images, Animation, and Interaction. Burlington: Morgan Kaufmann, p. -SHIFFMAN, Daniel. The Nature of Code: Simulating Natural Systems with Processing. Mountain View: The Nature of Code, p. Última atualização: 25 de agosto de