domingo, 15 de junho de 2014

Análise de Infográfico Interativo

Eu escolhi o seguinte gráfico para análise:
http://www.newyorker.com/sandbox/business/subway.html



O Infográfico "INEQUALITY AND NEW YORK’S SUBWAY" foi criado pelo The New Yorker para falar sobre a crescente segregação econômica e social em Nova York. Para apresentar essas informações são usados gráficos de ponto, para demonstrar as diferentes rendas que se cruzam nas linhas do metrô da cidade ao longo de uma viagem. Na parte superior existe o nome do lugar onde cada estação, que é representada por um ponto, está localizada e no lado esquerdo estão os valores que representam a renda.

Para chegar ao resultado, o infográfico analisa dados de renda anual e localização dos americanos residentes em Nova York registrados no Censo norte-americano de 2011. Com essas informações é possível fazer uma combinação geral entre quem entra e sai do metrô e a renda média das pessoas que vivem próximas a estação


nymetro2

nymetro3


Desvio padrão das posições do Mouse

O código abaixo calcula o desvio padrão das últimas 200 posições X e Y do mouse e também realiza a suavização dos movimentos de mouse através de um pequeno quadrado.


int ITENS = 200;  
int[] posicaoX = new int[ITENS];  
int[] posicaoY = new int[ITENS];
int interacao; 
int varianciaX = 0;
int varianciaY = 0;


float desvioPX = 0;
float desvioPY = 0;

int relogio;
int intervalo = 1000;
int t = 0;



void setup() {
  size(400, 400);
  relogio = millis();
}

void draw() {  
  background(0);  
  posicaoX[interacao % ITENS] = mouseX;  
  posicaoY[interacao % ITENS] = mouseY;
  rect(mediaX(), mediaY(), 10, 10);  
  interacao++;
  
  if(millis() > relogio + intervalo) {
    relogio = millis();
    t++;  
  }
  
  text("Desvio Padrão X: "+desvioPX+"\nDesvio Padrao Y: "+desvioPY, 120, 20);
  
  if(t%10 == 0) {
    desvioPX = desvioPadraoX();
    desvioPY = desvioPadraoY();
  }
}


int mediaX() {  //cálculo posição X
  int somaX = 0;  
  for (int contador = 0; contador < ITENS; contador++)  
    somaX = somaX + posicaoX[contador];
    
  return int(somaX / ITENS);
}  

int mediaY() {//cálculo media posição Y
  int somaY = 0;  
  for (int contador = 0; contador < ITENS; contador++)  
    somaY = somaY + posicaoY[contador];  
    
  return int(somaY / ITENS);
}

float desvioPadraoX() {// cálculo desvio padrão X
  varianciaX = 0;
  for (int i=0;i<ITENS;i++) {
    varianciaX += (posicaoX[i] - mediaX()) * (posicaoX[i]- mediaX());
  }
  return sqrt(varianciaX/ITENS);
}

float desvioPadraoY() {// cálculo desvio padrão Y
  varianciaY = 0;
  for (int i=0;i<ITENS;i++) {
    varianciaY += (posicaoY[i]-mediaY()) * (posicaoY[i]-mediaY());
  }
  return sqrt(varianciaY/ITENS);
}

Chroma Key

Continuando o assunto de teoria dos conjuntos, nesta aula vimos conceitos básico de chroma key e como criar um aplicação em Processing que cria chroma key e fades usando máscaras.

A tarefa desta aula foi criar uma aplicação de chroma-key com alfa definido
 por variável específica. Para implementar a aplicação  utilizei a mascara para preencher a imagem nova, quando o pixel das máscara fosse preto a nova imagem seria preenchida com pixel correspondente do cenário, quando a máscara fosse branca  a imagem seria preenchida pelo cenário com 100% de alfa somado à imagem do personagem com o alfa definido anteriormente. 


Segue o link para Download





quarta-feira, 11 de junho de 2014

Filtros e Teoria dos Conjuntos

Para introduzir a Teoria dos Conjuntos, foi apresentado a criação de filtros no Processing. Os filtros usados foram canais RGB e CMY, Negativo, tons de cinza e cinza com média ponderada e  por fim brilho. Segue o link para download da aplicação contendo todos os filltros desenvolvidos.

Download




quarta-feira, 28 de maio de 2014

Trabalho 2 - Análise de Interface

Objetivo 


      Realizar a análise visual,  funcional  de uma aplicação implementada em Processing, com destaque para organização e percepção das formas de acordo com as principais leis da Gestalt e os Fatores de Usabilidade em IHC, propostos por Jakob Nielsen.

Aplicação Selecionada 


       A aplicação analisada foi o RGB Color Visualization (disponivel em http://openprocessing.org/sketch/121628). O programa é uma espécie de calculadora de cores que utiliza o padrão RGB. Ela é dividida em quatro áreas, sendo que cada uma das três primeiras  conta com 8 canais que podem ser ligados(1) ou desligados(0) pelo usuário, formando uma cor com 8 bits(1 byte) , e na  área final o usuário pode visualizar a junção dos 24 bits, resultando em uma nova cor. Na parte inferior de cada setor é mostrado a representação da cor em valor binário e hexadecimal. 






Conceituando a Gestalt


       Primeiramente apresentarei um breve resumo sobre a Gestalt em seguida alguma das suas leis e como elas estão presentes, ou não, na aplicação selecionada. 


       A Gestalt não possui uma tradução certa para o português, o termo que mais se aproximaria de uma tradução seria “forma ou percepção”. Independente de traduções, a Gestalt compreende um conceito de significação de formas, cores, texturas entre outras variáveis de maneira auto-organizada pelo cérebro, com o intuito de criar uma significação lógica para os conhecimentos do individuo.  


      Segundo Max Wertheimer, um dos principais pensadores 
gestaltistas'fórmula' fundamental da teoria da Gestalt pode ser expressada da seguinte forma,” escreveu . “Existem conjuntos, o comportamento dos quais não são determinados por seus elementos individuais, mas onde o processo da parte são determinadas pela natureza intrínseca do todo. É o objetivo da Gestalt de determinar a natureza de tais conjuntos

      Resumindo: o inteiro é interpretado por nós, de forma diferente que a soma de todas as partes que o compõe. 


Aplicação das leis da Gestalt



      Talvez a principal lei da Gestalt, a Unidade tem que passar a sensação que todos os objetos que compõem um todo estão unidos de forma significante e compreensível. De certa forma essa lei é utilizada na aplicação, eu diria até extrapolada, porque sinto falta de uma maior interação entre as cores que o programa representa e as formas que a interface a apresenta. Acho estranho uma aplicação que tem como objetivo a visualização de cores, usar apenas tons de cinza, preto branco. 

      A lei da Semelhança dita que objetos similares se agruparão entre si. Acredito que a RGB Visualization  aplica essa lei de uma forma muito confusa, a interface parece um amontoado de caixas e textos, já  que tudo que  é mostrado na tela é muito igual, em certos momentos  fica complicado diferenciar a qual elemento cada texto se refere, mesmo com a existência do nome de cada cor, um olhar descuidado confunde o usuário. Uma boa forma de solucionar este problema seria usar cores para diferenciar cada seção da tela, seja nos textos, nas cores das caixas  ou usando uma borda colorida para separar cada área. 

       O uso da lei da Proximidade junto com a semelhança acaba complementando desorganização da interface. Os elementos estão dispostos próximos uns dos outros isso acaba agravando o  efeito que já mencionei anteriormente. Nesse caso o aumento  da margem entre cada área resolveria o problema facilmente. 



       A Continuidade está presente quando os objetos estão dispostos em uma sequencia logica para o observador, fazendo com que o usuário perceba uma consistência na aplicação, o que a interface permite que ele realize em uma área, se repete claramente nas demais áreas que a mesma ação pode ser realizada. (De acordo com o que pesquisei essa lei é está mais relacionada a linhas, sequência de pontos, etc, mas acredito que faz sentido definí-la da forma que usei no exemplo.) 

       Por fim, a Pregnância, esta lei se relaciona diretamente a simplicidade das formas, é a capacidade de uma interface ser mais o compreensível possível e de ser mais facilmente assimilada pelo usuário. Na minha opinião aplicação se utiliza dessa lei de forma adequada, ao uso o RGB Visualization pela primeira vez, percebi quase que imediatamente o que a interface me permitia fazer e isso se repetiu  nas demais vezes que a utilizei. 


Jakob Nielsen e fatores de Usabilidade


    Jakob Nielsen é um consultor de usabilidade Web. Ele possui um PH.D. em Interação Humano-Computador. Um de seus principais trabalhos foram as 10 heurísticas que criou para avaliar sistemas interativos, porém o foco dessa análise será os fatores de usabilidade propostos por Nielsen em 1993.

    Nielsen define o critério de usabilidade como um conjunto de fatores que qualificam 
quão bem uma pessoa pode interagir com um sistema interativo. Esses critérios são relacionados com a facilidade e o esforço necessários para os usuários aprenderem e utilizarem um sistema. Desse modo, a usabilidade endereça principalmente a capacidade cognitiva, perceptiva e motora dos usuários empregada durante a interação. Os fatores de usabilidade por ele considerados são:

  • facilidade de aprendizado(learnability);
  • facilidade de recordação (memorability);
  • eficiência(efficiency);
  • segurança no uso(safety);
  • satisfação do usuário(satisfaction).     

A facilidade de aprendizado se refere ao tempo e esforço necessários para que o usuário aprenda a utilizar o sistema com certo nível desempenho. Acredito que para aprender a usa a aplicação escolhida de forma completa, são necessários alguns conhecimentos prévios, como características do padrão RGB, número binários, isso atrapalharia uma pessoa que está usando pela primeira vez. 

A facilidade de recordação diz respeito ao esforço cognitivo do usuário necessário para lembrar como interagir com a  interface. A simplicidade e  a repetição de ações faz com que a aplicação tenha a capacidade de ser memorizada facilmente. 

A eficiência de um sistema está relacionada ao tempo necessário para a conclusão de uma atividade com apoio computacional. Acredito que o RGB Visualization falha nesse fator, apesar de permitir que objetivo seja cumprido, a repetição de ações aumenta o tempo que o usuário gasta com a aplicação e desestimula o a interação.

A segurança se refere ao grau de proteção contra erros ou condições desfavoráveis que a interface de um sistema oferece. Na minha opinião não há como avaliar este fator, a aplicação é bem simples, e quando a utilizei não vi brechas para erros do usuário.

A satisfação é o fator de usabilidade com a avaliação mais subjetiva, expressa o efeito do uso do sistema sobre as emoções e sentimentos do usuário. A aplicação satisfaz o usuário, mas poderia permitir de alguma forma que o usuário aprenda os conceitos de cor que ela usa.


ReferênciasBARBOSA, Simone; SILVA Bruno. Interação Humano-Computador.São Paulo. Elsevier. p. 26-31.

http://www.portaleducacao.com.br/psicologia/artigos/48836/gestalt-definicao-e-as-sete-leis-basicas

http://chocoladesign.com/o-que-e-gestalt



quinta-feira, 8 de maio de 2014

Questão 3 Prova

int largTela = 500;
int altTela = 500;

void setup(){
  size(largTela,altTela);
}


int origemX = largTela/2;
int origemY = altTela/2;
int raio = 150;

float hip;
float catAdj;
float catOp;

float hipPeq;
float catAdjPeq;
float catOpPeq;


int largRect = 500;
int altRect = 50;


void draw(){
  background(255);
  
  
  fill(255);
  ellipse(origemX, origemY, 2*raio , 2*raio);
  
  
  hip = distanciaPP(origemX, origemY, mouseX, mouseY);
  catAdj = mouseX - origemX;
  catOp = mouseY - origemY;
  
  hipPeq = raio;
  catAdjPeq = catAdj * hipPeq / hip;
  catOpPeq = catOp * hipPeq / hip;
  
  
  
  line(origemX, origemY, origemX+catAdjPeq, origemY+catOpPeq );
  
  float angulo = degrees(asin(catOpPeq/hipPeq));
  
  if(angulo<0)
  angulo=-angulo;
  if(mouseX<origemX)
  angulo = 90+(90-angulo);
  if(mouseY<origemY)
  angulo = 180+(180-angulo);
  
  println(angulo);

  fill(255);
  rect(0,0,largRect,altRect);
  fill(0);
  rect((largRect-altRect)*angulo/360,0,altRect,altRect);
}


float distanciaPP(int x1, int y1, int x2, int y2){
  return(sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
}

quarta-feira, 7 de maio de 2014

Colisão com círculos

A tarefa da aula foi criar diversos círculos com centros em pontos aleatórios 
da tela e mudar suas cores caso o mouse se encontre sobre os mesmos


void setup(){
  size(500,500);
}

void draw(){
  background(255);

  criaBola(250,250,30);
  criaBola(120,400,60);
  criaBola(20,40,100);
  criaBola(300,50,10);
  criaBola(370,350,77);

}

void criaBola(int posX, int posY, int raio){
  if(distanciaPP(posX,posY,mouseX,mouseY) <= raio)
    fill(0);
  else
    fill(255);
    
  ellipse(posX, posY, 2*raio, 2*raio);  
}

float distanciaPP(int x1, int y1,int x2, int y2){
  return(sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
}

segunda-feira, 21 de abril de 2014

Yin-yang

O exercício da aula, foi criar a função mostraYinYang(x, y, r), que desenha o símbolo do Yin-yang recebendo como parâmetros um ponto central (x, y) e o raio do círculo maior.


void setup(){
  size(400,400);
  background(200);
  noStroke();
}

void draw(){
  background(200);
  mostraYinYang(200,200,150);
}

void mostraYinYang(float x, float y, float r ){
 //metade  círculo inferior 
 fill(255);
 arc(x, y, 2 * r, 2 * r, 0, PI, PIE);
  
 //metade  círculo superior
 fill(0);
 arc(x, y, 2 * r, 2* r, PI, 2*PI, PIE);
  
 //circulos lado direito
 fill(0);
 ellipse(x + r/2, y, r, r); //circulo maior
 fill(255);
 ellipse(x + r/2, y, r/2.5, r/2.5); //circulo menor
 
// //círculos lado esquerdo
 fill(255);
 ellipse(x - r/2, y, r, r); //circulo maior
 fill(0);
 ellipse(x - r/2, y, r/2.5, r/2.5); //círculo menor
}

quinta-feira, 10 de abril de 2014

Trabalho 01 - Harmonógrafo

               Harmonograph from Mike Swale on Vimeo.



       O harmonógrafo é um aparelho mecânico que através do  movimento de pêndulos usa uma caneta para desenhar formas geométricas(bastante complexas em alguns exemplos) em uma superfície. A sua invenção data da metade do século XIX e teve certa popularidade até o início do século XX. Não existe certeza em relação a quem o inventou,  mas o Professor de Matemática Hugh Blackburn, é comumente creditado como inventor oficial. 








Funcionamento


    O funcionamento do Harmógrafo é baseado em um conjunto de pêndulos que acionam uma caneta, que registra no papel o movimento resultante do sistema. Dependendo da frequência, amplitude e fase em que os pêndulos se movem,  diferentes combinações de padrões aparecem no papel. 

    A freqüência dos pêndulo é controlada pelo comprimento da sua haste, a amplitude varia de acordo com a altura em que o pêndulo é lançado e diminui gradativamente ao longo do tempo em função do atrito de seus componentes e da caneta sobre o papel. A fase entre os pêndulos é determinada pelo momento relativo em que cada um é lançado.


                   Harmonograph from Antony Hall on Vimeo.


Tipos de Harmonógrafos


     O Harmonógrafo Lateral usa dois pêndulos para controlar o movimento da caneta em relação ao papel. Um pêndulo move a caneta para frente e para trás em um eixo, e outro pêndulo move o papel em um eixo perpendicular.




       Existem outros  tipos de harmonografo com mais pêndulos, como exemplo abaixo que possui três. Neste caso dois pêndulos  trabalham perpendicularmente movimentando a caneta e mais um terceiro pêndulo livre, que pode oscilar em qualquer direção, movimenta o papel.





Modelo Matemático


    O Harmonógrafo cria as figuras usando os movimentos dos pêndulos amortecidos. Este movimento é descrito pela equação abaixo:

x(t) = A \sin (tf + p) e^{-dt}, \,\!
     


 A é amplitude,  t representa o tempo, f é a frequência, p é a fase, e d representa o amortecimento.

 Já que o pêndulo pode mover-se sobre dois eixos de uma forma  elíptica, devido ao princípio de sobreposição, o movimento da haste ligada à parte inferior do pêndulo ao longo de um eixo será descrito pela equação:

x (t) = A_1 \ sin (tf_1 + p_1) e ^ {-d_1t} + A_2 \ sin (tf_2 + p_2) e ^ {-d_2t}.  \, \!

 
   Uma vez que o movimento da caneta é composto pelos movimentos de dois pêndulos, se repete o mesmo princípio para o pêndulo no eixo Y. Dessa forma a trajetória em um harmonógrafo pode ser descrita pelas equações abaixo:

x (t) = A_1 \ sin (tf_1 + p_1) e ^ {-d_1t} + A_2 pecado (tf_2 + p_2) e \ ^ {-d_2t}, \, \!
y (t) = A_3 \ sin (tf_3 + p_3) e ^ {-d_3t} + A_4 \ sin (tf_4 + P_4) e ^ {-d_4t}.  \, \!


Modelo Computacional


A principio foi um tanto complicado adaptar o modelo matemático já apresentado, ao Processing, as primeiras tentativas geraram figuras bastantes deformadas como a imagem abaixo, acredito que em grande parte devido a 
dificuldade de encontrar os valores que criassem as formas desejadas:



      Após algum tempo sem conseguir muito avanço, resolvi procurar algum exemplo na Internet que pudesse ajudar a solucionar o problema. Durante a pesquisa encontrei um código em JavaScript, que utilizava praticamente o mesmo modelo que eu estava tentando adaptar, e também um outro site que apresentava valores para os parâmetros das equações para gerar figuras específicas. 

      Depois de transcrever trechos do JavaScript para o Processing e utilizar os valores que encontrei, acredito que alcancei objetivos mais próximos ao do trabalho proposto, abaixo está o código do programa. 


float A1 = 100, freq1 = 2, fase1 = 1/16, d1 = 0.02; 
float A2 = 100, freq2 = 2, fase2 = 3 / 2, d2 = 0.0315;
float A3 = 100, freq3 = 2, fase3 = 13 / 15, d3 = 0.02;
float A4 = 100, freq4 = 2, fase4 = 1, d4 = 0.02;
  
boolean novoHarmon = true;

void setup(){

  size(400,400);
  noStroke();
  background(255);

}
void draw(){
  
   if(novoHarmon)
      harmonografo(4);
}


void harmonografo(int image) {
   
   //algumas variações de valores que
   //geram diferentes imagens
   switch(image){
     
   case 1:
   //Imagem 1
   freq1=3.001; freq2=2; freq3=3 ;freq4=2; 
   d1=0.004; d2=0.0065; d3=0.008; d4=0.019; 
   fase1=0; fase2=0; fase3=PI/2; fase4=3*PI/2;
   break;
   
   case 2:
   //Imagem 2
   freq1=10; freq2=3; freq3=1; freq4=2; 
   d1=0.039; d2=0.006; d3=0; d4=0.0045;
   fase1=0; fase2=0; fase3=PI/2; fase4=0;
   break;   
   
   case 3:
   //Imagem 3
   freq1=2; freq2=6; freq3=1.002; freq4=3;
   d1=0.02; d2=0.0315; d3=0.02; d4=0.02;
   fase1=PI/16; fase2=3*PI/2; fase3=13 *PI/16; fase4=PI;
   break;
   
   case 4:
   //Imagem 4
   freq1=2.01; freq2=3; freq3=3; freq4=2;
   d1=0.0085; d2=0; d3=0.065; d4=0;
   fase1=0; fase2=7*PI/16; fase3=0; fase4=0;
   break;
   
   
   case 5:
   //Imagem Aleatória
   freq1 = (freq1 + random(0,10) / 40)%40;
   freq2 = (freq2 + random(0,10)/40) %40;
   freq3 = (freq3 + random(0,10) / 40)%40;
   freq4 = (freq4 + random(0,10) / 40)%40;
   fase1 += 0.05 % (PI*2);

   break;
   
   
   }
 
   for (float t = 0; t < 50; t+=0.001) {
       float posX =200 + A1 * sin(freq1 * t +  fase1) * exp(-d1 * t) + A2 * sin(freq2 * t +  fase2) * exp(-d2 * t);
       float posY =200 + A3 * sin(freq3 * t +  fase3) * exp(-d3 * t) + A4 * sin(freq4 * t +  fase4) * exp(-d4 * t);
       fill(0);
       ellipse(posX, posY , 1 ,1);
   }
        
   novoHarmon = false;
}


Versão com tempo variando a cada chamada da função draw:
https://www.dropbox.com/s/fmu3m5pmknjhltd/harmonographv2.rar


Seguem algumas imagens geradas pelo código acima: 


                 


   


Referências


1) http://en.wikipedia.org/wiki/Harmonograph

2)http://hernan.amiune.com/labs/harmonograph/animated-harmonograph.html

3)http://www.walkingrandomly.com/?p=151

4)http://www.ouvirativo.com.br/?p=763

terça-feira, 8 de abril de 2014

Crônometro

Ainda utilizando Coordenas Polares, a tarefa era implementar um crônometro. Para isso, usei a funçao millis() para contar o tempo, e a cada segundo o ângulo do ponteiro é decrementado em 6°.

int relogio;
int intervalo=1000;
float angulo = 90;
float raio = 130;
float posX;
float posY;

void setup(){
  relogio=millis();
  size(400,400);
  background(255);
}

void draw(){
  if (millis() > relogio+intervalo){
    relogio=millis();
    cronometro();
    angulo-=6;
   
  }  
}

void cronometro(){
  
  posX = 200 + cos(radians(angulo)) * raio;
  posY = 200 - sin(radians(angulo)) * raio;
  println(angulo);
  
  ellipse(200, 200, 300, 300);
  line(200,200, posX, posY);
        
}

Polígono regulares com Coordenadas Polares

Nesta aula a atividade foi proposta foi fazer um algoritmo para desenhar um polígono regular centralizado na tela com quantidade de lados informada no próprio código. 

//Declaração de Variáveis
  int lados = 5;
  float raio = 100;
  float angulo = 45;
  
  float x[] = new float[lados+1];
  float y[] = new float[lados+1];

void setup(){
size(400,400);
background(255);
strokeWeight(1);

}
    
void draw(){
  background(255);
  
  //desenhar Grade
  line(0,height/2,width,height/2);
  line(width/2, 0 , width/2, height);
  
  //loop responsável por preencher os vetores 
  //que armazenam os pontos X e Y que formaram o polígono
  for(int circunf = 0;circunf < lados; circunf +=1){
        
        //cálculo do ponto X com o uso de coordenadas polares
        //posição x = raio * cos(angulo)    
        x[circunf] = 200 + cos(radians(angulo))*raio; 
        //cálculo do ponto Y com o uso de coordenadas polares
        //posição Y = raio * sen(angulo)  
        y[circunf] = 200 - sin(radians(angulo))*raio;
 
        // o valor do ângulo é calculado em função
        //do número de lados
        angulo += 360/lados;
 }
 //a última posição do vetor, recebe o primeiro
 //valor novamente, já que esse valor se repete
 //na formação da última linha
 x[lados]=x[0];
 y[lados]=y[0];
 
 //loop que monta o polígono utilizando os valores
 //armazenados anteriormente
 for(int i = 0; i<lados; i+=1){
    line(x[i],y[i] , x[i+1], y[i+1]);  
 }
 
 
}