600 likes | 714 Views
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. Variáveis. int a=1; int b= 2; int c= 3; int d;.
E N D
Bruno C. de Paula Introdução à Programaçãousando ProcessingProgramação Gráfica 2DChamada a funções e variáveisExercícios de Fixação 2º Semestre 2009 > PUCPR > Design Digital
Variáveis • int a=1; • int b= 2; • int c= 3; • int d;
tiponome = valor;“Defina uma variável chamada nome do tipo inteiro, com valor inicial de 10”intminhaVar = 10;
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;
rect(20,30,40,50); rect 20 rect: Desenha um retângulo 4 parâmetros Nenhum retorno Efeito colateral: desenha um retângulo 30 40 50
max(40,50); max 40 50 50 max: Retorna o maior entre dois números 1 parâmetro 1 retorno
max(floor(2.88), floor(3.88)); floor max 2.88 2 3 floor 3.88 3
float d = dist(20,30,60,30); dist 20 30 d 40 40 60 60 dist: Calcula a distância entre 2 pontos. 4 Parâmetros 1 Retorno Sem efeitos colaterais
Exercício 01Identifique qual é o tipo, o nome, o valor inicial e o valor final para cada um dos fragmentos de código a seguir
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.
Letra a) Variável perimetro • 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: int • Nome da variável: perimetro • Valor inicial: 0; • Valor final: 140
Raciocício da letra AComo 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.
Raciocício da letra AComo você deve resolver? int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver? int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver? int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver? int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver? int largura = 30; int altura = 40; int perimetro = 0; perimetro = largura*2; perimetro = perimetro + altura*2;
Raciocício da letra AComo você deve resolver? 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: int • Nome da variável: perimetro • Valor inicial: 0; • Valor final: 140
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);
Letra c) Variável largura e variável escala • float 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;
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; • 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.
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.
Exercício 02Utilizando 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.
Letra a) • size(400,500); • rect(100,100,200,300);
Letra a) RESPOSTA EXEMPLO • size(400,500); • rect(width/4,height/5,width/2,height/5*3);
size(350,140); • size(400,500);
Letra b) • size(500,600); • triangle(250,0,500,300,0,300);
Letra c) • size(300,300); • ellipse(100,100, 40, 40); • ellipse(200,200, 40, 40);
Letra d) • size(500,500); • quad(100,100, 250, 250, 400, 100, 250, 400);
Exercício 03A partir do desenho fornecido e do esqueleto de código, complete o código que gera o desenho
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.
Letra a • Dicas: • função arc desenha arcos; • rotate trabalha com ângulos em radianos.
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);
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);
Letra b • Dicas: • função strokeWeight altera o pincel.
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??);
Letra c • Dicas: • função smooth elimina o serrilhado.
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??);
Letra d • Dicas: • função elipse desenha elipses.
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??);
Letra e • Dicas: • função scale faz zoom em relação ao eixo cartesiano.
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);