Introdução à Programação usando Processing Programação Gráfica 2D Chamada a funções e variáveis Exercícios de Fixação 2º Semestre 2009 > PUCPR > Design

Introdução à Programaçãousando ProcessingProgramação Gráfica 2DChamada a funções e variáveis

Exercícios de Fixação

2º Semestre 2009 > PUCPR > Design Digital

Bruno C. de PaulaBruno C. de Paula

Revisão

211/04/23

311/04/23

Variáveis

int a=1; int b= 2; int c= 3; int d;

411/04/23

tipo nome = valor;

“Defina uma variável chamada nome do tipo inteiro, com valor inicial de 10”

int minhaVar = 10;

Chamada a funções

511/04/23

Existem diferentes tipos de funçõesSem parâmetro:

–noStroke();–noFill();

Com parâmetros:– rect(10,10,20,30);

Com retorno:–max(20,30);

Podem ter efeitos colaterais;

611/04/23

rect

20

30

40

50

rect(20,30,40,50);

rect:Desenha um retângulo

4 parâmetrosNenhum retornoEfeito colateral: desenha um retângulo

http://www.processing.org/reference/rect_.html

max

40

50

max(40,50);

50

max:Retorna o maior entre dois números

1 parâmetro1 retorno

http://www.processing.org/reference/max_.html

floor2.88

max(floor(2.88), floor(3.88));

2

floor3.88 3

max 3

dist

20

30

60

60

float d = dist(20,30,60,30);

dist:Calcula a distância entre 2 pontos.

4 Parâmetros1 RetornoSem efeitos colaterais

40d

40

1111/04/23

Exercícios

Exercício 01

Identifique qual é o tipo, o nome, o valor inicial e o valor final para cada um dos fragmentos de código a seguir

1211/04/23

Objetivo do exercício

Revisar o conceito de variáveis;Entender melhor como funcionam os

operadores aritméticos;Conhecer a técnica de teste de mesa

que permite que possamos entender o passo a passo de nossos programas.

1311/04/23

Letra a) Variável perimetro

int largura = 30; int altura = 40; int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;

1411/04/23

Letra a) RESPOSTA EXEMPLO

int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2;

Tipo de dado da variável: intNome da variável: perimetroValor inicial: 0;Valor final: 140

1511/04/23

Raciocício da letra AComo você deve resolver?

1611/04/23

Execute mentalmente o algorimo dado, passo a passo, ou seja, linha por linha.OUCrie uma tabela em que cada coluna representa o comportamento de uma variável;Cada coluna indica uma variável;Cada linha indica a modificação da variável.Execute passo a passo o algoritmo.


1711/04/23

largura altura perimetro

int largura = 30;int altura = 40;int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;


1811/04/23


30



1911/04/23


30 40



2011/04/23


30 40 0



2111/04/23


30 40 0

60



2211/04/23


30 40 0

60

140



int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2;

Tipo de dado da variável: intNome da variável: perimetroValor inicial: 0;Valor final: 140

2311/04/23

Letra b) Variável largura

float largura = 100.0;rect(10,10,largura,10);largura = largura * 2;rect(10,10,largura,10);largura = largura * 2;rect(10,10,largura,10);

2411/04/23

Letra c) Variável largura e variável escalafloat largura;float altura = 50;int escala = 2;largura = (altura / 2) * escala;escala = escala + 1;largura = (altura / 2) * escala;escala = escala + 1;largura = (altura / 2) * escala;

2511/04/23

Letra d) Variáveis m e p float m = 99; float p= 3; p = (m % 4) * 10; m = m + 1; p = (m % 4) * 10; m = m + 1; p = (m % 4) * 10; m = m + 1; p = (m % 4) * 10; m = m + 1; p = (m % 4) * 10; m = m + 1; p = (m % 4) * 10; m = m + 1;

2611/04/23

Veja a dica a seguir!

Dica para resolver a letra d)

% = Resto inteiro da divisão;6 % 3 é igual a 0

–6 dividido por 3 dá 2– resto é 0.

14 % 4 é igual a 2–14 dividido por 4 é igual a 3 –4*3 = 12– resto é 2.

2711/04/23

Dica para resolver a letra d)

35 % 3 é igual a 2–35 dividido por 3 é igual a 11 –3 * 11 = 33– resto é 2.

3 % 10 é igual a 3–3 dividido por 10 é igual a 0 –3 * 0 = 0– resto é 3.

2811/04/23

Comportamento periódico do operador %

2911/04/23

x X % 3

0 0

1 1

2 2

3 0

4 1

5 2

6 0

Exercício 02

Utilizando a variável width e a variável height deixe o código a seguir dependente da largura e altura, ou seja, quando você alterar estes parâmetros com a função size as proporções devem ser mantidas.

3011/04/23

Letra a)

size(400,500);rect(100,100,200,300);

3111/04/23


size(400,500); rect(width/4,height/5,width/2,height/5*3);

3211/04/23

size(400,500);

3311/04/23

size(350,140);

Letra b)

size(500,600);triangle(250,0,500,300,0,300);

3411/04/23

Letra c)

size(300,300);ellipse(100,100, 40, 40);ellipse(200,200, 40, 40);

3511/04/23

Letra d)

size(500,500); quad(100,100, 250, 250, 400, 100, 250, 400);

3611/04/23

Exercício 03

A partir do desenho fornecido e do esqueleto de código, complete o código que gera o desenho

