Já finalizei todas as correções necessárias e suas notas já estão na planilha abaixo.
Esta planilha é o que vale.

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjcmFMU1NoM3phaUFQaVRualVIV2tkc0E&hl=pt_BR

Observem  possiveis erros de lançamento no iger e entrem em contato se necessário.

Caso alguém queira conversar comigo e conferir sua prova final, amanhã (sábado) das 8:00h às 9:30h estarei no Lab 7 do CCET. Destaco que não irei na PUCPR na segunda-feira.

Desejo a todos, boas férias e um excelente ano novo!

Segue, abaixo, link para as notas finais:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjcmFMU1NoM3phaUFQaVRualVIV2tkc0E&hl=pt_BR

Por favor, confira possíveis problemas e incoerências!

Observem que no Exame Final desta terça (15/12) teremos a matéria do ano todo (focando mais em estrutura de seleção e estrutura de repetição) e será uma prova TEÓRICA e SEM CONSULTA.

O exame será na sala teórica de vocês (D13?).

Estou terminando a correção dos trabalhos. Amanhã liberarei as notas da 4a Parcial.

Por favor, quem entregou no local errado entregue novamente no Eureka, menu Estudos, menu Plano de Trabalho.

Importante: notas finais até sexta, dia 11/12.

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-2_5.html

Apresentação referente a aula

Exemplos Mobile Processing

1) Escolha uma 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 no link abaixo:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdEdRUXhUcUp1S1ZJeUpYeWNhZ1lNaFE&hl=pt_BR

É essencial que cada aluno use uma biblioteca diferente.

Selecione sua biblioteca no link abaixo:

http://spreadsheets.google.com/viewform?formkey=dEdRUXhUcUp1S1ZJeUpYeWNhZ1lNaFE6MA

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 3 exemplos BEM COMENTADOS;

O primeiro exemplo, pode ser igual a um exemplo já fornecido pela biblioteca.

O segundo exemplo deve ser inédito.

Seu terceiro exemplo também deve ser inédito e usar também outra biblioteca qualquer a sua escolha.

3) Você deverá apresentar seu segundo exemplo no dia 8/12.

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

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

17/11 – Bibliotecas (som, vídeo, camera, etc)

24/11 – Mobile (desenvolvimento para celular)

1/12 – Livre

8/12 – Entrega / defesa – trabalhos do 4o bimestre.

10/12 – vista de notas do 4o bimestre

15/12 – Prova final!

22/12 – Entrega da nota final

Por favor confiram suas notas!

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjcmFMU1NoM3phaUFQaVRualVIV2tkc0E&hl=pt_BR

Farei o lançamento no iger na próxima sexta. Qualquer problema, por favor, avise!

Modelos da Prova 3

Entregar via formulário do Google:

http://spreadsheets.google.com/viewform?formkey=dDRvVmJKbHIwMjVwMzB4M2ttQXNMT0E6MA

Estou começando a corrigir as provas de vocês.

Fechamento das notas na próxima semana.

Caso você queira entregar alguma correção, complemento ou entrega atrasada do P08, por favor, faça via Correio do Eureka até a próxima terça.

* 27/10/2009 – Entrega e defesa do Exercício P08

* 3/11/2009 – Prova 3o bimestre

Para que funcione é necessário a instalação da biblioteca .obj loader.

Passo a passo 3d no Processing, ver seção 8.

Links para arquivos .obj.

Entrega em 20/10!

Código parcial do jogo de tiro

size(400,400,P3D);
background(128);
smooth();
pushMatrix(); // Armazena a posição do eixo
translate(width/2,height/2);
rotate(PI/4);
stroke(255,0,0);
line(0,0,400,0); // Eixo x
stroke(0,255,0); // Verde
line(0,0,0,400);
stroke(0,0,255);
rect(-10,-10,20,20);
//rotateX(PI/4);
//rect(-100,100, 200, 200);
popMatrix(); // Volta
rect(-10,-10,20,20);

// Segundo exemplo:

import processing.opengl.*;
void setup() {
  size(400,400,OPENGL);
  //noStroke();
}
void draw() {
  background(128);
  translate(width/2,height/2);
  // Map é uma regra de 3!
  rotateX( map(mouseY,0,height,0,2*PI) );
  rotateY( map(mouseX,0,width,0,2*PI) );
  //rect(-100,-100,200,200);
  //box(50, 100, 30);
  sphereDetail(100);
  sphere(100);
}

