Veja resultados no site da disciplina a partir deste horário.

Estarei na PUCPR, no LAB 9 DO CCET, das 17:40h até às 22:00h para verificação de qualquer problema.

1) Escolha DUAS das bibliotecas listadas no resumo a seguir, na seção 5 (Links para Bibliotecas), ou procure por alguma biblioteca na Internet:

http://www.brunocampagnolo.com/2009_2/processing/libs/

Antes de escolher sua biblioteca verifique se alguém já não a escolheu. Poste no Fórum indicado no Eureka quais são as bibliotecas que você escolheu.

É essencial que cada aluno use uma biblioteca diferente.

2) Crie um documento sobre sua biblioteca, citando:

a) Nome;

b) Link;

c) Descrição do que faz a biblioteca;

d) Requisitos para instalação;

e) Passos para instalação;

d) Pelo menos 1 exemplo BEM COMENTADOS que misture as duas bibliotecas;

ENTREGA VIA EUREKA, EM PASTA CRIADA NO MÓDULO CONTEÚDO ATÉ O DIA 1/12.

Deixe seu exemplo público, para que seus colegas também possam vê-lo.

• Bibliotecas em Geral;
• Bibliotecas 3D;
• Exemplos de trabalho com 3d.

Links para bibliotecas diversas:

• TTSLib – texto para speach
• PeasyCam – manipulação de câmera
• ezGestures – reconhecimento de gestos
• controlP5 – criação de formulários
• FullScreen – deixa o programa em tela cheia
• colorLib – cores
• SimpleARToolkit – realidade aumentada
• jMyron – webcam
• MultiARToolkit – realidade aumentada
• BoxWrap2D – física
• TerraPin – desenho
• GLGraphics – melhorias gráficas
• GSVideo – video
• OBJLoader – carregamento de modelos obj
• PGL – jogos 2D
• Traer.Physics – física
• SQLibrary – jogos 2D
• Motion – movimento
• PPhys2D – física
• GUI for processing – controles
• AI Library – inteligência artificial
• ID3 – informações sobre MP3
• Processing Layers – camadas
• gifAnimation – gifs animados
• mri3ds – carrega modelo 3d
• opencv – webcam e video
• sprites for processing – manipulação de sprites
• POGG – toca videos theora
• Processing Easy Eye Tracker – seguir o movimento dos olhos
• stereo – visão estereográfica
• OBJImport – carrega arquivos .obj
• WrjP5 – exibe informações a partir do Wiimote
• proTablet – trabalha com tablet

tem alguma dica??

Na verdade, o size não faz efeito no Mobile Processing, pois a resolução depende do tamanho da tela do celular.
O celular padrão para o Mobile Processing é de 240 x 290 aproximadamente.

Você pode, porém, ALTERAR o celular padrão que roda o “Mobile Processing”.
Os celulares disponíveis estão na pasta:
C:\WTK252\wtklib\devices\
Cada pasta contém um dispositivo diferente.
Se quiser TROCAR o celular padrão para algum dos celulares desta pasta, execute o programa:
C:\WTK252\bin\DefaultDevicew.

Se possível, instale e teste em seu celular.

Para isto, você vai utilizar a versão móvel do Processing: o Mobile Processing.

Se quiser instalar em sua casa, faça o download do Mobile Processing em:

http://mobile.processing.org/

IMPORTANTE: antes de instalar o mobile processing será necessária a instalação do Sun Java Wireless Toolkit 2.5:

http://java.sun.com/products/sjwtoolkit/download.html

Apresentação associada à aula em anexo.

Download dos exemplos abaixo

Carregando imagem:

// O arquivo de imagem "eu.png" precisa estar localizado na pasta do projeto.
// Selecione "Add File" para copiar arquivo para a pasta de seu projeto
PImage img = loadImage("logo.png");
// As coordenadas (0,0) se referem ao início da tela
image(img, 0, 0);
// Coloco a imagem no canto da tela
int posX = width - img.width;
image(img,posX,0);

Tratando as teclas:

String s;
PFont font;
void setup() {
font = loadFont(); // Carrega a fonte padrão para exibição de texto
textFont(font);
 softkey("Teste"); // Cria uma softkey chamada 'Teste'
 s = "Sem teste ainda"; // Inicializa o s com o valor 'Sem teste ainda'
}
void draw() {
 background(200);
 text(s, 0, height / 2); // Exibe o string no centro da tela
}

// Chamado quando a tecla é pressionada
void softkeyPressed(String label) {
 // Checa se o valor da tecla pressionada para verificar a ação a ser executada
 if (label.equals("Teste")) {
 // Se pressionar a tecla 'Teste', troca o valor da variável s para o valor de uma caixa de entrada de dados
 s = textInput();
 }
}

Tratando as teclas (multitap)

PFont font;
void setup() {
 font = loadFont();
 textFont(font);
 softkey("Delete"); // Use a tecla para excluir
 multitap(); // Liga a entrada no formato 'multitap'
}
void draw() {
 background(200);
 // A variável multitapText contém o texto escrito no teclado
 text(multitapText, 0, height / 2); // Desenha o texto capturado
}
void softkeyPressed(String label) {
 if (label.equals("Delete")) {
    multitapDeleteChar(); // Exclui o caractere
 }
}

Tocando som:

import processing.sound.*;
// Notas vão de 0 a 127 (ver especificação do MIDI)
int[] notes = { 60, 62, 64, 65, 67, 69, 71, 72, 74 };
void setup() {
noLoop(); // Não precisa do draw
}
void keyPressed() {
 //Teclas entre 1 e 9
 if ((key >= '1') && (key <= '9')) {
    // Toca a tecla por 500 ms e volume 80
    Sound.playTone(notes[key - '1'], 500, 80);
 }
}

