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

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

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