60
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 Digital Bruno C. de Paula
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
220/04/23
320/04/23
Variáveis
int a=1; int b= 2; int c= 3; int d;
420/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
520/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;
620/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
max
40
50
max(40,50);
50
max:Retorna o maior entre dois números
1 parâmetro1 retorno
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
1120/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
1220/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.
1320/04/23
Letra a) Variável perimetro
int largura = 30; int altura = 40; int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;
1420/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
1520/04/23
Raciocício da letra AComo você deve resolver?
1620/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.
Raciocício da letra AComo você deve resolver?
1720/04/23
largura altura perimetro
int largura = 30;int altura = 40;int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver?
1820/04/23
largura altura perimetro
30
int largura = 30;int altura = 40;int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver?
1920/04/23
largura altura perimetro
30 40
int largura = 30;int altura = 40;int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver?
2020/04/23
largura altura perimetro
30 40 0
int largura = 30;int altura = 40;int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver?
2120/04/23
largura altura perimetro
30 40 0
60
int largura = 30;int altura = 40;int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver?
2220/04/23
largura altura perimetro
30 40 0
60
140
int largura = 30;int altura = 40;int perimetro = 0;perimetro = largura*2;perimetro = perimetro + altura*2;
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
2320/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);
2420/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;
2520/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;
2620/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.
2720/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.
2820/04/23
Comportamento periódico do operador %
2920/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.
3020/04/23
Letra a)
size(400,500);rect(100,100,200,300);
3120/04/23
Letra a) RESPOSTA EXEMPLO
size(400,500); rect(width/4,height/5,width/2,height/5*3);
3220/04/23
size(400,500);
3320/04/23
size(350,140);
Letra b)
size(500,600);triangle(250,0,500,300,0,300);
3420/04/23
Letra c)
size(300,300);ellipse(100,100, 40, 40);ellipse(200,200, 40, 40);
3520/04/23
Letra d)
size(500,500); quad(100,100, 250, 250, 400, 100, 250, 400);
3620/04/23
Exercício 03
A partir do desenho fornecido e do esqueleto de código, complete o código que gera o desenho
3720/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.
3820/04/23
Letra a
Dicas: – função arc desenha arcos;– rotate trabalha com ângulos em
radianos.
3920/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);
4020/04/23
Resposta!
4120/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);
4220/04/23
Letra b
Dicas: – função strokeWeight altera o pincel.
4320/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??);
4420/04/23
Letra c
Dicas: – função smooth elimina o serrilhado.
4520/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??);
4620/04/23
Letra d
Dicas: – função elipse desenha elipses.
4720/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??);
4820/04/23
Letra e
Dicas: – função scale faz zoom em relação ao
eixo cartesiano.
4920/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);
5020/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.
5120/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??);
5220/04/23
Letra g
Dicas: –Função random sorteia um número
entre um intervalo e outro.
5320/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);
5420/04/23
Letra h
Dicas: –Função triangle desenha um triângulo
dados 3 pontos.
5520/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);
5620/04/23
Letra i (desafio)
Dicas: –Função bezier desenha uma curva de
bezier.
5720/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??);
5820/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
5920/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);
6020/04/23