A) Uma das principais aplicações da estrutura de repetição em relação à programação gráfica é na geração procedural de texturas e padrões. Por exemplo, este jogo é um exemplo de geração de texturas de maneira procedural.

Analise os exemplos a seguir, executando o teste de mesa um número mínimo de vezes que permita que você entenda seu funcionamento. Assim, neste exercício, seu objetivo é apenas ENTENDER o funcionamento de cada exemplo.

a)

fill(0, 76);
noStroke();
smooth();
for(int y=-10;y<=100;y = y + 10) {
  for(int x = -10; x<=100; x = x + 10)  {
     ellipse(x + y / 8.0, y + x/8.0, 15 + x/2, 10);
   }
}

b)

noStroke();
for(int y=0; y<100; y = y + 10)
{
  for(int x=0;x<100;x = x = x + 10)
  {
    fill((x+y)* 1.4);
    rect(x,y, 10, 10);
  }
}

c)

for(float y=20; y<=80; y = y * 1.2) {
    for(int x=20;x<=80;x = x + 5) {
       line(x, y, x, y-2);
    }
 }

d)

for(float y=20; y<=80; y = y * 1.2) {
  for(int x=20;x<=80;x = x + 5) {
     line(x, y, x+2, y-2);
   }
}

e)

for(int y=1;y<100;y=y+10) {
  for(int x=1;x<y;x=x+10) {
      line(x,y,x+6,y+6);
      line(x+6,y,x,y+6);
   }
}

B) Baseado nos exemplos mostrados no exercício anterior, gere algumas texturas e padrões procedurais utilizando estruturas de repetição.

C) A estrutura de repetição for é formada por três partes:

for(PARTE1;PARTE2;PARTE3) {

}

Defina qual é o nome e função de cada uma destas partes.

D) Identifique o erro nas estruturas de repetição abaixo e corrija os fragmentos abaixo:

a) (exemplo respondido!)

for(int var=0;var2<10;var = var + 1) {
    println(var);
}

RESPOSTA: O nome da variável é var. Na condição, está sendo referenciada a variável var2.

b)

for(var=0;var<10;int var = var + 1) {
    println(var);
}

c)(o código abaixo deveria repetir 10 vezes)

for(int var=0;var=10;var = var + 1) {
    println(var);
}

E) Reconheça, nos framentos de código a seguir qual é a variável de controle, valor inicial desta variável, valor do incremento e valor final para cada uma das estruturas de repetição abaixo.

a)(exemplo respondido!)

for(int i=5;i<10;i=i+1) {
    println(i);
}

Resposta esperada:

• Variável de controle: i
• Valor inicial: 5
• Incremento: 1
• Valor final: 10

b)

for(int i=10;i<=200;i=i+2) {
    println(i);
}

c)

for(int num=1000;num>=800;num=num-2) {
    println(num);
}

d)

for(int num=1000;num>=100;num=num/2) {
    println(num);
}

e)

for(int x=1;x<=100;x=x*3) {
    println(x);
}

F) Complete o teste de mesa em cada um dos exemplos abaixo:

a) (exemplo respondido!)

int a = 10;
for(int i=0;i<3;i++) {
    a = a + i;
}

b)

int a = 10;
for(int i=1;i<6;i=i+2) {
    a = a * i;
}

c)

int a = 5;
for(int i=1;i<=3;i=i+1) {
  if(i%2==1) {
     a = a + 1;
  } else {
     a = a + 2;
  }
}

d)

int b = 10;
for(int x=1;x!=4;x++) {
   b = b – x;
}

e)

int a=0;
for(int x=1;x<=2;x++) {
   for(int y=1;y<=2;y++) {
     a = a + (x * y);
   }
}

Estaremos tratando dos tópicos 1 e 3 do material de interação.

Alguns exemplos de aplicação de estrutura de repetição que construímos durante a aula:

/*
for(int pos=10;pos<=90;pos=pos+40) {
 line(pos,10,pos,80);
}*/
//noFill();
/*
for(int i=20;i<=100;i=i+25) {
 ellipse(50,50,i,i);
}
*/
/*
for(int i=95;i>=20;i=i-25) {
 ellipse(50,50,i,i);
}
*/
/*
for(int i=95;i>=20;i=i-3) {
 ellipse(50,50,i,i);
}
*/
size(100,255);
for(int i=0;i<255;i++) {
 stroke(i);
 line(0,i,100,i);
}

Exemplo para trabalhar com o teclado:

int x=150,y=150;
void setup() {
 size(300,300);
}
void draw() {
 background(0);
 ellipse(x,y,10,10);
}
void keyPressed() {
 if(key=='a') x = x - 10;
 if(key=='d') x = x + 10;
 // SE a tecla for especial
 if(key==CODED) {
   if(keyCode==UP) y = y - 10;
   if(keyCode==DOWN) y = y + 10;
 }
}

Hoje, analisaremos dois fragmentos de jogos: um jogo de carro e um pong. Em ambos, utilizo a função constrain para restringir o movimento do mouse.

Observe também a estratégia usada para implementar o scroll (rolagem) no jogo de carro.

Segue, abaixo, jogo gerado na aula de 18 e 19/8.

Versão 1

int estado = 0;
void setup() {
 size(600,400);
}
void menu() {
 if(mouseX>200 && mouseX<400 &&
 mouseY>300 && mouseY<400 && mousePressed) {
 estado = 1;
 }
 rect(200,300,200,100);
}
void jogo() {
 background(255);
}
void perdeu() {
}
void venceu() {
}

void draw() {
 switch(estado) {
 case 0:
 menu();
 break;
 case 1:
 jogo();
 break;
 case 2:
 perdeu();
 break;
 case 3:
 venceu();
 break;
 }
}

