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:
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; 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; FRY (Processing).
Refaça qualquer um dos exercícios que entregou anteriormente utilizando o renderizador OpenGL e o renderizador P3D.
Comentários