Competição aberta para criação de programas em Processing com um limite de 200 caracteres (ou menos).

Envie seu programa até dia * 13/9/2009 *.

Para quem tem interesse em participar, uma dica também é testar alguns exemplos de código gerados em uma iniciativa espontânea semelhante:

http://www.abstractmachine.net/blog/p5-tweets/

Neste caso, o código era postado via Twitter, limitado a um único tweet, ou seja, 140 caracteres.

• Processamento de imagem;
• Programação gráfica 3d;
• Programação para dispositivos móveis;
• Modularização de algoritmos;
• Uso de bibliotecas em geral;
• Bibliotecas de física e simulação;
• Programação de som e video;
• Realidade aumentada;
• Desenvolvimento de projeto.

Neste semestre, continua a diminuir o peso da prova e a crescer o peso dos trabalhos.

Os exercícios a seguir são um aquecimento, um preview do que está para vir e servem, também, para ilustrar alguns temas que passamos rapidamente no semestre anterior.

1) Por padrão, o eixo de coordenadas no Processing funciona como na imagem a seguir:

Na prática, podemos mover este sistema de coordenadas através de comandos de transformação de coordenadas. Principalmente quando formos trabalhar com coordenadas em 3d, muitas vezes é mais fácil mover o eixo.

A função translate (en / pt) move o eixo a partir da lateral superior esquerda. Esta função recebe dois parâmetros: o primeiro, é o deslocamento em relação ao eixo x e o segundo é o deslocamento em relação ao eixo y.

Complete o código a seguir com os comandos de transformação de forma a conseguir o resultado esperado. Observe que a letra a já está respondida.

a) 

rect(10, 10, 30, 30);
translate(50, 0);
rect(10, 10, 30, 30);
translate(__X1__, __X2__);
rect(10, 10, 30, 30);
translate(__X3__, __X4__);
rect(10, 10, 30, 30);

Resultado esperado:

Resposta do exercício:

rect(10, 10, 30, 30);
translate(50, 0);
rect(10, 10, 30, 30);
translate(0, 50);
rect(10, 10, 30, 30);
translate(-50, 0);
rect(10, 10, 30, 30);

b)

ellipse(50, 50, 10, 10);
translate(10, 10);
ellipse(50, 50, 10, 10);
translate(__x1__, __x2__);
ellipse(50, 50, 10, 10);
translate(__x3__, __x4__);
ellipse(50, 50, 10, 10);
translate(__x5__, __x6__);
ellipse(50, 50, 10, 10);

Resultado esperado:

c)

for(int i=0;i<10;i++) {
  rect(0, 0, 10, 10);
  translate(__X1__, __X2__);
}

Resultado esperado:

2) Outra transformação possível é a rotação, implementada através do comando rotate (en / pt). Tal função rotaciona  o eixo em uma quantidade especificada pelo parâmetro. O ângulo é dado em radianos, ou seja, devem estar entre zero e 2PI. Se quiser converter de graus para radianos use a função radians (en/ pt).

Complete o código a seguir de forma a conseguir o resultado esperado. Observe que a letra a já está respondida.

a)

noFill();
stroke(__X1__,0,0);
line(0,0, 100, 0);
rect(20, 20, 50, 50);
rotate(__X2__);
stroke(0,255,0);
line(0, 0, 100, 0);
rect(20, 20, 50, 50);
rotate(__X3__);
stroke(0,0,255);
line(0, 0, 100, 0);
rect(20, 20, 50, 50);

Resultado esperado:

Resposta:

noFill();
stroke(255,0,0);
line(0,0, 100, 0);
rect(20, 20, 50, 50);
rotate(PI/12);
stroke(0,255,0);
line(0, 0, 100, 0);
rect(20, 20, 50, 50);
rotate(PI/12);
stroke(0,0,255);
line(0, 0, 100, 0);
rect(20, 20, 50, 50);

b)

noFill();
stroke(255,0,0);
line(0, 0, 100, 0);
line(0, 0, 0, 100);
rect(-20, -20, 40, 40);
translate(__X1__,__X2__);
stroke(0,255,0);
line(0, 0, 100, 0);
line(0, 0, 0, 100);
rect(-20, -20, 40, 40);
rotate(__X3__);
stroke(0,0,255);
line(0, 0, 100, 0);
line(0, 0, 0, 100);
rect(-20, -20, 40, 40);
rotate(__X4__);
stroke(255,0,255);
line(0, 0, 100, 0);
line(0, 0, 0, 100);
rect(-20, -20, 40, 40);