int estado = 0;
int x=100,y=300,vx,vy;
PImage lab;
void setup() {
 size(600,400);
 lab = loadImage("labirinto1.png");
}
void jogo() {
 // Inteligencia
 if(x<mouseX) vx = 1; else vx = -1;
 if(y<mouseY) vy = 1; else vy = -1;
 // Movimento
 x = x + vx;
 y = y + vy;
 background(255);
 image(lab,0,0);
 // Colisao
 if(get(x,y)==color(0)) {
 estado = 2;
 }
 if(get(x,y)==color(255,0,0) ) {
 estado = 3;
 }
 ellipse(x,y,10,10);
}
void menu() {
 if(mouseX>200 && mouseX<400 &&
 mouseY>300 && mouseY<400 && mousePressed) {
 estado = 1;
 }
 rect(200,300,200,100);
}

void perdeu() {
 background(255,0,0);
}

void venceu() {
 background(0,255,0);
}

void draw() {
 switch(estado) {
 case 0:
 menu();
 break;
 case 1:
 jogo();
 break;
 case 2:
 perdeu();
 break;
 case 3:
 venceu();
 break;
 }
}

O labirinto abaixo foi gerado com o site "Maze Generator"

Imagem do labirinto

Imagem do labirinto 2

Exemplos de Minigames construídos com estes labirintos (1,2).

Parte do material relacionado à aula está no seguinte link, na seção 2:

http://www.brunocampagnolo.com/2010_2/processing/interacao/

Observe que este material é uma baseado, principalmente, em exemplos. Gerei cerca de 25 códigos associados a tarefas usuais com o mouse.

Nas próximas semanas, vamos analizar códigos semelhantes a estes exemplos (em anexo), aproveite para verificar seu funcionamento.

Segue especificação em anexo.

Entrega em 31/08/2010!

float xi=100,yi=100,vxi=2,vyi=2;
int vida = 3;
PFont arial;
int estado = 0;
void setup() {
 size(600,400);
 noCursor();
 arial = createFont("Arial",30);
 textFont(arial);
}
void draw() {
 if(estado==0) jogo();
 if(estado==1) gameover();
}
void gameover() {
 text("game over", 100, 100);
 if(keyPressed) {
 estado = 0;
 vida = 3;
 }
}
void jogo() {
 if(xi<mouseX) {
 vxi = 2;
 } else {
 vxi = -2;
 }
 if(yi<mouseY) {
 vyi = 2;
 } else {
 vyi = -2;
 }
 xi = xi + vxi;
 yi = yi + vyi;
 if(dist(mouseX,mouseY,xi, yi)<=30) {
 vida = vida - 1;
 xi = random(width);
 yi = random(height);
 }
 if(vida==0) {
 estado = 1;
 }
 background(128);
 ellipse(mouseX,mouseY,40,40);
 ellipse(xi,yi,20,20);
 text(vida, 30, 30);
}

float xi=100,yi=100,vxi=2,vyi=2;
int vida = 3;
PFont arial;
void setup() {
 size(600,400);
 noCursor();
 arial = createFont("Arial",30);
 textFont(arial);
}
void draw() {
 if(xi<mouseX) {
 vxi = 2;
 } else {
 vxi = -2;
 }
 if(yi<mouseY) {
 vyi = 2;
 } else {
 vyi = -2;
 }
 xi = xi + vxi;
 yi = yi + vyi;
 if(dist(mouseX,mouseY,xi, yi)<=30) {
 vida = vida - 1;
 xi = random(width);
 yi = random(height);
 }
 background(128);
 ellipse(mouseX,mouseY,40,40);
 ellipse(xi,yi,20,20);
 text(vida, 30, 30);
}

float xi=100,yi=100,vxi=2,vyi=2;
int vida = 3;
PFont arial;
int estado = 0;
void setup() {
 size(600,400);
 noCursor();
 arial = createFont("Arial",30);
 textFont(arial);
}
void draw() {
 if(estado==0) jogo();
 if(estado==1) gameover();
}
void gameover() {
 text("game over", 100, 100);
 if(keyPressed) {
 estado = 0;
 vida = 3;
 }
}
void jogo() {
 if(xi<mouseX) {
 vxi = 2;
 } else {
 vxi = -2;
 }
 if(yi<mouseY) {
 vyi = 2;
 } else {
 vyi = -2;
 }
 xi = xi + vxi;
 yi = yi + vyi;
 if(dist(mouseX,mouseY,xi, yi)<=30) {
 vida = vida - 1;
 xi = random(width);
 yi = random(height);
 }
 if(vida==0) {
 estado = 1;
 }
 background(128);
 ellipse(mouseX,mouseY,40,40);
 ellipse(xi,yi,20,20);
 text(vida, 30, 30);
}

Notas finais foram lançadas.

http://www.brunocampagnolo.com/2010ip1/notas

Correções e verificações de erro agora só depois das férias de julho.

Boas férias!

Entregue também via Correio do Eureka para garantir a entrega.

cforms contact form by delicious:days

void setup() {
 size(300,300);
 frameRate(3);
}
void draw() {
 bandeira( (int) random(0,3) );
}
void bandeira(int tipo) {
 switch(tipo) {
 case 0:
 bandeiraBrasil();
 break;
 case 1:
 bandeiraJapao();
 break;
 case 2:
 bandeiraHolanda();
 break;
 }
}
void bandeiraHolanda() {
 fill(255,0,0);
 rect(0,0,300,100);
 fill(255);
 rect(0,100,300,200);
 fill(0,0,255);
 rect(0,200,300,300);
}

void bandeiraJapao() {
 fill(255);
 rect(0,0,300,300);
 fill(255,0,0);
 ellipse(150,150,50,50);
}
void bandeiraBrasil() {
 fill(0,255,0);
 rect(0,0,300,300);
 fill(255,255,0);
 quad(150,0,300,150,150,300,0,150);
 fill(0,0,255);
 ellipse(150,150,60,60);
}