3711/04/23

Objetivo do exercícioConhecer novas funções do Processing,

utilizando recursos da programação gráfica que você pode não ter utilizado em seus exercícios anteriores;

Treinar o uso de variáveis em seu código;

Estimular o uso da referência do Processing:– Português;– Inglês.

3811/04/23

http://www.dainf.cefetpr.br/~merkle/processing/reference/ptBR/index_ext.html

http://www.processing.org/reference/

Letra a

Dicas: – função arc desenha arcos;– rotate trabalha com ângulos em

radianos.

3911/04/23

size(200,200);background(0);smooth();fill(236,237,41);translate(??1??, ??2??);arc(0,0,100,100, ??3??,??4??);rotate(-PI/4);translate(0,-width/8);fill(0);ellipse(??5??, ??6??,10,10);

4011/04/23

Resposta!

4111/04/23

size(200,200);background(0);smooth();fill(236,237,41);translate(width/2,height/2);arc(0,0,100,100,PI/5,TWO_PI-PI/5);rotate(-PI/4);translate(0,-width/8);fill(0);ellipse(0,0,10,10);

4211/04/23

Letra b

Dicas: – função strokeWeight altera o pincel.

4311/04/23

size(200,200); background(255); smooth(); stroke(0,255,0); strokeWeight(5); fill(255,0,0); arc(??1??,??2??,width/2,width/2,0,??3??);

4411/04/23

Letra c

Dicas: – função smooth elimina o serrilhado.

4511/04/23

size(300,200);background(255);smooth();translate(??1??,??2??);ellipse(0,0,width/2,width/2);fill(255,255,0);ellipse(0,0,??3??,??4??);rotate(PI/4);translate(0,??5??);fill(54,255,109);ellipse(0,0,??6??,??7??);

4611/04/23

Letra d

Dicas: – função elipse desenha elipses.

4711/04/23

size(240,200);background(255);smooth();ellipse(width/2,30,??1??,??2??);ellipse(width/2,60, ??3??,??4??);ellipse(width/2,90, ??5??,??6??);ellipse(width/2,120, ??7??,??8??);ellipse(width/2,150, ??9??,??10??);ellipse(width/2,180, ??11??,??12??);

4811/04/23

Letra e

Dicas: – função scale faz zoom em relação ao

eixo cartesiano.

4911/04/23

size(300,300);strokeWeight(5);line(10,??1??,??2??, 0);line(100,0,100,190);line(90,??3??,??4??,190);line(0,0, 0, 190);translate(110,0);scale(??5??);line(10,??6??,??7??, 0);line(100,??8??,??9??,190);line(90,190,10,190);line(0,0, 0, 190);

5011/04/23

Letra f

Dicas: –As cores são determinadas por um

valor de vermelho, verde e azul.–O quarto parâmetro na função stroke

ou fill determina a transparência.

5111/04/23

size(200,200);smooth();strokeWeight(100);stroke(255,0,0,128);point(??1??,??2??);stroke(0,255,0,128);point(??3??,??4??);stroke(0,0,255,128);point(??5??,??6??);

5211/04/23

Letra g

Dicas: –Função random sorteia um número

entre um intervalo e outro.

5311/04/23

size(200,300); PFont f = createFont("",50,true); float aleat = random(1,10); int aleat2 = int(aleat); textFont(f); textAlign(CENTER); background(255); fill(255,0,0); quad(??1??,10,??2??,??3??,width/2,height-10,10,height/2);

line(30,??4??,??5??,??6??); fill(255,255,255); text(??7??,width/2,height/2);

5411/04/23

Letra h

Dicas: –Função triangle desenha um triângulo

dados 3 pontos.

5511/04/23

fill(128,80); translate(??1??,??2??); rotate(??3??); triangle(0,??4??,??5??,0,-50,0); rotate(??3??); triangle(0,??4??,??5??,0,-50,0); rotate(??3??); triangle(0,??4??,??5??,0,-50,0); rotate(??3??); triangle(0,??4??,??5??,0,-50,0); rotate(??3??); triangle(0,??4??,??5??,0,-50,0); rotate(??3??); triangle(0,??4??,??5??,0,-50,0);

5611/04/23

Letra i (desafio)

Dicas: –Função bezier desenha uma curva de

bezier.

5711/04/23

size(200,100); background(0); stroke(255); strokeWeight(4); noFill(); smooth(); translate(width/2,0); bezier(0,??1??, ??2??, ??3??, 0, 90, 50, 90);

bezier(0,??4??, ??5??, ??6??, 0, 90, -50, 90);

line(??7??,??8??,??9??,??10??);

5811/04/23

Letra j (desafio)

Dicas: –Função map faz a “regra de 3”;

• Remapeamento entre um intervalo e outro;• map (15, 10, 20, 100, 200); retorna 150

5911/04/23

size(300,250); float x, p1 = 10, p2 = 60; PFont f = createFont("",10,true); textFont(f); background(128); smooth(); strokeWeight(7); line(10,200,290,200); x = map(??1??,0,100,??2??,??3??); line(x,210,x, 190); text(p1,x,190); x = map(??4??,0,100,??5??,??6??); line(x,210,x, 190); text(p2,x,190);

6011/04/23

Documents

Introdução à Programação usando Processing Programação Gráfica 2D Chamada a funções e variáveis Exercícios de Fixação 2º Semestre 2009 > PUCPR > Design