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

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

The beauty of data visualization - Comentários

Nesse post, farei comentários sobre a palestra “The beauty of data Visualization”. A palestra está disponível neste link:

https://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization

A visão é o sentido mais rápido do ser humano. É a partir dela que obtemos informações ao nosso redor, de forma consciente ou não, numa velocidade extremamente rápida. Informações essas, que podem ser as cores dos carros que vê na rua, ou números num extrato bancário, ou padrões encontrados em uma parede.
Por isso, quando representamos informações graficamente, as pessoas conseguem entende-las melhor. Comparações de tamanho, cor, posição, são mais bem interpretadas do que simples números em uma tabela. Se certas informações forem colocadas em um gráfico, por exemplo, provavelmente um padrão será criado, uma forma estranha, um desenho familiar, e tudo isso atrai a visão humana, então as informações serão transmitidas de forma mais eficiente

Teoria dos conjuntos - Aplicações em recursos multimídia

A Teoria dos conjuntos é aplicada no desenvolvimento de diversas aplicações multimídia: desde programas de edição de imagens até jogos.
A técnica de Chroma Key (exibida nem sala de aula), por exemplo, consiste em separar o fundo verde (ou de uma cor sólida) do resto da imagem, para que depois seu fundo possa ser modificado.
Quando separamos o fundo do resto da imagem, encontramos a diferença entre os pixels do fundo e do resto da imagem, criando uma máscara. Depois, os pixels do fundo são substituídos por pixels do fundo desejado, checando se os pixels pertencem à máscara de fundo. Por fim, o fundo resultante e o restante da imagem original se juntam para formar uma imagem só, num processo de união.

Analisando uma imagem no Photoshop, vemos que o programa divide a imagem em canais, dependendo do modo de cores que o usuário está utilizando (RGB, CYMK, etc.). Cada canal desse é um conjunto, que indica a intensidade de cada cor que deve ser aplicada a cada pixel da imagem.
Caso coloquemos canais de imagens diferentes, podemos obter efeitos  interessantes, como a técnica de Harris-shutter, exibida nesse blog anteriormente. A imagem é dada pela união de canais RGB, porém um canal de cada imagem.

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*/

}

Funções e Procedimentos - Economizando código

    Basicamente, usar funções e procedimentos em seus códigos deixam o mesmo mais organizado. Como os algoritmos já estão definidos, basta uma linha de código para chamá-los. Assim, não é necessário escrever todo o algoritmo de novo cada vez que for fazer algo no seu programa. não é preciso ficar "inventando a roda" toda vez que for usá-la.

    Por exemplo, caso queira que sua aplicação desenhe um padrão 100 vezes na tela, é melhor escrever o código que desenha esse padrão 100 vezes ou colocar o código desse padrão em uma função e chamá-la 100 vezes? Além de economizar código (e tempo), seu programa fica mais legível e fácil de compreender se utilizar funções e procedimentos.

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: