Trabalho parte 2 - modelos natural, matemático e computacional.

Segue abaixo o vídeo da segunda parte do trabalho da cadeira:

Olho - tangente, coordenadas polares e distância entre pontos

Segue abaixo o código comentado da aplicação feita, que faz um olho que "persegue" o mouse:

Utilizando coordenadas polares, a pupila não "foge" do olho quando o mouse está fora do mesmo.

O resultado nesse GIF:

Cronômetro - millis() e ângulos

Segue abaixo o código comentado da aplicação. que desenha um cronômetro que marca os segundos em tempo real:

O resultado final:

Knob - Fade in e Fade out

Na aplicação abaixo, uma imagem transita para a outra, com efeitos simultâneos de Fade in e Fade out, seguindo a posição Y do mouse. Segue abaixo o código comentado:

O resultado segue no gif a seguir (imagens de Justing Currie - http://chasingartwork.deviantart.com/):

Polígonos regulares - um pouco de trigonometria

Abaixo segue o código comentado de uma aplicação que, dado uma quantidade n de lados, desenha um polígono regular:

Resultados: 

Tilesets - Construindo um mapa isométrico:

Um mapa isométrico dá impressão de profundidade, apesar de ser formado por imagens 2D.
Jogos como Final Fantasy Tatics e Ogre Battle têm mapas isométricos.

Abaixo, segue o código comentado de um mapa isométrico que fiz, utilizando um tileset que baixei da internet (infelizmente, perdi o link do dowload do tileset):

Resultado final:

Luis Sacliotto - Concretion 8469, 1984 - Apropriação e aplicação

A obra que escolhi foi essa escultura, Concretion 8469 de Luiz Sacliotto, ano 1984. Feita de alumínio, é composta de duas chapas padronizadas, interligadas por uma terceira chapa em forma de paralelogramo.

Abaixo, temos um desenho com a análise geométrica das chapas padronizadas:

São formadas por 10 pedaços de alumínio cortados geometricamente, dispostos de forma que nos faz lembrar o formato de um losango de altura e largura iguais (da forma do desenho acima). Considerando que m=h/10 (módulo igual à altura dividido por dez), os pedaços de alumino podem ser formados geometricamente por retângulos e triângulos retângulos. A composição geométrica de cada um desses pedaços (contando de cima para baixo) é a seguinte:

·         1 triângulo retângulo de catetos = m;

·         1 triângulo retângulo de catetos = m e 1 quadrado de lado=m;

·         1 retângulo de altura=m e largura=2m e 1 triângulo retângulo de catetos = m;

·         1 triângulo retângulo de cateto =m e um retângulo de altura=m e largura=3m;

·         1 retângulo de altura=m e largura=4m e 1 triângulo retângulo de catetos = m;

·         1 triângulo retângulo de catetos = m e 1 retângulo de altura=m e largura=4m;

·         1 retângulo de altura=m e largura=3m e 1 triângulo retângulo de catetos = m;

·         1 triângulo retângulo de catetos = m e 1 retângulo de altura=m e largura=2m;

·         1 quadrado de lado=m e 1 triângulo retângulo de catetos = m;

·         1 triângulo retângulo de catetos = m;

Minha aplicação desenvolvida no Processing se apropria da forma geométrica dessa chapa principal da escultura. Para isso, criei três funções: trianguloRetanguloA(x,y,l), trianguloRetanguloB(x,y,l), e Sacliotto(x,y,h). As duas primeiras foram criadas para auxiliar na construção do padrão, enquanto a terceira é o padrão em si.

trianguloRetanguloA(x,y,l) cria um triângulo retângulo com origem (x,y) no ângulo reto. Caso o valor de l seja positivo, a hipotenusa fica virada para o 4° quadrante. Se l for negativo, a hipotenusa fica virada para o 2° quadrante.

trianguloRetanguloB(x,y,l) também cria um triângulo retângulo com origem (x,y) no ângulo reto. Caso o valor de l seja positivo, a hipotenusa fica virada para o 3° quadrante. Se l for negativo, a hipotenusa fica virada para o 1° quadrante.

Sacliotto(x,y,h) cria o padrão da chapa principal da escultura na posição (x,y) e com altura h, levando em consideração a análise geométrica feita.

Com a forma apropriada da escultura, desenvolvi uma aplicação que cria uma tecelagem com o padrão na cor preta e o mesmo padrão na cor branca, que preenchem a tela da aplicação.

Resultado final:

CÓDIGO DA APLICAÇÃO COMPLETO E COMENTADO:

void trianguloRetanguloA(int x, int y, int l)

  // desenha triangulo retangulo no ponto(x,y)com origem no angulo reto.

{

  triangle(x, y, x, y+l, x+l, y);

}

void trianguloRetanguloB(int x, int y, int l)

  // desenha triangulo retangulo no ponto(x,y)com origem no angulo reto.

{

  triangle(x, y, x, y+l, x-l, y);

}

void Sacliotto(int x, int y, int h)

  // Cria o padrão de tamanho h nas coordenadas (x,y), de acordo com a análise geométrica.

{

  int m=h/10;//Definindo o módulo.

  //Pedaços do lado direito:

  trianguloRetanguloB(x, y-4*m, -m);

  rect(x, y-3*m, 2*m, m);

  trianguloRetanguloB(x+2*m, y-2*m, -m);

  rect(x, y-m, 4*m, m);

  trianguloRetanguloB(x+4*m, y, -m);

  rect(x, y+m, 3*m, m);

  trianguloRetanguloA(x+3*m, y+m, m);

  rect(x, y+3*m, m, m);

  trianguloRetanguloA(x+m, y+3*m, m);

  //Pedaços do lado esquerdo:

  rect(x-m, y-4*m, m, m);

  trianguloRetanguloA(x-m, y-3*m, -m);

  rect(x-3*m, y-2*m, 3*m, m);

  trianguloRetanguloA(x-3*m, y-m, -m);

  rect(x-4*m, y, 4*m, m);

  trianguloRetanguloB(x-4*m, y, m);

  rect(x-2*m, y+2*m, 2*m, m);

  trianguloRetanguloB(x-2*m, y+2*m, m);

  trianguloRetanguloB(x, y+4*m, m);

}

void setup() {

  size(500, 500); //Definindo o tamanho da tela da aplicação.

  noStroke();

  fill(0);

  background(128);

}

int x=0;

int y=0;

int h=100;// Definindo o tamanho dos padrões.

void draw() {

  fill(0);

  Sacliotto(x, y, h);

  //Cria um padrão preto na posição(x,y).

  fill(255);

  Sacliotto(x+h/2, y+h/2, h);

  /*Cria um padrão branco na posição (x+h/2,y+h/2).

   Dessa forma, os padrões brancos ficam sempre posicionados

   entre 4 padrões pretos, e vice versa.*/

  x+=h;

  // Incrementa x em h. Dessa forma, o padrão repete-se horizontalmente.

  if (x>width+h) {

    x=0;

    y+=h;

  }

  /* Incrementa y em h quando x>largura+h. Dessa forma, garantimos que

   independentemente do tamanho da tela da aplicação, o padrão se repita

   horizontalmente e verticalmente também, preenchendo completamente a tela.*/

  if (y>height && x>width) {

    stop();

  }

  /* Para a aplicação quando y>altura e x>largura da tela da aplicação,

   ou  seja, quando preencher completamente a tela*/

}

Bola quicando - Acelerando as coisas...

Fazer uma bola quicar na tela, aumentando sua velocidade em 1% cada vez que ela quicar.

Segue abaixo o código comentado:

int r=20;

float bolaX= r;

float dX=5;

float bolaY=400;

float dY=5;

void setup(){

  size(800,600);

}

void draw(){

 

    background(0);

  ellipse(bolaX, bolaY, 2*r, 2*r);//cria a bola

   bolaX=bolaX+dX;

   bolaY=bolaY+dY;//movimenta a bola

  if (bolaY>=600-r){

    dY=-(dY+dY/100);

    dX+=dX/100;

  }

  //quica a bola no chão, aumenta a velocidade em 1%

  if (bolaY<=r){

    dY=-(dY+dY/100);

    dX+=dX/100;

  }

  //quica a bola no teto, aumenta a velocidade em 1%

  if (bolaX>=800-r){

    dX=-(dX+dX/100);

    dY+=dY/100;

  }

  //quica a bola na parede esquerda, aumenta a velocidade em 1%

  if (bolaX<=r){

    dX=-(dX+dX/100);

    dY+=dY/100;

  }

  //quica a bola na parede direita, aumenta a velocidade em 1%

}

Um cuidado que tive que ter foi de aumentar em 1% a velocidade em cada dimensão (x,y), cada vez que a bola quicava.

O uso da função MRUV() não seria bom nessa situação, pois nela a velocidade aumenta de acordo com o tempo. Nessa aplicação, a velocidade só aumenta quando a bola encosta uma das paredes.

Depois de certo tempo, o incremento da velocidade é tão grande, que a bola escapa dos limites da aplicação.

Duas bolas - Distancias e geometria

Criando dois círculos que mudam de cor quando o mouse passa por eles, usando distancia2D().

Segue o código comentado:

Um possível resultado:

A da Braun

Criando o A da marca Braun, oscilando seu tamanho.

Abaixo, a referência utilizada:

Segue abaixo o código comentado:

O resultado final:

Bandeira do Brasil

Função mostraBandeiraBrasil(x,y,l), que desenha uma bandeira do Brasil na tela de altura l, na posição (x,y).

                Segundo a lei federal N° 5.700, art. 5°:

Fonte: Wikipédia

Porém, a construção de nossa bandeira será feita somente até o passo IV (círculo no centro).

Segue abaixo o código comentado:

 Funções auxiliares que utilizei.

Função mostraBandeiraBrasil(x,y,l), e execução.

O resultado final:

Lançamento balístico - Framerate e tempo real

A atividade proposta foi: aumentar o framerate do simulador de lançamento balístico criado em sala de aula para 10 fps, e deixar o simulador em tempo real.
No Processing, a função frameRate() determina quandas vezes por segundo algo no draw() será executado. O default do processing é de 60 fps.

Alterando o framerate para 10 fps, devemos dividir o incremento de tempo por 10 também, para que ao se passar 1 segundo na simulação seja adicionado o total de 1 na variável de tempo dela, deixando a simulação em tempo real.

O lançamento balístico é a associação de dois movimentos: um movimento MRU no eixo x e um movimento MRUV no eixo y.
Segue abaixo o código comentado:

O resultado final, com velocidade horizontal = 30, Velocidade vertical = 100 e aceleração vertical = -10 (gravidade da terra):

Simulador MRU - Colocando cores

A atividade proposta foi adicionar cores ao simulador de MRU, seguindo alguma harmonia cromática.
Optei por uma Harmonia cromática de contraste: com cores bem distintas, é fácil distinguir o fundo das linhas e da bolinha. Fundo preto, linhas verdes e bola branca.
Nas imagens abaixo, temos o código comentado:

O resultado final é esse:

Flores e Pitágoras - Criando um "jardim"

A atividade proposta foi que fosse criada uma função flor3 que criasse uma flor com 4 pétalas nas diagonais, tangentes ao miolo, partindo da função flor2 criada em sala de aula. Depois, o Processing deve imprimir 100 flores dessas na tela e parar a execução.

Segue abaixo o código da função flor2:

E da função circulo, que é utilizada em flor2:

Executando o código abaixo:

A flor2 é retornada.

Partindo da flor2, fiz a função flor3, que cria pétalas nas diagonais. Para isso, fiz alguns cálculos.

  

                                

Como se pode ver na imagem acima, para colocar as “pétalas” das flores foi considerado a existência de um triângulo retângulo imaginário, com a hipotenusa valendo 2r, e os catetos x.

Aplicando o teorema de Pitágoras, temos:

X²+X²=(2r)²

Desenvolvendo...

2X² = 4r²

X² = 2r²

X = r

A coordenada de cada pétala (X e Y) deve ser igual ao valor das coordenadas do miolo e mais ou menos (dependendo da posição da pétala) o valor r  .

As linhas de código da função flor3 são essas:

 

                 

O primeiro circulo() cria o miolo, os demais, as pétalas.

Executando as seguintes linhas de código:

                       

O Processing retorna o seguinte:

E executando essas linhas de código:

Temos a saída de 100 flores de tamanhos randômicos. Adicionei uma escala monocromática para diferenciamento das mesmas:

Código completo: