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: