2º Semestre 2009 > PUCPR > Design Digital

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

Revisão

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;

Chamada a funções

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ícios

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;

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.

Comportamento periódico do operador %

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);

Resposta!

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);

2º Semestre 2009 > PUCPR > Design Digital