c)

noFill();
translate(50,50);
for(int i=0;i<10;i++) {
  rotate(__X__);
  rect(-25, -25, 50, 50);
}

3) Outros comandos disponíveis relacionados à transformações são os comandos scale (en / pt), pushMatrix (en / pt) e popMatrix (en / pt). A função scale aumenta/diminui o eixo de coordenadas. A função pushMatrix guarda em uma pilha o estado atual das transformações sendo feitas. A função popMatrix retorna ao estado colocado anteriormente na pilha.

Complete o código a seguir de forma a conseguir o resultado esperado.

a)

pushMatrix();
translate(50,50);
for(int i=0;i<5;i++) {
  rotate(__X1__);
  scale(__X2__);
  rect(-30, -30, __X3__, __X4__);
}
popMatrix();
noFill();
rect(10, 10, 80, 80);

Resultado esperado:

3) O comando size (en / pt) define o dimensionamento da janela de visualização. Até agora, usamos o comando size apenas com os parâmetros largura e altura. O 3o parâmetro do comando size permite que façamos a escolha do renderizador que o Processing vai usar. Os renderizadores disponíveis são:

• JAVA2D: padrão, ideal para trabalhar com gráficos vetoriais 2d;
• P2D: destinado a gráficos simples e voltado para manipulação direta de pixels;
• P3D: gráficos em 3d simplificados, voltados para o trabalho com pixels diretamente;
• OPENGL: gráficos em 3d via JOGL;
• PDF: desenha em um arquivo PDF.

Para usar esses renderizadores, use, por exemplo:

• size(400, 400, JAVA2D);
• size(400, 400, P2P);
• size(400, 400, P3D);
• size(400, 400, OPENGL);
• size(400, 400, PDF, “output.pdf”);

Para usar o renderizador OPENGL é necessário selecionar o menu Sketch > Import Library > OpenGL.

Observe que para a visualização em 3d (P3D e OPENGL) o eixo z agora deve ser considerado.

Fonte das imagens: REAS &amp;amp;amp; FRY (Processing).

Observe que agora é possível usar as funções rotateX, rotateY e rotateZ de maneira semelhante à função rotate.

Fonte das imagens: REAS &amp;amp;amp; FRY (Processing).

Refaça qualquer um dos exercícios que entregou anteriormente utilizando o renderizador OpenGL e o renderizador P3D.

Por favor, confiram suas notas e presenças nos links a seguir! Também já fiz o lançamento no iger.

Na planilha de notas observem que TODOS os trabalhos foram abertos, conferidos e verificados, valorizando os trabalhos que apresentassem originalidade e que atendessem ou superassem o que era esperado para o exercício.

Leiam, portanto, as dicas e comentários para cada resolução.

Verifiquem também se todos os trabalhos que vocês mandaram foram checados!

Qualquer problema, faço a modificação em sua nota em nossa primeira semana de retorno. A vista da prova 2 também fica para esta semana.

Em relação ao 4o exercício da prova, segue abaixo:

4) Para casa, entrega até o dia 27/7/2009, via Correio do Eureka, exercícios M e K da Lista de Exercícios de Revisão:

http://www.brunocampagnolo.com/2009ip/2009/06/23/exercicio-de-revisao-para-prova-2o-bimestre/

NOTAS:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjcmFMU1NoM3phaUFQaVRualVIV2tkc0E&amp;amp;hl=pt_BR

PRESENÇAS:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjcEQ1eGlGS0U5b2owNzNMUmJuSmFDRkE&amp;amp;hl=pt_BR

Abraços e Boas Férias!

Esta prova, de duração de 1h e 10 min será na Sala de Desenho 13, térreo do bloco de exatas e será sem consulta.

Os exercícios marcados com * são os modelos mais prováveis de aparecerem em sua prova!

Exercícios Referentes a Funções Matemáticas

Ver Aula 05 e Exercício P04!

A) Defina o que faz a função matemática map. Exemplifique.

B) Diferencie as funções abs, ceil, floor e round.

C) Indique qual é o valor em x após a execução do código a seguir?

float a = 10, b = 20, c, x;
c = max(a, b);
x = map(c, 0, 100, 0, 200);

Após a execução o valor em x é igual a: ___

* D) Complete o código a seguir nos espaços indicados. Este código deve exibir uma área da tela na qual o seu mouse, representado por uma elipse deve estar restrita.

void draw()

{

 background(255); // Cor de fundo

 float mx = constrain(mouseX, __x1__, __x2__);

 float my = constrain(mouseY, __x3__, __x4__);

 rectMode(CORNERS); // Modo de desenho de retângulos

 rect(__x5__, __x6__, __x7__, __x8__); // Desenha um retângulo

 ellipse(mx, my, 5, 5); // Desenha uma elipse que acompanha o mouse

}

Os valores a serem completados são:

__x1__ =

__x2__ =

__x3__ =

__x4__ =

__x5__ =

__x6__ =

__x7__ =

__x8__ =

Exercícios Referentes a Estruturas de Repetição

Ver Aula 08 e Exercício P05

E) 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.

* F) 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);
}

* G) 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);
}

* H) 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);
  }  
}

* I) Cada um dos códigos abaixo gera uma figura.

Mostre (desenhe) o resultado da execução do código.

a) (exemplo respondido!)

size(100,100);
for(int i=100;i>0;i=i-30) {
  ellipse(50,50,i,i);
}

RESPOSTA ESPERADA:

b)

size(100,100);
rectMode(CENTER);
for(int i=100;i>=10;i = i / 2) {
  if(i%2==0) {
    ellipse(50,50, i, i);
  } else {
    rect(50, 50, i, i);
  }
}

c)

size(100,100);
for(int i=1;i<100;i=i*4) {
  line(i, 0, i, 100);
}

d)

size(50,50);
for(int i=0;i<3;i++) {
  for(int j=0;j<3;j++) {
    rect(i*10, j*10, 10, 10);
  }
}

Exercícios Referentes A Cores

Ver Aula 10

J) Diferencie a notação RGB e a notação HSB.

K) Observe o jogo de labirinto colocado a seguir. Faça com que quando o usuário chegue no ponto vermelho seja exibida uma mensagem de vitória e seja carregado outro labirinto. Gerador de labirintos: http://xefer.com/maze-generator

Executar!

Exercícios Referentes A Vetores

Ver Aula 12

* L) Complete o teste de mesa em cada um dos exemplos abaixo.

a) (exemplo respondido!)

int[] v = new int[3];
for(int i=0;i<3;i++) {
  v[i] = i*i;
}

b)

int [] v = new int[4];
int a = 1;
for(int i=1;i<v.length;i++) {
  a = a * i;
  v[i] = a;
}

c)

int [] v = new int[4];
for(int i=0;i<v.length;i++) {
  if(i%2==0) {
    v[i] = i;
  } else {
    v[i] = -i;
  }
}

d)

int [] v1 = {4, 5, 6};
int [] v2 = { 1, 2, 3};
for(int i=0;i<v1.length;i++) {
  v1[i] = v1[i] + v2[i];
}

* M) Observe cada um dos códigos a seguir. Cada um deles implementa um programa diferente e que faz pouco sentido individualmente.

Transforme o código fornecido em um código que utilize vetores. Ou seja, algumas das variáveis devem ser transformadas em vetores.

a) (exemplo respondido!)

Executar!

RESPOSTA:

Executar!

b)

Executar!

Resultado Esperado!

c)

Executar!

Resultado esperado!

As variáveis criadas até agora permitiram o armazenamento de apenas um valor de cada vez. Vetores permitem a definição de variáveis com o poder de armazenar múltiplos valores. Voltando à metáfora das gavetas, um vetor corresponde a uma gaveta com inúmeras subdivisões.

O objetivo deste capítulo é definir como podemos utilizar vetores em nossos programas e descreve inúmeras situações nas quais os vetores são essenciais.

Sintaxe introduzida

• Funções de manipulação de vetor:
  • append: Aumenta um vetor em um elemento colocando um novo elemento no fim do vetor;
  • arrayCopy: Copia um vetor ou parte deve em outro;
  • concat: Concatena (junta) dois vetores;
  • expand: Aumenta um vetor para o dobro de seu tamanho ou para um tamanho especificado;
  • reverse: Inverte um vetor;
  • shorten: Elimina o último elemento de um vetor;
  • sort: Ordena um vetor;
  • splice:  Coloca um vetor ou elemento dentro de um outro;
  • subset: Retorna um vetor de elementos de dentro de um vetor já existente.

Declarando e criando vetores

Variáveis do tipo vetor podem ser declaradas da mesma maneira que se declara qualquer outro tipo de dado. A diferença é que após o nome do tipo de dado, deve-se colocar um sinal de abertura e de fechamento de colchetes ([ e ]).

Dessa forma, os seguintes códigos declaram vetores:

int[] posicao;

float[] tamanho;

color[] cor;

string[] nome;

Depois da declaração de uma variável como vetor, ele não pode ser utilizado ainda. É necessária a criação do vetor informando quantas posições ele disponibiliza para uso. Neste momento, parte da memória do computador é separada para cada posição do vetor. A palavra chave new é usada neste processo.

No código abaixo, por exemplo, o vetor posição é criado com 5 posições:

int[] posicao;

posicao = new int[5];

Também é possível declarar e criar um vetor em uma mesma linha. No exemplo abaixo, é criado um vetor cor com 10 posições.

color[] cor = new color[10];

Após o processo de criação de um vetor na memória cada uma de suas posições está vazia pode ter um valor indefinido ou um valor padrão. Visualmente pode-se representar cada uma das posições como se fosse uma variável independente.

Por exemplo, após a execução do código a seguir, a representação na memória do computador é a de 4 variáveis independentes nomeadas: tam[0], tam[1], tam[2], tam[3]. No Processing os vetores iniciam-se na posição zero.

Atribuição de valores a uma posição de um vetor

Para colocar um valor dentro de uma variável de vetor, ou seja, preencher cada posição com uma atribuição pode-se utilizar o nome do vetor e a posição desejada entre colchetes (”[" e "]“) seguida pelo sinal de recebe (”=”).

Por exemplo:

int[] dado = new int[3];

dado[0] = 5;

dado[1] = 3;

dado[2] = 2;

Outra possibilidade é substituir a criação do vetor com o operador new por uma lista separada por vírgulas e delimitada por chaves:

int[] dado = {3, 1, 2};

Limites de um vetor

Já que um vetor começa na posição zero, a tentativa de acessá-lo fora desta posição levanta um erro de execução. Este erro é bastante comum para o programador iniciante.

Por exemplo, a execução do código abaixo, pára o programa e exibe o erro ArrayIndexOutOfBoundsException.

int[] val = new int[2];

val[0] = 1; // Tudo ok

val[1] = 2; // Tudo ok

val[2] = 3; // ERRO!

Para obter o tamanho de um vetor a qualquer momento pode-se utilizar a propriedade length, acessível através do operador ponto (”.”).

O fragmento demonstra o uso desta propriedade:

int[] x = {10, 20, 30};

int[] y = {30, 40, 50,60};

int[] z = new int[5];

int[] w;

println(x.length); // Exibe 3

println(y.length); // Exibe 4

println(z.length); // Exibe 5

// Se a linha a seguir for descomentada, um erro é levantado

// println(w.length);

Percorrendo vetores

Geralmente a estrutura for é utilizada para percorrer vetores. A inicialização se dá com o valor zero, o limite é até o tamanho do vetor e a iteração é feita item a item.

Vale, portanto, o esquema:

for(int variavel = 0; variavel < vetor.length; variavel++)

{

…vetor[variavel]…

}

Observe que o atalho “variavel++” tem o mesmo resultado que variavel=variavel+1, ou seja, a cada iteração, uma posição diferente do vetor é acessada.

Abaixo, uma sequencia de linhas é desenhada com o vetor estabelecendo sua posição inicial.

Executar!

No exemplo a seguir uma série de elipses são desenhadas a partir das informações do vetor.

Executar!

Os dados de um vetor também podem ser alterados com a utilização da estrutura for. Esta estratégia é útil para o armazenamento do resultado da execução de cálculos.

No exemplo abaixo, o vetor d é calculado ao carregar o programa no método setup e é utilizado apenas no método draw.

Executar!

Vetores também podem ser úteis para armazenar valores que representam a posição de objetos. O programa seguinte demonstra os objetos tendo sua posição alterada a partir da posição do mouse.

Executar!

A posição ou estado do mouse também podem ser armazenados utilizando-se vetores.

Executar!

Funções para manipulação de vetores

A manipulação de vetores com o objetivo de aumentar, diminuir, ordenar e apagar um vetor pode ser feita diretamente através de estruturas de repetição e atribuições. Esta abordagem, porém, é trabalhosa e propensa a erros. Sugere-se, portanto, o uso das funções de manipulação de vetores disponibilizadas pela biblioteca padrão. As funções do Processing são listadas a seguir:

