2º Semestre 2009 > PUCPR > Design Digital

Apresentação em tema: "2º Semestre 2009 > PUCPR > Design Digital"— Transcrição da apresentação:

1 2º Semestre 2009 > PUCPR > Design Digital
Bruno C. de Paula 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

2 Revisão 25/03/2017

3 Variáveis int a=1; int b= 2; int c= 3; int d; 25/03/2017

4 tipo nome = valor; “Defina uma variável chamada nome do tipo inteiro, com valor inicial de 10” int minhaVar = 10; 25/03/2017

5 Chamada a funções 25/03/2017

6 Existem diferentes tipos de funções
Sem parâmetro: noStroke(); noFill(); Com parâmetros: rect(10,10,20,30); Com retorno: max(20,30); Podem ter efeitos colaterais; 25/03/2017

7 rect(20,30,40,50); rect: Desenha um retângulo 4 parâmetros
Nenhum retorno Efeito colateral: desenha um retângulo 30 40 50

8 max(40,50); max: Retorna o maior entre dois números 1 parâmetro
1 retorno

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

10 float d = dist(20,30,60,30); dist: Calcula a distância entre 2 pontos.
40 40 60 60 dist: Calcula a distância entre 2 pontos. 4 Parâmetros 1 Retorno Sem efeitos colaterais

11 Exercícios 25/03/2017

12 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 25/03/2017

13 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. 25/03/2017

14 Letra a) Variável perimetro
int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2; 25/03/2017

15 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: int Nome da variável: perimetro Valor inicial: 0; Valor final: 140 25/03/2017

16 Raciocício da letra A Como você deve resolver?
Execute mentalmente o algorimo dado, passo a passo, ou seja, linha por linha. OU Crie 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. 25/03/2017

17 Raciocício da letra A Como você deve resolver?
largura altura perimetro int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2; 25/03/2017

18 Raciocício da letra A Como você deve resolver?
largura altura perimetro 30 int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2; 25/03/2017

19 Raciocício da letra A Como você deve resolver?
largura altura perimetro 30 40 int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2; 25/03/2017

20 Raciocício da letra A Como você deve resolver?
largura altura perimetro 30 40 int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2; 25/03/2017

21 Raciocício da letra A Como você deve resolver?
largura altura perimetro 30 40 60 int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2; 25/03/2017

22 Raciocício da letra A Como você deve resolver?
largura altura perimetro 30 40 60 140 int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2; 25/03/2017

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: int Nome da variável: perimetro Valor inicial: 0; Valor final: 140 25/03/2017

24 Letra b) Variável largura
float largura = 100.0; rect(10,10,largura,10); largura = largura * 2; 25/03/2017

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

26 Letra d) Variáveis m e p Veja a dica a seguir! float m = 99;
float p= 3; p = (m % 4) * 10; m = m + 1; Veja a dica a seguir! 25/03/2017

27 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. 25/03/2017

28 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. 25/03/2017

29 Comportamento periódico do operador %
x X % 3 1 2 3 4 5 6 25/03/2017

30 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. 25/03/2017

31 Letra a) size(400,500); rect(100,100,200,300); 25/03/2017

32 Letra a) RESPOSTA EXEMPLO
size(400,500); rect(width/4,height/5,width/2,height/5*3); 25/03/2017

33 size(400,500); size(350,140); 25/03/2017

34 Letra b) size(500,600); triangle(250,0,500,300,0,300); 25/03/2017

35 Letra c) size(300,300); ellipse(100,100, 40, 40);
25/03/2017

36 Letra d) size(500,500); quad(100,100, 250, 250, 400, 100, 250, 400);
25/03/2017

37 Exercício 03 A partir do desenho fornecido e do esqueleto de código, complete o código que gera o desenho 25/03/2017

38 Objetivo do exercício Conhecer 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. 25/03/2017

39 Letra a Dicas: função arc desenha arcos;
rotate trabalha com ângulos em radianos. 25/03/2017

40 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); 25/03/2017

41 Resposta! 25/03/2017

42 translate(width/2,height/2); arc(0,0,100,100,PI/5,TWO_PI-PI/5);
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); 25/03/2017

43 Letra b Dicas: função strokeWeight altera o pincel. 25/03/2017

44 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??); 25/03/2017

45 Letra c Dicas: função smooth elimina o serrilhado. 25/03/2017

46 ellipse(0,0,width/2,width/2); fill(255,255,0);
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??); 25/03/2017

47 Letra d Dicas: função elipse desenha elipses. 25/03/2017

48 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??); 25/03/2017

49 Letra e Dicas: função scale faz zoom em relação ao eixo cartesiano.
25/03/2017

50 size(300,300); strokeWeight(5); line(10,??1??,??2??, 0);
translate(110,0); scale(??5??); line(10,??6??,??7??, 0); line(100,??8??,??9??,190); line(90,190,10,190); 25/03/2017

51 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. 25/03/2017

52 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??); 25/03/2017

53 Letra g Dicas: Função random sorteia um número entre um intervalo e outro. 25/03/2017

54 PFont f = createFont("",50,true); float aleat = random(1,10);
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); 25/03/2017

55 Letra h Dicas: Função triangle desenha um triângulo dados 3 pontos.
25/03/2017

56 fill(128,80); translate(??1??,??2??); rotate(??3??);
triangle(0,??4??,??5??,0,-50,0); 25/03/2017

57 Letra i (desafio) Dicas: Função bezier desenha uma curva de bezier.
25/03/2017

58 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??); 25/03/2017

59 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 25/03/2017

60 PFont f = createFont("",10,true); textFont(f); background(128);
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??); text(p2,x,190); 25/03/2017