float x=200,vx=1, y=100, vy = 1;
float xinimigo = 50, yinimigo=70;
int estado = 0;
void setup() {
 size(300,300);
}
void draw() {
 x = x + vx;
 switch(estado) {
 case 0:
 vagando();
 if(dist(x,y,xinimigo,yinimigo)<50)
 estado = 1;
 break;
 case 1:
 atacando();
 if(dist(x,y,xinimigo,yinimigo)<5) {
 estado = 0;
 xinimigo = random(width);
 yinimigo = random(height);
 }
 break;
 }
 background(0,0,255);
 fill(0,255,0);
 ellipse(x,y,20,20);
 fill(255,0,0);
 ellipse(xinimigo,yinimigo,20,20);
}
void atacando() {
 y = y + vy;
 if(x<xinimigo) {
 vx = 1;
 }
 else {
 vx = -1;
 }
 if(y<yinimigo) {
 vy = 1;
 }
 else {
 vy = -1;
 }
}

void vagando() {
 // Se bater nas laterais, volta!
 if(x>width || x<0) {
 vx = -vx;
 }
}

Estes tópicos são tratados nos itens 5 e 6 de nosso material teórico. Além disso, passaremos o exercício de fechamento do bimestre.

A data de entrega final deste exercício é dia 30/7/2010 28/06/2010. Entretanto, farei uma verificação de andamento nos dias 22 e 24/6.

Pode ser feito em duplas, opcionalmente.

Seu objetivo é criar um programa que conte uma história com início, meio e fim. Nesta sua história, você deve ter os seguintes elementos:

• um personagem que percorre NO MÍNIMO cinco cenários diferentes e NO MÁXIMO dez cenários;
• o personagem deve encontrar outro em algum dos cenários. Ao se encontrarem, devem manter um diálogo simples;
• o personagem deve passar duas vezes por um dos cenários;
• o cenário deve ser montado a partir das imagens disponíveis em: http://lostgarden.com/PlanetCute%20PNG.zip .
• deve existir um relógio funcionando dentro de um destes cenários;
• um sinaleiro deve estar funcionando em um destes cenários.

Uma maneira simples de usar a função millis para executar uma certa ação após um certo tempo é:

• Inicializar, no setup, uma variável com o valor da chamada a millis (por exemplo, tempo);
• A cada draw, comparar o valor de millis com o valor de tempo;
• Se o tempo passado for maior que o tempo total, reinicie o contador de tempo.

Exemplo:

int tempo, tempoPassado, tempoTotal=2000;
void setup() {
 tempo = millis();
}
void draw() {
 tempoPassado = millis() - tempo; // Faz a diferença entre o tempo atual e a última vez que executou o if
 if(tempoPassado>tempoTotal) { // Se o tempoPassado for maior que o intervalo, execute a operação indicada
 background(random(256), random(256), random(256));
 tempo = millis();
 }
}

Também usando millis, uma técnica de animação bastante interessante na área de desenvolvimento web e na área de jogos é a utilização de sprites. Nesta técnica, ao invés de você carregar uma imagem para cada objeto a ser animado, apenas uma imagem é carregada e partes diferentes dela são exibidas em momentos diferentes.

Observe o fragmento de exemplo, que usa a função image.get para recortar parte de uma imagem:

PImage sprite;
int tempo, tempoPassado, tempoTotal=2000;
void setup() {
 size(300,300);
 tempo = millis();
 sprite=loadImage("char6.png");
}
void draw() {
 tempoPassado = millis() - tempo;
 if(tempoPassado<200) {
 image(sprite.get(69,0,60,60),0,0);
 } else if(tempoPassado<400) {
 image(sprite.get(200,0,60,60),0,0);
 } else if(tempoPassado<600) {
 image(sprite.get(330,0,60,60),0,0);
 } else if(tempoPassado<800) {
 image(sprite.get(466,0,60,60),0,0);
 } else if(tempoPassado<1000) {
 tempo = millis();
 }
}

Em anexo, o programa completo.

01) Usando a função millis, desenvolva um programa que a cada 5 segundos exiba uma imagem diferente (slideshow).

Dica:

• Coloque um nome similar em cada imagem, por exemplo: img1.png, img2.png, img3.png. Desta forma, fica fácil carregar as imagens seqüencialmente.

02) A partir da biblioteca de sprites Sprite Lib GPL, crie um programa que exiba uma animação qualquer de um personagem, formada por, pelo menos 4 imagens diferentes sendo exibidas em momentos diferentes. Por exemplo, faça a animação de um personagem andando.

03) Insira o resultado de seu exercício anterior dentro de um ambiente. Preferencialmente, use o ambiente que você gerou no exercício F03, Parte 6. Além disso, faça com que o seu personagem também se mova dentro deste ambiente.

04) Faça um programa que exiba um relógio digital. Para formatar corretamente os valores de hora, minuto e segundo, aplique a função nf.

05) [DESAFIO] Faça um programa que exiba um relógio analógico.

cforms contact form by delicious:days

float x=100,y=100,vx=1,vy=1;
void setup() {
 size(400,400);
}
void draw() {
 background(255);
 ellipse(x,y,30,30);
 rect(200,0,30,height);
 x = x + vx;
 y = y + vy;
//  if(x > 200) {
//    vx = -1;
//  }
 if(x>185 && x<245) {
 vx = -vx;
 }
 if(x<0) {
 vx = -vx;
 }
 if(y>height) {
 vy = -vy;
 }
 if(y<0) {
 vy = -vy;
 }
}

float x=100,y=100,vx=3,vy=1;
void setup() {
 size(300,300);
}
void draw() {
 background(0);
 ellipse(x,y,30,30);
 rect(200,50,30,150);
 x = x + vx; // Altera a pos
 y = y + vy; // Altera a pos
 // Se o x for MAIOR que 200
 // E o x for MENOR que 230
 // inverte a vel
 if(x>200 && x<230) {
 vx = -vx;
 }
}

Também fizemos uma prévia da defesa.

No começo da aula fizemos uma revisão do if através de um exemplo.

println(2>=2);
String nome = "Bruno";
if(nome=="Bruno") {
 println("Olá, Tudo Bem!");
} else {
 println("Quem é você?");
}

float x = 0;
float vel = 3;
void setup() {
 size(300,300);
}
void draw() {
 background(0);
 ellipse(x,height/2,30,30);
 x = x + vel;
 if(x>300) {
 vel = -3;
 }
 if(x<0) {
 vel = 3;
 }
}

Entrega do exercício

01 – [Estrutura de Seleção] Cada um dos fragmentos de código a seguir apresenta uma estrutura de seleção.

Identifique:

• Qual ou quais são as condições sendo testadas
• Qual é o bloco principal;
• Qual é o bloco alternativo, se ele existir;
• Qual dos dois (principal, alternativo ou nenhum) blocos é executado.

a)

int nota=5;

if(nota<7)

println("Você está com nota baixa!");

RESPOSTA ESPERADA:

Condição: nota menor que 7
Bloco principal: println(“Você está com nota baixa!”);
Bloco alternativo: não há;
Bloco executado: principal.

b)

int idade = 5;
if(idade>=18)
println("Você pode dirigir!");

Condição:
Bloco principal:
Bloco alternativo:
Bloco executado:

c)

boolean sol = true;
boolean chuva = false;
if(sol && chuva)
println("Casamento de viúva");

Condição:
Bloco principal:
Bloco alternativo:
Bloco executado:

d)

float salario = 1000;
float desconto = 0.3;
salario       = salario - salario * desconto;
if(salario<=1000)
println("Estagiário");
else
println("Chefe");

Condição:
Bloco principal:
Bloco alternativo:
Bloco executado:

e)

float salario = 1600;
float desconto = 0.3;
salario       = salario - salario * desconto;
if(salario<=1000)
println("Estagiário");
else
println("Chefe");

Condição:
Bloco principal:
Bloco alternativo:
Bloco executado:

f)

float nota = 7;
if(nota>=7) {
println("Aprovado");
} else {
println("Reprovado");
}

Condição:
Bloco principal:
Bloco alternativo:
Bloco executado:

g)

float nota = 6.9;
if(nota>=7) {
println("Aprovado");
} else {
println("Reprovado");
}

Condição:
Bloco principal:
Bloco alternativo:
Bloco executado:

h)

float nota = 7.1;
if(nota>=7) {
println("Aprovado");
} else {
println("Reprovado");
}

Condição:
Bloco principal:
Bloco alternativo:
Bloco executado:

2) O código a seguir exibe um objeto diferente conforme o valor inicial das variáveis a, b e c e d;
Indique qual é o objeto gerado a partir dos valores iniciais das variáveis;

int a=0, b=0, c=0, d=0;
background(255);
if(a==1) {
fill(255,0,0); // Vermelho
d = d + 1;
} else {
fill(0,255,0); // Verde
}
if(b==1) {
ellipse(50,50,30,30);
} else {
rect(10,10,80,80);
d = d + 1;
}
if(c==0) {
line(0,0,100,100);
d = d + 1;
} else {
line(100,0,0,100);
}
if(d>2) {
fill(0,0,255);
ellipse(50,50,10,10);
}

b)

int a=1, b=0, c=0, d=0;
background(255);
if(a==1) {
fill(255,0,0); // Vermelho
d = d + 1;
} else {
fill(0,255,0); // Verde
}
if(b==1) {
ellipse(50,50,30,30);
} else {
rect(10,10,80,80);
d = d + 1;
}
if(c==0) {
line(0,0,100,100);
d = d + 1;
} else {
line(100,0,0,100);
}
if(d>2) {
fill(0,0,255);
ellipse(50,50,10,10);
}

c)

int a=1, b=1, c=1, d=0;
background(255);
if(a==1) {
fill(255,0,0); // Vermelho
d = d + 1;
} else {
fill(0,255,0); // Verde
}
if(b==1) {
ellipse(50,50,30,30);
} else {
rect(10,10,80,80);
d = d + 1;
}
if(c==0) {
line(0,0,100,100);
d = d + 1;
} else {
line(100,0,0,100);
}
if(d>2) {
fill(0,0,255);
ellipse(50,50,10,10);
}

d)

int a=0, b=2, c=3, d=4;
background(255);
if(a==1) {
fill(255,0,0); // Vermelho
d = d + 1;
} else {
fill(0,255,0); // Verde
}
if(b==1) {
ellipse(50,50,30,30);
} else {
rect(10,10,80,80);
d = d + 1;
}
if(c==0) {
line(0,0,100,100);
d = d + 1;
} else {
line(100,0,0,100);
}
if(d>2) {
fill(0,0,255);
ellipse(50,50,10,10);
}

3) Usando a estrutura de seleção, faça uma animação de uma imagem que, inicialmente, vai do início ao fim da tela, da esquerda para a direita.

Ao chegar no fim da tela, sua velocidade muda e ela retorna ao início da tela indo da direita até a esquerda.

4) Faça a animação da boca do PACMAN abrindo e fechando.

5) Faça a animação do planeta girando ao redor do outro.

6) Anime a alteração das cores e a movimentação das elipses.

FORMULÁRIO PENDENTE

Tal estrutura permitirá que controlemos o fluxo de execução de um algoritmo. O objetivo principal desta aula é que você saiba reconhecer e entender o funcionamento das estruturas if e else.

Turma de Terça

void setup() {
}
void draw() {
 ellipse(0,0,frameCount,frameCount);
}