• append: Aumenta um vetor em um elemento colocando um novo elemento no fim do vetor;
• arrayCopy: Copia um vetor ou parte deve em outro;
• concat: Concatena (junta) dois vetores;
• expand: Aumenta um vetor para o dobro de seu tamanho ou para um tamanho especificado;
• reverse: Inverte um vetor;
• shorten: Elimina o último elemento de um vetor;
• sort: Ordena um vetor;
• splice:  Coloca um vetor ou elemento dentro de um outro;
• subset: Retorna um vetor de elementos de dentro de um vetor já existente.

Função append: Aumentar um vetor em um elemento

int[] x = { 1, 2, 3};
println(x); // Exibe 1, 2, 3
x = append(x, 4);
println(x); // Exibe 1, 2, 3, 4

Função arrayCopy: Copiar um vetor em outro

int[] x = {1, 2, 0, 0, 5};
int[] y = {3, 4};
arrayCopy(y, 0, x, 2, 2);
println(x); // Exibe 1, 2, 3, 4, 5

Função concat: Concatenar vetores

int[] x = {1, 2, 3};
int[] y = {4, 5, 6};
int[] z;
z = concat(x,y);
println(z);

Função expand: Aumentar um vetor

int[] x = {1, 2, 3};
// Descomentar essa linha para exibir erro!
// println(x[3]);
println(x.length); // Exibe 1, 2, 3
x = expand(x, 4);
println(x[3]);

Função reverse: Inverter um vetor

int[] x = {1, 2, 3, 4, 5, 6};
println(x); // Exibe 1, 2, 3, 4, 5, 6
x = reverse(x);
println(x); // Exibe 6, 5, 4, 3, 2, 1

Função shorten: Eliminar o último elemento

int[] x = {1, 2, 3, 4, 5};
println(x); // Exibe 1, 2, 3, 4, 5
x = shorten(x);
println(x); // Exibe 1, 2, 3, 4

Função sort: Ordenar um vetor

int[] x = {5, 4, 1, 3, 2};
println(x); // Exibe 5, 4, 1, 3, 2
x = sort(x);
println(x); // Exibe 1, 2, 3, 4, 5

Função splice: Colocar vetor dentro de outro

int[] x = {1, 2, 5};
int[] y = {3, 4};
int[] z;
z = splice(x, y, 2);
println(z); // Exibe 1, 2, 3, 4, 5

Função subset: Retorna um vetor de elementos de dentro de um vetor já existente

int[] x = {1, 2, 3, 4, 5, 6};
int[] y = subset(x, 2, 3);
println(y); // Exibe 3, 4, 5

Exemplos de uso das funções de manipulação de vetores

A função append pode ser usada para armazenar a posição do mouse. No programa abaixo, o fragmento x = append(x, mouseX) vai armazenando no fim do vetor a posição em x do mouse.

Executar!

Em mais um exemplo, o vetor armazena as posições do mouse e, a cada iteração a instrução x = subset(x, 1);  elimina o primeiro elemento do vetor. Desta forma, o elemento que na iteração anterior estava na posição 2, na seguinte vai para a 1 e assim sucessivamente.

Esta estratégia implementa uma trilha atrás do cursor.

Executar!

}

* Turma de quarta
PImage av, cen; // Variável que representa a imagem avião e cenario
int yAv; // Variável q representa a posição do avião em y
void setup() {
size(600, 200); // Define o tamanho da tela
colorMode(HSB,360,100,100); // Escolher o modelo de cor
av = loadImage(”aviao.png”); // Carrega a imagem “aviao.png”
yAv = height/2; // Coloca o avião no meio da tela
// Criação do cenário!
background(250,96,99);
stroke(129,96,80);
for(int i=0;i<600;i=i+1){ // i começa em 0, vai até 599, vai de 1 em 1
line(i, random(160,180), i, height);
}
save(”cenario.png”);
cen = loadImage(”cenario.png”);
}
void draw() {
background(250, 96, 99);
image(cen,-frameCount,0);
image(cen,width-frameCount,0);
image(av, 20, yAv); // Exibe a imagem
yAv = yAv + 1; // A gravidade manda o avião para baixo
if(keyPressed) { // Se qualquer tecla for pressionada
yAv = yAv – 2; // Vai para cima
}
// Se o sensor estiver sobre a cor verde!
// Bateu!
if(get(50,yAv+40)==color(129,96,80)) {
noLoop(); // Para a execução!
}
point(50, yAv + 40);
}

Após a implementação destes exercícios

A) No exercício P03, letra N, foi solicitado que você criasse um editor gráfico.

Utilizando os conceitos aprendidos na aula de hoje coloque a possibilidade de utilização de cores em seu editor.

