Trabalho de Matemática Aplicada a Multimídia - Parte 2

Video referente a segunda parte do trabalho de Matemática Aplicada a Multimidia.

https://www.youtube.com/watch?v=hYf9cQ1U6F0&feature=youtu.be

Atividade - Análise da Palestra "The Beauty of Data Visualization"

David McCandless inicia a palestra com a premissa de que estamos sofrendo com o excesso de informações e abundância de dados ultimamente. Além disso, o palestrante levanta diversas questões sobre a utilização dos dados e informações.

A informações precisam manter um contexto, a informação precisa contar uma estória, de forma que foquemos atenção apenas no que é importante, ver o acesso das informações com outros olhos, selecionarmos o que consideramos relevantes.

Se utilizando de algumas metáforas e exemplos, David McCandless foca na importância que os dados e as informações que temos acesso constroem nosso conhecimento em sociedade, o mesmo chega a comparar os dados ao próprio solo, é a base de tudo que temos acesso recentemente. O mundo das informações é extenso, e se você souber selecionar e focar no que lhe é interessante, você pode aprender muitas coisas interessantes.

Portanto, o acesso a informação é o excesso de dados não é necessariamente algo ruim, eles estão ao nosso favor, contanto que seja filtrados e selecionados de forma adequada. A informação que fica é o conhecimento, isso é o válido, a forma que os dados mudam e constrói o pensamento humano.

Atividade - Tangente

A partir do estudo sobre tangentes em sala, foi proposta a atividade de criar um olho composto por um círculo grande braco com um circulo menor preto dentro que seguisse o cursor do mouse.

Código Gerado:

float tg;
void setup(){
size(600,600);
}
void draw(){
background(0);
if(!(mouseX == 0)){
tg = 180+(180/PI*((atan2(300-mouseY,300-mouseX))));
}


fill(255);
ellipse(300,300,140,140); //Ellipse maior.
stroke(0);
fill(0);
ellipse(45*cos(radians(tg))+300,45*sin(radians(tg))+300,50,50);
println(tg);
}

Resultado:

Atividade - Polígonos Regulares

A atividade consiste em criar uma aplicação que cria um polígino regular a partir da quantidade de lados informados pelo o usuários através de uma variável e discutir a solução. A solução mais adequada pra essa aplicação é criar variáveis que utilizam senos e cossenos para a criação dos pontos do polígno e outras que guardam os valores dos ângulos.

Código Gerado:

int l = 8; //variável que recebe o valor dos lados escolhidos
float ang1 = 360/l;
float ang2 = (360/l)*2;
float r = 100; //raio
float PX1; //posições dos pontos
float PY1; //posições dos pontos
float PX2; //posições dos pontos
float PY2; //posições dos pontos
float soma = 360/l;

void setup(){
background(255);
size(600,600);
}

void draw(){
poligonoRegular();
informacoes();
}

//desenho do poligno
void poligonoRegular(){
PX1 = height/2 + cos(radians(ang1))*r;
PY1 = height/2 + sin(radians(ang1))*r;
PX2 = height/2 + cos(radians(ang2))*r;
PY2 = height/2 + sin(radians(ang2))*r;
line(PX1, PY1, PX2, PY2);
ang1 = ang1 + soma;
ang2 = ang2 + soma;
}

//procedimento que exibe as informações selecionados pelo o usuário
void informacoes(){
fill(0);
textSize(30);
text("Número de lados:" + l, 100, 50);
}

Resultados:

Atividade - Barquinho

Com base nos estudos de trigonometria, foi proposto em sala a atividade de criar um barquinho e o movimento do mesmo no mar.

Código gerado:


//variáveis utilizadas na formação da onda e do barquinho
int onda;
float x ;
float y;


// configurações da tela e da formação da onda
void setup(){
size(800,600);
frameRate(60);

if (width >= height){
onda = width/80;
}
else {
onda = height/60;
}
}

//desenho do barco e suas implementação
void Barco(){
y=(1+sin(radians(x)))*20+height/2-4*onda;
x+=1;
if (x >= width){
x = 5;
}

stroke(0);
line(x,y,x,y-3*onda);
fill(255);
triangle(x,y-onda/2,x-2*onda,y-onda/2,x,y-3*onda);
fill(98,81,81);
quad(x-1*onda,y+onda,x-2*onda,y,x+2*onda,y,x+1*onda,y+onda);
}
// procedimento que recebe as configurações do mar
void Mar(){
float xMar= 0; .
float yMar= height/2;
noStroke();
fill(89,220,245);
rect(0,yMar+onda,width,yMar+onda);
for (int i=0; i <= width;i++){
yMar=(1+sin(radians(xMar)))*20+height/2;
if (!(xMar >= width)){
xMar+=1;
}
triangle(xMar,yMar-onda/2,xMar-2*onda,yMar-onda/2,xMar+2,yMar-3*onda);
stroke(89,220,245);
rect(xMar,yMar-onda,2*onda,2*onda);
}
}

void draw(){
background(250,209,3);
Mar();
Barco();
}

Resultado:

Atividade - Cronômetro

A atividade proposta foi criar um cronômetro a partir da utilização dos cálculos de coordenadas polares para determinar o ponteiro dos segundos.

Código gerado:

float angulo = PI/2;
float diametro = 300;
float intervalo = 1000;
float raio = 150;
float relog;
float x;
float y;
int segundos;

void setup(){
size(600,600);
background(89,184,245);
}

//execução do ponteiro e dos segundos
void draw(){
if(millis() > relog + intervalo){
relog = millis();
polar();
}
}

//desenho do relógio
void polar(){
background(255,0,0);
stroke(255);
fill(0,0,255);
ellipse(300,300,diametro,diametro);
y = diametro - sin(angulo)*raio;
x = diametro + cos(angulo)*raio;
angulo -= 2*PI/60;
line(300,300,x,y);
segundos++;
}



Resultado:

Atividade - Knob

A atividade proposta para casa consiste em criar uma aplicação que simula o funcionamento de um efeito knob, baseados nos códigos de efeito Fade In e Fade Out, realizando um efeito de dissolve em duas imagens de acordo com a posição vertical do mouse. 

Código:

PImage imgGaga, imgDeus;
float OpaMax, OpaMin;
float r,g,b,r2,g2,b2;
int pos;

void setup(){
size(320,240);
imgGaga = loadImage("ladygaga.jpg");
imgDeus = loadImage("deus.jpg");
}

void draw(){
loadPixels();
OpaMax = float(mouseY)/240;
OpaMin = 1 - OpaMax;
for(int x = 0; x<320; x++){
for(int y = 0; y<240; y++){
pos = y * 320 + x;
r = OpaMax * red(imgGaga.pixels[pos]);
g = OpaMax * green(imgGaga.pixels[pos]);
b = OpaMax * blue(imgGaga.pixels[pos]);
r2 = OpaMin * red(imgDeus.pixels[pos]);
g2 = OpaMin * green(imgDeus.pixels[pos]);
b2 = OpaMin * blue(imgDeus.pixels[pos]);
pixels[pos] = color(r+r2, g+g2, b+b2);
}
}
updatePixels();
}


Resultados:

Atividade - Relações de Filtro e Contraste

A atividade proposta foi discutir as definições de filtro e contraste de uma imagem de acordo com uma variável.

Código de execução:

void setup(){
  size(640, 240);
 
  PImage imgOriginal = loadImage("original.jpg"); //imagem original
  PImage imgContraste = createImage(imgOriginal.width, imgOriginal.height, RGB); //cópia que recebe o efeito.
 
  arraycopy(imgOriginal.pixels, imgContraste.pixels);
 
  float inicio = 127.5;
  float contraste = 0.5; //variável que define o valor do contraste aplicado
  loadPixels();
 
  for(int i=0; i<imgOriginal.width * imgOriginal.height; i++){
   
 
    int r = imgContraste.pixels[i] >> 16 & 0xFF;
    int g = imgContraste.pixels[i] >> 8 & 0xFF;
    int b = imgContraste.pixels[i] & 0xFF;
    int a = imgContraste.pixels[i] >> 24 & 0xFF;
   
  //variável vermelho
    r = int(r*(1.0 + (contraste)*((r-inicio)*.01)));
    r = constrain(r, 0, 255);
  //variável verde
    g = int(g*(1.0 + (contraste)*((g-inicio)*.01)));
    g = constrain(g, 0, 255);
  //variável azul
    b = int(b*(1.0 + (contraste)*((b-inicio))*.01));
    b = constrain(b, 0, 255);
 
    imgContraste.pixels[i] = (a << 24) | (r << 16) | (g << 8) | b;
  }
  //criação das imagens
    image(imgOriginal, 0, 0);
    image(imgContraste, width/2, 0);
}

Atividade - Tileset

Durante foi proposto a criação de tileset, utilizando arquivos PGN, através do código em linguagem processing a seguir: 

PImage imgGrama, imgMuro, imgSombra;

int[][] mapa = { {0,0,0,0,0,0,0,0},

{0,1,1,1,1,1,2,0},

{0,1,0,0,0,1,2,0},

{0,1,0,0,0,1,2,0},

{0,1,0,0,0,1,2,0},

{0,1,0,0,0,1,2,0},

{0,1,0,0,0,1,2,0},

{0,0,0,0,0,0,0,0} };

void setup(){

  size(256,256);

  imgGrama = loadImage("grama.png");

  imgMuro = loadImage("muro.png");

  imgSombra = loadImage("sombra.png");

  for(int i=0; i<8; i++){

    for(int j=0; j<8; j++){

      switch(mapa[j][i]){

        case 0: image(imgGrama, i*32, j*32);

        break;

        case 1: image(imgMuro, i*32, j*32);

        break;

        case 2: image(imgSombra, i*32, j*32);

        break;

      }

    }

  }

}

O resultado obtido foi:

Atividade Proposta:

A atividade proposta para casa foi discutir a criação de um mapa a partir de um tileset isométrico. O procedimento é bem simples, consiste na substituição dos tilesets retangulares utilizados anteriormente, por tilesets em formatos de losango, a fim de representar um modelo 3D de uma forma menos complexa.

Exemplo:

Cada tile representado no mapa possui uma coordenada (X,Y) especifica, que vai ser definida nos loops de posicionamento de cada um. 

Portanto, nota-se que a posição dos tiles deve ser dada pelo centro, e não forma de costume. Pequenos detalhes nas coordenadas X e Y contribuem para uma criação melhor do mapa a partir da divisão por dois altura, multiplicada pela subtração dos indices X e Y.