Exercício P07 (aquecimento) (retorno das férias!)

28 julho, 2009 (18:09) | aulas | Por: admin

Sejam bem vindos de volta à nossa disciplina de Introdução à Programação. Neste semestre, continuaremos a trabalhar com a linguagem Processing e, principalmente, com mais fundamentos referentes à lógica de programação. Trabalhamemos neste semestre com:

  • 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:

eixo

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:

exerctranslate_a

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:

exerctranslate_b

c)

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

Resultado esperado:

exerctranslate_c

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:

exercrotate_a

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

exercrotate_b

c)

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

exercrotate_c

 

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:

exercscale_a

 

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.

eixo3d

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.

 

eixo3dRotacao

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.