B) O gênero dos jogos de um botão só (one button games) é um dos principais gêneros de sucesso em dispositivos móveis ou para jogos casuais de acesso rápido.

Crie um jogo no qual você controla um objeto voador (avião, helicóptero ou semelhante…) dentro de um ambiente (caverna, túnel, céu, etc) com obstáculos.

Use a imagem que quiser para seu avião, mas se quiser, aproveite esta:

Quando você pressiona qualquer tecla (mouse, teclado, etc) o objeto sobe. Por padrão, a gravidade leva o objeto para baixo.

Você deve desviar dos obstáculos. Sua pontuação é dada pela distância máxima que conseguir percorrer.

Seu cenário deve ser gerado de maneira procedural, ou seja, o cenário deve ser gerado de maneira aleatória e não a partir de uma imagem externa. Além do uso de apenas um botão para controle, esta é a sua única outra restrição! Use sua criatividade para incrementar seu jogo!

Para entender melhor este estilo do jogo dê uma olhada em alguns exemplos:

Exemplo 1

Exemplo 2

Exemplo 3

Entrega do exercício no link: http://spreadsheets.google.com/viewform?formkey=ckk5dWFZUDFrWmpFNWIwd01mbFo2RFE6MA..

Nas últimas semanas, trabalhamos com a estrutura de repetição. Tal estrutura, permite a execução de diversas linhas de código mais de uma vez. O capítulo atual retorna o trabalho com as estruturas da programação gráfica.

Agora, vamos aplicar a estrutura de repetição com diversas funções da programação gráfica. Desta forma, a maior parte dos exemplos dos próximos capítulos utiliza a estrutura de repetição misturada com diversos conceitos da programação gráfica. Iniciaremos hoje com a representação de cores para o Processing.

Sintaxe

Esta seção serve como resumo e referência aos comandos explorados neste capítulo. Pule este tópico se for sua primeira leitura.

• background (en/pt): define a cor de fundo da tela;
• fill (en/pt): define a cor de preenchimento das formas geométricas;
• stroke (en / pt): define a cor de desenho de linhas e bordas;
• color (en / pt): tipo de dado usado para armazenar cores;
• colorMode (en / pt): altera a maneira que o Processing interpreta as cores: RGB ou HSB;
• get (en / pt): retorna a cor de um pixel, ou retorna um pedaço de uma imagem;
• set (en / pt): altera a cor de um pixel, ou escreve uma imagem diretamente na tela;
• save (en / pt): salva em disco o que está sendo mostrado na tela;
• saveFrame (en / pt): salva em disco uma seqüencia de imagens.

Cores

No Processing as cores são definidas através de parâmetros das funções background, fill e stroke:

• background (en/pt): define a cor de fundo da tela;
• fill (en/pt): define a cor de preenchimento das formas geométricas;
• stroke (en / pt): define a cor de desenho de linhas e bordas;

Quando as funções acima são chamadas com apenas um parâmetro, a cor escolhida é uma tonalidade de cinza, sendo o valor zero igual ao preto e o branco correspondente ao valor 255.

No exemplo abaixo, a cor do desenho da linha é variado de 0 até 255. Desta forma, é desenhada uma linha a cada iteração e a alteração da cor da linha cria um efeito de degradê.

Executar!

O valor da cor, porém, também pode ser representado por três parâmetros. Neste caso, por padrão o Processing utiliza a especificação de cores RGB. Nesta especificação, uma cor é representada pela mistura aditiva das cores vermelho (RED), verde (GREEN) e azul (BLUE).

A seguir, três círculos são desenhados um ao lado do outro com as cores vermelho, verde e azul como preenchimentos respectivos.

Executar!

Transparência

Observa-se que as cores especificadas são opacas. Com o uso de dois ou quatro parâmetros é possível definir a transparência de uma cor. O valor zero indica que a cor é completamente transparente e o valor 255 é o padrão que indica a completa opacidade.

No exemplo abaixo, o parâmetro de transparência permite que se crie novas cores dependendo da combinação entre formas com transparência.

Executar!

As informações sobre uma cor podem ser armazenadas em variáveis através do tipo de dado color.

Por exemplo, a linha color amarelo = color(230, 237, 30), cria uma variável chamada amarelo que representa esta cor.

Executar!

Notação HSB

Embora o padrão de cores no Processing seja o RGB também é possível trabalhar com cores nas notações hexadecimal e HSB. A primeira, popular entre os desenvolvedores web codifica os números entre zero e 255 como dois dígitos de zero a FF. Nesta base, os números de zero até quinze são representados de zero a nove e de A até F.