~float py;
void setup() {
 size(400,400);
 frameRate(30);
 // Desenha o retângulo a partir do centro
 rectMode(CENTER);
 // A inicialização da variavel
 // se depender da tela deve ser no setup
 py = height/2;
}
void draw() {
 background(255);
 rect(width/2,py,50,50);
 py = py + 2;
}

int cor = 255;
void setup() {
 size(200,200);
 frameRate(60);
}
void draw() {
 println(cor % 256);
 background(cor % 256);
 cor = cor + 1;
}

float pos=0;
int cor=0;
void setup() {
 size(300,100);
 frameRate(40);
}
void draw() {
 stroke(cor);
 line(pos % 150,1,pos % 150,60);
 //line(2,1,2,60);
 //line(3,1,3,60);
 pos = pos + 1;
 cor = cor + 1;
}

PImage estrela;
int rotacao = 0;
void setup() {
 size(400,400);
 frameRate(30);
 imageMode(CENTER);
 estrela = loadImage("Star.png");
}
void draw() {
 background(0);
 translate(width/2,height/2);
 rotate(radians(rotacao));
 image(estrela,0,0);
 rotacao = rotacao + 1;
}

Turma de quinta

float py;
void setup() {
 size(500,200);
 frameRate(30);
 // Desenha os rects em relação ao centro
 rectMode(CENTER);
 py = height/2;
}
void draw() {
 background(255);
 rect(width/2,py,50,50);
 py = py + 1;
}

int cor = 0;
void setup() {
 size(400,200);
 frameRate(300);
}
void draw() {
 // um numero % outro repete de
 // 256 em 256... entre 0 e 255
 fill(cor % 256);
 ellipse(width/2,height/2,100,100);
 cor = cor + 1;
 println(cor % 256);
}

PImage img;
int angulo = 0;
void setup() {
 size(300,300);
 frameRate(80);
 img = loadImage("Heart.png");  // Carrega a imagem na memoria!
 imageMode(CENTER);
}
void draw() {
 background(255);
 translate(width/2,height/2); // Move o eixo para metade da tela
 rotate(radians(angulo));
 image(img,0,0); // Desenhar o coração
 angulo = angulo + 1;
}

O material do segundo bimestre está disponível em:

http://www.brunocampagnolo.com/2010_1/processing/animacao/

Durante a aula de hoje vamos entender os primeiros passos sobre como definir uma animação. Recomendo a leitura, impressão e entendimento da apresentação relacionada à aula.

Para demonstrar que imagens também podem ser animadas, usei as imagens disponíveis em:

http://lostgarden.com/2007/05/dancs-miraculously-flexible-game.html

Exemplos gerados na aula

Você deve:

A)

Neste exercício, você deve refazer cada um dos exemplos de animação.

Dentro do arquivo abaixo, em cada das pastas há um exemplo de animação infinita simples implementada usando o Processing.

Recriar cada uma das animações da maneira mais similar possível.

Download dos exemplos

B) Escolha 5 dos exemplos que você recriou e substitua o objeto que se move por uma imagem qualquer de sua preferência.

Além disso, coloque uma imagem de fundo coerente com a imagem escolhida. Se preferir, use as imagens disponíveis neste link.

C) Para o POEMA que você criou em um exercício anterior, anime as frases de seu poema.

cforms contact form by delicious:days

Criamos apenas um exemplo:

// Criar a variável x que representa
// a posição da minha elipse
float x=0;
void setup() {
 size(300,300);
}
// A função draw será chamada 60x por
// segundo
void draw() {
 background(0);
 ellipse(x,height/2,100,100);
 x = x + 1;
}

Além disso, a aula também foi dedicada à conferência das notas de prova e à proposição de um exercício extra para somar 1 ponto à sua nota de prova.

Para reforçar os  conceitos da Prova 01 e dar um ponto extra aos alunos que não foram tão bem de prova, permitindo uma recuperação de até 1 ponto em sua prova, realize a atividade a seguir.

1) Faça o download do modelo de prova. Cada página é um modelo diferente, de 1 a 6.

Observe que é um pouco diferente do modelo da prova que você fez.

2) Resolva sua prova e TRAGA sua RESPOSTA IMPRESSA com o melhor detalhamento possível e à caneta. Não é necessária a resolução do exercício 2 (desenho).

3) Utilize os códigos e modelos na lista a seguir:

4) Entregue também no formulário a seguir até o dia 27/4:

Entrega da atividade extra

Não esqueça! Respostas em papel no início da aula do dia 27 e 29/4!

cforms contact form by delicious:days

cforms contact form by delicious:days

Disponibilizarei o gabarito desta prova e a nota  de cada aluno até o dia 27/4.

Na próxima semana, no dia 15/04 (quinta) teremos nossa primeira prova. Esta prova será na sala de desenho D6 e será para a turma toda.

No dia 13/04 (terça) farei uma revisão de tudo que fizemos até agora baseada, principalmente, no exercício F04.

Importante: a data de entrega máxima dos exercícios passados até agora é o dia 22/4.

cforms contact form by delicious:days

O assunto do próximo bimestre será o tópico animação. Como fechamento, trabalhamos com os tópicos 13, 14, 15 e 16 do material do primeiro bimestre.

O ponto mais importante desta aula, e que será cobrado em nossa prova da semana que vem, foi a divisão de nossos programas em funções.

Códigos desenvolvidos na aula de terça

Códigos desenvolvidos na aula de quinta

size(300,300);
 int n = 0;
 int pos = 0;
 ellipse(pos,height/2+n*20, 10, 10);
 pos = (n % 3) * 20;
 n = n + 1;
 ellipse(pos,height/2+n*20, 10, 10);
 pos = (n % 3) * 20;
 n = n + 1;
 ellipse(pos,height/2+n*20, 10, 10);
 pos = (n % 3) * 20;
 n = n + 1;
 ellipse(pos,height/2+n*20, 10, 10);

void  cabeca() {
 rect(30,0,20,20);
 }
 void corpo() {
 ellipse(50,50,10,100);
 }
 void tentaculo() {
 ellipse(50,80,100,10);
 }
 void alien() {
 cabeca();
 corpo();
 tentaculo();
 }

 void setup() {
 size(300,300);
 alien();
 }

String  resposta=javax.swing.JOptionPane.showInputDialog("Nome?");
 size(300,300);
 PFont f = createFont("Arial", 20); // Criei a fonte
 textFont(f);  // Escolhi a fonte
 text("Olá, " + resposta, 100,100);

String lado=javax.swing.JOptionPane.showInputDialog("Lado?");
size(300,300);
rect(100,100,float(lado),100);

<pre>
void setup() {
 size(300,300);
 sortearCor();
 cabeca();
 sortearCor();
 corpo();
 sortearCor();
 pernas();
}
void sortearCor() {
 float vermelho=random(0,256);
 float verde = random(0,256);
 float azul = random(0,256);
 fill(vermelho,verde,azul);
}
// Cabeça
void cabeca() {
 ellipse(150,20,30,30);
 ellipse(150,20,10,10);
}
// Corpo
void corpo() {
 ellipse(150,150,50,200);
 ellipse(150,100,200,10);
}
// Pernas
void pernas() {
 rect(150,230,30, 40);
}

size(300,300);
// Cria uma janela de diálogo
// O valor digitado pelo usuário vai para a variável nome
String nome=javax.swing.JOptionPane.showInputDialog("Nome?");
println(nome);
// Cria uma variável f associada à fonte Arial, 20
PFont f = createFont("Arial",20);
textFont(f);
// O '+' serve para concatenar dois strings
text("Olá, "+nome, 20, 20);

String lado1=javax.swing.JOptionPane.showInputDialog("lado1?");
String lado2=javax.swing.JOptionPane.showInputDialog("lado2?");
// A função float converte de String para float
float area = float(lado1)*float(lado2);
println(area);

• Cobrar os tópicos 13, 14, 15 e 16, tratados na aula de 6/4;
• Revisar alguns conceitos como preparação para a prova de 15/4.

Você não precisa entregar todos os exercícios.

Entregue apenas os números:

• 3 a, e e h;
• 4, 5, 6, 7 e 8;
• 10 b;

Os demais exercícios são uma revisão para a prova e poderão ser usados como modelo para os exercícios desta.

Na aula de 13/4, faremos uma revisão resolvendo estes exercícios. Esta revisão será na sala de Desenho de vocês.

Formulário de entrega do exercício

01 – [Revisão do Tópico 14 - Expressões Aritméticas]

Informe o valor final das expressões aritméticas a seguir:

a) 2+1+3

b) 2*4

c) 20*4+2

d) 20*(4+2)

e) 29/3

f) 29.0/3

g) 29/3.0

h) 29%3

i) 3 % 29

02 – [Revisão do Tópico 13 - Chamada a funções matemáticas]

Indique, para cada um dos fragmentos de código selecionados a seguir. Qual é o valor da variável indicada em vermelho e negrito após o fim da execução do código.

O objetivo deste exercício é que você entenda a utilidade de algumas funções matemáticas básicas.

a) Variável b

int a = 10;

int b = 20;

int c = max(a,b);

b = c + b;

b) Variável w

float x = 5, y = 9, z =7;

float w = min(x,y);

w = min(w,z);

c) Variável w

float x = 10, y=20, z=30, w = 40;

w = max(min(x,y),min(z,w));

d) Variável p

float m=1.1, n=1.3, o=1.6, p=1.9;

m = ceil(m);

n = floor(n);

o = round(o);

p = m + n + o;

e) Variável num

float val = 25;

float num = norm(val, 0, 50);

f) Variável num

float val = 30;

float num = norm(val, 0, 50);

g) Variável num

float val = 25;

float num = norm(val, 0, 100);

h)Variável num

float val = 25;

float num = map(val, 0, 100, 0, 200);

i) Variável num

float val=30;

float num = map(val, 0, 100, 0, 200);

j) Variável num

float val=25;

float num = map(val, 0, 100, 0, 150);

k) Variável h

float h;

float cat1=3, cat2=4;

h = pow(cat1,2);

h = h + pow(cat2,2);

i) Variável h

float h;

float cat1=3, cat2=4;

h = pow(cat1,2);

h = h + pow(cat2,2);

h = sqrt(h);

03 – [Revisão do tópico 13 - Chamada a funções matemáticas]

a)

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

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

c)

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

e)

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

f)

size(200,200);

int x = ??1??;

int y = ??2??;

translate(width/2,height/2);

line(0,0,y,0);

rotate(PI/x);

line(0,0,y*2,0);

rotate(PI/x);

line(0,0,y*4,0);

rotate(PI/x);

line(0,0,y*2,0);

rotate(PI/x);

line(0,0,y,0);

g)

size(200,200);

background(255);

translate(??1??, ??2??);

arc(0,0,??3??,??4??,0, ??5??);

ellipse(-width/??6??,0, 10, 10);

ellipse(+width/??6??,0,10,10);

h)

size(200,200);

translate(width/2,height/2);

ellipse(0,0,??1??,??2??);

line(0,0,0,-??3??);

rotate(PI/??4??);

scale(0.5);

line(0,0,0,-??3??);

Nos exercício F01, Parte 6 e no Exercício F02, Parte 5 você criou um alienígena.

Agora, seu objetivo é dividir o seu robô em funções.

Separe cada uma das partes principais de seu alienígena como uma função diferente. Por exemplo, crie uma função que agrega o código do desenho da cabeça, crie uma função que agrega o código de desenho do corpo, etc.

05 – [Revisão do Tópico 15 -  Criação de funções]

