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

Revisão 25/03/2017

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

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

Chamada a funções 25/03/2017

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

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

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

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

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

Exercícios 25/03/2017

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Resposta! 25/03/2017

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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