Por exemplo, a cor RGB com vermelho igual a 255, verde igual a 255 e azul igual a 255 é representada em hexadecimal por #FFFFFF.

A notação HSB (Hue, Saturation, Brightness) define as cores em termos de tonalidade, saturação e brilho. O valor de tonalidade (hue) vai de zero até 360 abrangendo todas as cores do espectro. A saturação vai de zero até 100% e indica a pureza de uma cor. Quanto menor a pureza, mais com tons de cinza a cor aparecerá. O brilho indica a relação entre o claro e o escuro e vai de zero a 100%, sendo o 100% representando o maior brilho.

Para selecionar o uso da notação HSB é necessária a chamada à função colorMode (en / pt). Tal função pode aceitar como parâmetros: o tipo de modelo de cor, a escala utilizada para a tonalidade, a escala usada para a saturação e a escala do brilho.

No exemplo abaixo, a saturação e o brilho são constantes mas a tonalidade varia.

Executar!

A escolha de uma cor pode ser facilitada através do uso da ferramenta seletor de cor, acessível pelo menu Tools > Color Selector.

Cor de um pixel

Também é possível obter a cor de um pixel contido em uma posição específica da tela, ou trocar esta cor. Para obter a cor de um pixel através da sua posição em x e y, pode-se utilizar a função get (en / pt) .

O caminho contrário, ou seja, a alteração de um pixel em um local específico da tela pode ser feito através da função set (en / pt).

Abaixo, um exemplo de uso da função set para geração de uma textura procedural.

Executar!

No fragmento a seguir, a cor de um retângulo é escolhida a partir do seletor também de maneira procedural.

Executar!

Salvando o resultado

O resultado de nossos programas fica cada vez mais interessante. É possível salvar este resultado em um arquivo diretamente no Processing. Para salvar a imagem sendo exibida na janela de visualização em um momento exato pode-se utilizar a função save (en / pt).

A imagem será armazenada na pasta do projeto, acessível através do menu Sketch > Show Sketch Folder (CTRL + K). Os formatos possíveis são: TIF, TARGA, JPEG, PNG, dependendo da extensão escolhida. Por questões de segurança esta função não pode ser usada em ambiente Web.

No exemplo abaixo, a imagem “imagem.png” é criado quando o usuário clica com o botão do mouse.

Deve-se ter cuidado na chamada da função save dentro da função draw.  Neste caso, o arquivo é constantemente atualizado e sobrescrito a cada frame.

Outra função que pode ser usada para salvar imagens de um programa é a saveFrame (en / pt). A cada chamada a esta função, uma sequência numerada de imagens é salva na pasta do projeto. Se a função for chamada sem parâmetro, o nome dos arquivos vai de screen-0000.tif até screen-9999.tif, sendo numerado a partir da variável frameCount.

No caso da parametrização, por exemplo: saveFrame(”teste###.tif”), o número de # indica o número de dígitos utilizados para armazenar a sequencia.

Para Saber Mais

Reas, Casey. Fry, Ben. Processing: A Programming Handbook for Visual Designers and Artists. p. 85-93.

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.

Analise os exemplos a seguir (ver mais exemplos em Reas  – p. 65 a 67):

Exemplo 1:

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

Exemplo 2:

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

Exemplo 3:

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

Exemplo 4:

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

Exemplo 5:

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

A) Faça o teste de mesa de cada um dos exemplos um número mínimo de vezes que permita que você entenda seu funcionamento.

B) Baseado nos exemplos, ou criando alguma coisa do zero, gere algumas texturas e padrões procedurais utilizando estruturas de repetição.

Seu código deve ter um máximo de 11 “;” e um máximo de 2 “for” . Por exemplo, no exemplo 5, acima,  temos 6 “;” e 2 “for”.

Envie a imagem resultante de seu código na pasta indicada no Eureka. Apenas a imagem e não seu código!

Envie seu código no link a seguir.

http://spreadsheets.google.com/viewform?formkey=ckJ6X2U0QTNpNklNbm1GSVAyWDVjc1E6MA..

C) Após o envio vamos fazer uma competição.

Você deve escolher uma imagem disponível na pasta de imagens no Eureka.

Recrie o código usado para gerar a imagem. Envie sua resposta no link abaixo:

http://spreadsheets.google.com/viewform?formkey=cnVJVjRjeUl3aUVYT3Y2Y0VMSnFmZEE6MA..