No Exercício F03, Parte 1, você desenhou um Tangram.

Separe o desenho de cada uma das peças do Tangram em uma função diferente. No caso, você deverá ter 14 funções diferentes, dependendo da maneira como criou este exercício.

06 – [Revisão do Tópico 16 - Entrada de dados]

O Processing não tem funções para criação de janelas de diálogo.  Entretanto, como o Processing é baseado no Java, você pode criar uma janela de diálogo chamando a função correspondente em Java.

Use a função javax.swing.JOptionPane.showInputDialog para perguntar ao usuário seu nome. Exiba uma mensagem de bem-vindo para este nome. Por exemplo: “Olá, NOME”, sendo NOME o nome digitado.

07 - [Revisão do Tópico 16 - Entrada de dados]

Pergunte ao usuário o valor de um lado de um retângulo. Pergunte ao usuário o valor de um outro lado do retângulo.

Exiba um retângulo com as medidas informadas. No centro do retângulo, exiba a o valor de sua área e ao próximo a cada lado, o tamanho do lado.

08 - [Revisão do Tópico 17 - Entrada de dados]

println(xy);

xy = mn + ab;

mn = xy / 10;

ab = xy % 10;

xy = 23;

int mn, ab, xy;

15 – [Revisão do tópico 13 - Funções]

Identifique, no código a seguir: o nome, a utilidade e o número de parâmetros de cada função chamada.

Observe que o primeiro já está respondido.

size(300,300);     // NOME: size, UTILIDADE: Configuração da Janela, NÚMERO DE PARÂMETROS: 2

translate(width/2, height/2);

beginShape();

vertex(-100,-100);

vertex(100,-100);

vertex(0,100);

endShape(CLOSE);

16 – [Revisão geral]

A partir do código, gere o desenho.

Em sua prova, você receberá algo semelhante a isto para desenhar sua resposta.

size(200,200);

noFill();

translate(width/2,height/2);

ellipse(0,0,100,100);

rectMode(CENTER);

rect(0,0,100,100);

beginShape();

vertex(0,100);

vertex(100,0);

vertex(0,-100);

vertex(-100,0);

endShape(CLOSE);

> Prof. é para segunda mesmo?

Sim, eu gostaria de dar uma olhada nas respostas de vocês ANTES da aula.

Posso, no máximo, adiar para terça (6/4) até 13:00h.

> Preciso fazer o de árvore genealógica?

Sim. E não esqueça de usar curvas em seu exercicio.

> Como uso a função random?

A função random () retorna um valor aleatório, ou seja, ela serve para sortear um número.
Veja sua documentação em:

http://www.processing.org/reference/random_.html

Um exemplo bastante simples de uso da função random é, conforme pedido no exercício F03, você gerar cores aleatórias.
Por exemplo:

// Cria uma variável vermelho com um valor sorteado de 0 a 255
float vermelho = random(0,255);
// Cria uma variável verde com um valor sorteado de 0 a 255
float verde = random(0,255);
// Cria uma variável azul com um valor sorteado de 0 a 255
float azul = random(0,255);
// Seta o preenchimento
fill(vermelho, verde, azul);
Desenha o retângulo com preenchimento aleatório
rect(10,10,80,80);

> O senhor prefere email ou Correio do Eureka para dúvidas?

Correio do Eureka.

> No exercicio do Tangram (1oPeriodo DD) vc pede para quando mudar o size, as peças diminuirem ou aumentarem conforme o size mudar… pra isso usa width e heigth…

Calma…  Lembre-se, este é o desafio do exercício, não sendo um ponto obrigatório.
E, na verdade, o desafio é:
“Se o usuário mudar a altura ou largura, as figuras devem permanecer do mesmo tamanho, mas devem manter a simetria indicada”

Uma dica: não é necessário mudar todas as linhas de código de seu desenho. O width e height poderia ser usado apenas para determinar o inicio do desenho, ou seja, poderia ser parâmetro para um comando de translate inicial. Na prática, você determinaria onde começa o desenho da figura em relação a largura e altura.

size(300,400);
translate(width/3, height/2);
rect(-50,-50,100, 100);
translate(width/3, 0);
rect(-50,-50,100, 100);

Para ajudá-los a desenvolver o F02, criamos alguns exemplos no decorrer da aula.

Exibição de imagem (segue também em anexo):

size(300,300);
PImage homem = loadImage("caverna.png");
//image(homem, 0,0);
//image(homem, 100,0);
//image(homem, 0,100);
translate(width/2,height/2);
//rotate(PI/4);
rotate(radians(45));
image(homem,0,0);

size(800,600);
triangle(width/2,0,width,height/2,0,height/2);

size(300,300);
color corAlien1 = color(255,255,0);
color corAlien2 = color(255,0,0);
fill(corAlien1); // Pintar a cabeça
ellipse(150,50,30,30);
fill(corAlien2); // Pintar o corpo
ellipse(150,100,30,100);
fill(corAlien1);
ellipse(150,150,60, 10);

size(400,400);
beginShape(); // Iniciar o desenho de uma forma
vertex(85,53); // Cada ponto
vertex(184,84);
vertex(158,181);
vertex(33,178);
vertex(24,85);
endShape(CLOSE);

01) Exercício do Tangram.

Veja o enunciado em anexo.

Veja código aqui.

02) O Processing também permite que trabalhemos com curvas. Usando apenas as funções que trabalham com curvas, (por exemplo: arc, bezier, curve) e as funções que trabalham com texto (por exemplo, text, textFont), crie um diagrama que represente uma árvore genealógica com 3 gerações. Seja criativo nesta representação.

Além disso, usando a função random, faça com que as cores de cada elemento sejam aleatórias.

Entrega máxima: Segunda, 05/04/2010, Terça, 06/04/2010, até as 13:00h.

cforms contact form by delicious:days