aloneonline-blog

[aloneonline-blog]

Análise de Infográfico Interativo

O inforgráfico que escolhi é um projeto do MIT Media Lab chamado Immersion que visa mostrar o quanto as informações e dados pessoais do Gmail revelam sobre cada usuário.

O link é: https://immersion.media.mit.edu/viz

Inicialmente devemos forcecer permissão para o sistema analisar seu Gmail, a partir daí as informações são obtidas e o infográfico é apresentado.

O infográfico nos mostra estatisticamente com quem mantivemos mais contato de acordo com o número de e-mails respondidos àquela pessoa (isso serve para não contar como pessoa os e-mails de spams e notificações). As bolinhas maiores são proporcionais ao número de pessoas com que se tem maior contato e a cor define os grupos de trabalho. Ao lado podemos ver um gráfico de volume de e-mails enviados e recebidos por data, importante para o usuário ter conhecimento da quantidade de interações que teve.

O Immersion revela também números de emails enviados e recebidos, permitindo que o usuário identifique como seus hábitos de email mudaram ao longo do tempo, referindo-se diretamente às novas pessoas que foram entrando em sua vida.

É possível selecionar cada contato e exibir suas informações, além de mostrar as mais recentes interações que esse contato teve.

Uma imagem do sistema em funcionamento:

[aloneonline-blog]

Análise sobre a palestra “The Beauty of Data Visualization” de David McCandless

David McCandless nos explica como a modernidade e a tecnologia nos afetam tanto hoje em dia. Nosso sentido da visão é, hoje mais do que nunca, a ferramenta mais útil que temos para a percepção do mundo. É notório que a maior parte das novas tecnologias criadas sejam destinadas ao audiovisual e que necessitem de um design para seu bom uso, afinal, o que mais agrada aos nossos olhos é o que é belo. Informações de todos os meios de comunicação não conseguem ser tão eficazes quanto uma informação visual. É um notebook e seus sites, a televisão e seus programas, é um jornal, uma revista, e tudo é preparado da melhor forma para a visão do ser humano, as informações bem dispostas em um layout, psicologicamente estudadas para atrair o olho humano a lê-las. Pensando nisso, David nos apresentou essa palestra mostrando um meio muito eficaz da melhor compreensão do olho humano sobre diversos assuntos: o gráfico. Muitas vezes não temos consciência de como uma informação nos afeta ou o que significam realmente alguns termos de, por exemplo, uma pesquisa científica. Os gráficos nos mostram de uma forma mais geral, mais paupável, e mais adequada à nossa compreensão termos quantitativos que nos possam ser relevantes, permitindo, por exemplo, a comparação de dados em determinados tempos e um entendimento maior sobre os assuntos.

[aloneonline-blog]

Contagem de células vivas em cada geração do Jogo da Vida.

//A tela terá dimensão tam x tam int tam = 500; //Como o tipo PImage é armazenado em vetor, então... int vtam = tam*tam; //Imagem a ser exibida PImage mundo = createImage(tam, tam, RGB); //Imagem auxiliar para criar uma geração PImage mundoTemp = createImage(tam, tam, RGB);

int geracao = 0; int maiorPopulacao = 0; int menorPopulacao = 0;

void setup() { size(tam, tam); background(0); frameRate(5); criaMundo(); }

void draw() { //Criando gerações evoluiMundo(); //Exibindo image(mundo, 0, 0); geracao++; maiorPopulacao = maiorPopulacao(maiorPopulacao); menorPopulacao = menorPopulacao(menorPopulacao); println("Numero de células vivas " + contaCelulas() + " na geração " + geracao); println("Maior população: " + maiorPopulacao); println("Menor população: " + menorPopulacao); }

//cria uma geração void evoluiMundo() { /*A nova geração será guardada em mundoTemp, então é necessário copiar a geração atual para mundoTemp */ for (int i=0; i<vtam; i++) mundoTemp.pixels[i] = mundo.pixels[i];

//Contador de vizinhos int vizinhos; //Para cada célula aplicar as regras do jogo da vida for (int i=1; i<tam-1; i++) for (int j=1; j<tam-1; j++) { vizinhos = contaVizinhos(i, j); //Qtde de vizinhos de uma célula i,j //Se a célula viva, ... if (mundo.pixels[pos(i, j)] == color (0, 255, 0)) { //Menor que 2 vizinhos ou maior que 3, morra if ((vizinhos < 2) ||(vizinhos > 3)) mundoTemp.pixels[pos(i, j)] = color (0, 0, 0); } //Se morta, mas com 3 vizinhos, viva else if (vizinhos == 3) mundoTemp.pixels[pos(i, j)] = color (0, 255, 0); }

//Depois de geração criada, atualizar o mundo, copiando de mundoTemp mundo.loadPixels(); for (int i=0; i<vtam; i++) mundo.pixels[i] = mundoTemp.pixels[i]; mundo.updatePixels(); }

//Conta quantos vizinhos a célula possui int contaVizinhos(int i, int j) { int vizinhos=0; vizinhos = celula(i-1, j-1) + celula(i-1, j) + celula(i-1, j+1) +celula(i, j-1) + celula(i, j+1) + celula(i+1, j-1) +celula(i+1, j) + celula(i+1, j+1); return vizinhos; }

//Se a célula for viva (cor 0,255,0 - verde), retorna 1, senão 0 int celula(int i, int j) { if (mundo.pixels[pos(i, j)] == color(0, 255, 0)) return 1; return 0; }

//Mapeia a posição da matriz em um vetor int pos(int i, int j) { return j * tam + i; }

//Conta células vivas int contaCelulas() { int c = 0;

for (int i = 0; i < vtam; i++) { if (mundo.pixels[i] == color(0, 255, 0)) { c++; } } return c; }

//Verifica a maior populacao existente int maiorPopulacao(int maior) { if (contaCelulas() > maior) { maior = contaCelulas(); } return maior; }

//Verifica a menor populacao existente int menorPopulacao(int menor) { if (menor == 0) { menor = contaCelulas(); } else if (contaCelulas() < menor) { menor = contaCelulas(); } return menor; }

//Cria um mundo aleatório em um quadrado central que vai de 1/3 a 2/3 da tela void criaMundo() {

for (int i=0; i<vtam; i++) { int x = int(random(tam/3, 2*tam/3)); int y = int(random(tam/3, 2*tam/3)); mundo.pixels[pos(x, y)] = color(0, 255, 0); } }

[aloneonline-blog]

Gráfico em pizza da quantidade de cada canal RGB na imagem

PImage img; float totalRGB; float totalR, totalG, totalB;

void setup() { size (200, 200); img = loadImage("original.jpg"); for (int x = 0; x < 320; x++) { for (int y = 0; y < 240; y++) { int pos = y * 320 + x;

float r = red(img.pixels[pos]); float g = green(img.pixels[pos]); float b = blue(img.pixels[pos]);

totalR = totalR + r; totalG = totalG + g; totalB = totalB + b; totalRGB = totalRGB + r + b + g; } }

float pR = totalR/totalRGB; //porcentagem do total de vermelho na foto, entre 0 e 1 float pG = totalG/totalRGB; //porcentagem do total de verde na foto, entre 0 e 1 float pB = totalB/totalRGB; //porcentagem do total de azul na foto, entre 0 e 1 println(pR*100); println(pG*100); println(pB*100);

fill(255,0,0); arc (100, 100, 100, 100, radians(0), radians(pR*360), PIE); fill(0,255,0); arc (100, 100, 100, 100, radians(pR*360), radians(pR* 360 + pG*360), PIE); fill(0,0,255); arc (100, 100, 100, 100, radians(pR*360 + pG*360), radians(360), PIE); }

Imagem:

[aloneonline-blog]

Gráfico em pizza da porcentagem de valores obtidos por cada face de um dado em determinadas vezes

int i; float valor1, valor2, valor3, valor4, valor5, valor6; float p1, p2, p3, p4, p5, p6;

void setup() { size (400, 400); for (i = 0; i < 100; i++) { float j= (int)random(1, 7);

if (j == 1) { valor1++; }

if (j == 2) { valor2++; }

if (j == 3) { valor3++; }

if (j == 4) { valor4++; } if (j == 5) { valor5++; } if (j == 6) { valor6++; } }

p1 = (valor1/100); p2 = (valor2/100); p3 = (valor3/100); p4 = (valor4/100); p5 = (valor5/100); p6 = (valor6/100);

println(p1); println(p2); println(p3); println(p4); println(p5); println(p6);

float ang = p1*360; arc (200, 200, 150, 150, radians(0), radians(ang), PIE); arc (200, 200, 150, 150, radians(ang), radians(ang + p2*360), PIE); ang = ang + p2*360; arc (200, 200, 150, 150, radians(ang), radians(ang + p3*360), PIE); ang = ang + p3*360; arc (200, 200, 150, 150, radians(ang), radians(ang + p4*360), PIE); ang = ang + p4*360; arc (200, 200, 150, 150, radians(ang), radians(ang + p5*360), PIE); ang = ang + p5*360; arc (200, 200, 150, 150, radians(ang), radians(360), PIE); }

[aloneonline-blog]

Estatística - Média, Variância, Desvio Padrão

PImage img; void setup() { size(500, 400); float r, mediaR, variR = 0, somaR=0; float g, mediaG, variB = 0, somaG=0; float b, mediaB, variG = 0, somaB=0; int pos;

img = loadImage("original.jpg");

float maiorR = red(img.pixels[0]); float maiorG = green(img.pixels[0]); float maiorB = blue(img.pixels[0]);

float menorR = red(img.pixels[0]); float menorG = green(img.pixels[0]); float menorB = blue(img.pixels[0]);

for (int x = 0; x < 500; x++) { for (int y = 0; y < 400; y++) { pos = y * 400 + x; r = red(img.pixels[pos]); g = green(img.pixels[pos]); b = blue(img.pixels[pos]);

somaR = somaR + r; somaG = somaG + g; somaB = somaB + b;

if (maiorR < r) maiorR = r; if (maiorG < g) maiorG = g; if (maiorB < b) maiorB = b;

if (menorR > r) menorR = r; if (menorG > g) menorG = g; if (menorB > b) menorB = b; } } mediaR = somaR/(500*400); println("Media de vermelhos é: ", mediaR); println("Maior vermelho é: ", maiorR); println("Menor vermelho é: ", menorR);

mediaG = somaG/(500*400); println("Media de verdes é: ", mediaG); println("Maior verde é: ", maiorG); println("Menor vermelho é: ", menorG);

mediaB = somaB/(500*400); println("Media de azul é: ", mediaB); println("Maior azul é: ", maiorB); println("Menor vermelho é: ", menorB);

for (int x = 0; x < 500; x++) { for (int y = 0; y < 400; y++) { pos = y * 400 + x; r = red(img.pixels[pos]); g = green(img.pixels[pos]); b = blue(img.pixels[pos]);

variR = variR + (r - mediaR)*(r - mediaR); variG = variG + (g - mediaG)*(g - mediaG); variB = variB + (b - mediaB)*(b - mediaB); } }

variR = variR/(500*400); variG = variG/(500*400); variB = variB/(500*400);

println("A variância de vermelho é: ", variR); println("A variância de verde é: ", variG); println("A variância de azul é: ", variB);

println("O desvio padrão de vermelho é: ", sqrt(variR)); println("O desvio padrão de verde é: ", sqrt(variG)); println("O desvio padrão de azul é: ", sqrt(variB)); }

void draw() { image (img, 0, 0); }

Imagem usada:

[aloneonline-blog]

Zoom no Jogo da Vida

//A tela terá dimensão tam x tam int tam = 100; //Como o tipo PImage é armazenado em vetor, então... int vtam = tam*tam; //Imagem a ser exibida PImage mundo = createImage(tam, tam, RGB); //Imagem auxiliar para criar uma geração PImage mundoTemp = createImage(tam, tam, RGB);

int geracao = 0; int maiorPopulacao = 0; int menorPopulacao = 0;

void setup() { size(800, 800); background(0); frameRate(5); criaMundo(); }

void draw() { //Aumenta a escala (zoom) em 800% scale(8); //Criando gerações evoluiMundo(); //Exibindo image(mundo, 0, 0); geracao++; maiorPopulacao = maiorPopulacao(maiorPopulacao); menorPopulacao = menorPopulacao(menorPopulacao); println("Numero de células vivas " + contaCelulas() + " na geração " + geracao); println("Maior população: " + maiorPopulacao); println("Menor população: " + menorPopulacao); }

//cria uma geração void evoluiMundo() { /*A nova geração será guardada em mundoTemp, então é necessário copiar a geração atual para mundoTemp */ for (int i=0; i<vtam; i++) mundoTemp.pixels[i] = mundo.pixels[i];

//Contador de vizinhos int vizinhos; //Para cada célula aplicar as regras do jogo da vida for (int i=1; i<tam-1; i++) for (int j=1; j<tam-1; j++) { vizinhos = contaVizinhos(i, j); //Qtde de vizinhos de uma célula i,j //Se a célula viva, ... if (mundo.pixels[pos(i, j)] == color (0, 255, 0)) { //Menor que 2 vizinhos ou maior que 3, morra if ((vizinhos < 2) ||(vizinhos > 3)) mundoTemp.pixels[pos(i, j)] = color (0, 0, 0); } //Se morta, mas com 3 vizinhos, viva else if (vizinhos == 3) mundoTemp.pixels[pos(i, j)] = color (0, 255, 0); }

//Depois de geração criada, atualizar o mundo, copiando de mundoTemp mundo.loadPixels(); for (int i=0; i<vtam; i++) mundo.pixels[i] = mundoTemp.pixels[i]; mundo.updatePixels(); }

//Conta quantos vizinhos a célula possui int contaVizinhos(int i, int j) { int vizinhos=0; vizinhos = celula(i-1, j-1) + celula(i-1, j) + celula(i-1, j+1) +celula(i, j-1) + celula(i, j+1) + celula(i+1, j-1) +celula(i+1, j) + celula(i+1, j+1); return vizinhos; }

//Se a célula for viva (cor 0,255,0 - verde), retorna 1, senão 0 int celula(int i, int j) { if (mundo.pixels[pos(i, j)] == color(0, 255, 0)) return 1; return 0; }

//Mapeia a posição da matriz em um vetor int pos(int i, int j) { return j * tam + i; }

//Conta células vivas int contaCelulas() { int c = 0;

for (int i = 0; i < vtam; i++) { if (mundo.pixels[i] == color(0, 255, 0)) { c++; } } return c; }

//Verifica a maior populacao existente int maiorPopulacao(int maior) { if (contaCelulas() > maior) { maior = contaCelulas(); } return maior; }

//Verifica a menor populacao existente int menorPopulacao(int menor) { if (menor == 0) { menor = contaCelulas(); } else if (contaCelulas() < menor) { menor = contaCelulas(); } return menor; }

//Cria um mundo aleatório em um quadrado central que vai de 1/3 a 2/3 da tela void criaMundo() {

for (int i=0; i<vtam; i++) { int x = int(random(tam/3, 2*tam/3)); int y = int(random(tam/3, 2*tam/3)); mundo.pixels[pos(x, y)] = color(0, 255, 0); } }

[aloneonline-blog]

Crossfade

PImage img1,img2; float a = 1, r, g, b; int pos;

void setup() { size(320, 240); img1 = loadImage("cenario.jpg"); img2 = loadImage("flor.jpg"); }

void draw() { loadPixels(); a = a - 0.01;

if(a < 0) a=0; for (int x = 0; x < 320; x++) { for (int y = 0; y < 240; y++) { pos = y * 320 + x; //troca de imagens r = a * red(img1.pixels[pos]) + (1-a) * red(img2.pixels[pos]); g = a * green(img1.pixels[pos]) + (1-a) * green(img2.pixels[pos]); b = a * blue(img1.pixels[pos]) + (1-a) * blue(img2.pixels[pos]); pixels[pos] = color(r, g, b); } } updatePixels(); }

Imagem flor

Imagem cenario

[aloneonline-blog]

FadeOut

PImage imgOriginal; float a = 1, r, g, b; int pos;

void setup() { size(500, 375); imgOriginal = loadImage("original.jpg"); }

void draw() { loadPixels(); a = a - 0.01;

for (int x = 0; x < 500; x++) { for (int y = 0; y < 375; y++) { pos = y * 500 + x; r = a * red(imgOriginal.pixels[pos]); g = a * green(imgOriginal.pixels[pos]); b = a * blue(imgOriginal.pixels[pos]); pixels[pos] = color(r, g, b); } } updatePixels(); }

[aloneonline-blog]

FadeIn com limitante

PImage imgOriginal; float a, r, g, b; int pos;

void setup() { size(500, 375); imgOriginal = loadImage("original.jpg"); }

void draw() { loadPixels(); a = a + 0.01; //alfa e sua porcentagem if (a >= 1) //limitador de alfa { a=1; // O fadeIn termina quando a coloração dos pixels atinge 1 inteiro, 100% } for (int x = 0; x < 500; x++) { //scanner de pixels for (int y = 0; y < 375; y++) { pos = y * 500 + x;

r = a * red(imgOriginal.pixels[pos]); g = a * green(imgOriginal.pixels[pos]); b = a * blue(imgOriginal.pixels[pos]); pixels[pos] = color(r, g, b); } } updatePixels(); }

[aloneonline-blog]

Chromakey Simples

PImage imgOriginal, imgMascara, imgCenario, imgCopia; int pos; float corMascara;

void setup() { size(320, 240); imgOriginal = loadImage("flor.jpg"); //carregamento das imagens imgCenario = loadImage("cenario.jpg"); imgMascara = loadImage("mascara.gif"); imgCopia = createImage(320, 240, RGB);

for (int x = 0; x < 320; x++) { //escaneamento dos pixels for (int y = 0; y < 240; y++) { pos = y * 320 + x; corMascara = red(imgMascara.pixels[pos]); // Verifica qual a cor do pixel da mascara if(corMascara == 0) //se a cor verificada for preta... { imgCopia.pixels[pos] = imgCenario.pixels[pos]; // o pixel copiado será da imagem do cenário } else // se não for preto... { imgCopia.pixels[pos] = imgOriginal.pixels[pos]; // o pixel copiado será da imagem do personagem }

} } image(imgCopia,0,0); // exibe o resultado }

Imagem "cenario"

Imagem sobreposta com o chromakey "flor"

Imagem de "mascara"

[aloneonline-blog]

Análise funcional e visual de interface em Processing

Para nosso novo trabalho, devemos escolher uma aplicação feita em Processing e analisá-la funcionalmente e visualmente e, finalmente, propor alterações. Tendo em base alguns critérios do famoso analista de usabilidade Jakob Nielsen e do especialista em interação humano-computador Benjamin Shneiderman, a aplicação que escolhi se trata de uma simulação de Universo. Nele pode-se interagir, criando planetas e seus satélites, estrelas cadente, buracos negros e explosões de estrelas.

Link de acesso: https://www.youtube.com/watch?v=y8hdEd8vTIY

Já de início a aplicação não possui introdução específica, vai direto às instruções de uso do jogo. São habilitadas com o pressionamento do botão H, como informa a própria aplicação, e são desabilitadas pelo clique do mouse para que a interação se inicie. Seguindo uma das heurísticas de Nielsen, para essa aplicação ter uma boa usabilidade seria necessário que essas instruções fossem disponíveis e acessíveis o tempo todo na tela, sem a necessidade de que o usuário lembre como habilitá-las, como é o caso.

As instruções, no caso ativadas com o botão H, são bem objetivas e claramente mostram a ação de cada botão (ou sequência de botões) ao serem apertados. Para Nielsen, objetividade é um ponto positivo, mesmo levando em conta que não há nenhum diálogo direto com o usuário. Esse menu de instruções é ativado por um botão específico (H), que por sinal só aparece novamente se o usuário lembrar do botão e apertá-lo. Para Benjamin Shneiderman, seria ideal se essas instruções, de algum modo, instruíssem o usuário também ao longo das interações da aplicação, que, apesar de não ser um jogo, tem passo a passos que podem ser executados. Isso no caso poderia ser feito se existisse um botão em algum canto da tela que o usuário pudesse ativá-lo para saber de novas interações que pudessem ser feitas, ou até mesmo que exiba novamente as instruções sem necessitar que o usuário lembre o botão que ativa essas informações.

O cenário das interações é uma tela cheia de pequenos pontos brancos, as estrelas, que, com o passar do tempo, somem e aparecem em lugares randômicos. As interações da aplicação consistem basicamente no usuário apertar o botão que tem a ação desejada e escolher um lugar na tela para que ela seja executada, cada uma tem um efeito diferente sobre o pequeno universo na tela.

É possível ligar estrelas e fazer constelações; criar estrelas cadentes; criar planetas (círculos) de diferentes cores e tamanhos e seus satélites (quantos quiser), mudá-los de lugar e ainda explodí-los, transformando-os em centenas de outras estrelas na tela; criar buracos negros e definr seus tamanhos, que sugam as estrelas e planetas mais próximos para seu interior.

O vídeo da aplicação em si não possui qualquer som. Como não tive acesso ao código da aplicação, não sei informar se o executável realmente deve ou não ter algum som ou efeito sonoro, o que seria bastante favorável à aplicação, com certeza. A temática abre uma margem muito grande para possíveis efeitos sonoros, pois há explosões dos planetas e estrelas cadentes que, de acordo com Benjamin Shneiderman, seriam necessários à construção do divertimento da aplicação, bem como gráficos atraentes, mais próximos da realidade, que são inexistentes na exibição do que seriam os planetas, pois são apenas círculos coloridos na tela.

De acordo com o vídeo, a aplicação não tem um "fim", pois, mesmo após o buraco negro executar sua ação e sugar o maior número de "planetas" e estrelas possível, novas estrelas surgirão na tela. Sempre. Sendo assim, a aplicação também não exibe nenhuma tela de créditos. Não há o nome do criador, nem qualquer informação sobre ele em toda a aplicação. Somente no site do YouTube, onde o próprio criador o postou.

É de meu conhecimento que essa aplicação é um projeto pessoal de alguém e não tem nenhum cunho educacional ao seu usuário, mas, na minha opinião, poderia sim existir algum meio que passe ao usuário informações úteis com a temática.

Alguns meios que poderiam ser usados para criar uma aplicação mais interessante e que pudesse até ser um objeto educacional:

Poderiam existir imagens pré-definidas de constelações reais, com informações sobre elas, para que o usuário tentasse reproduzí-las na tela. 

Os planetas poderiam ter cor e textura e poderiam se assemelhar com os planetas reais do sistema solar, possuindo nome e informações sobre eles. Tudo em gráficos de bom desempenho.

As explosões poderiam ter efeitos sonoros, bem como os buracos negros

Poderiam explicar em pequenos slides a existência dos buracos negros e por quê eles sugam outros planetas

Imagem original da aplicação:

Layout proposto 1:

O usuário pode reproduzir as constelações reais apresentadas nos mini-slides no canto da tela. O botão de instruções sempre visível.

Layout proposto 2:

Os planetas são realistas. Quando o usuário clica sobre um dos planetas que acabou de fazer, abre uma janelinha com mini-slides sobre aquele planeta, contendo fotos e informações sobre ele.

Fontes:

http://ibict.metodista.br/tedeSimplificado/tde_busca/arquivo.php?codArquivo=706

http://www.tidbits.com.br/as-10-heuristicas-de-usabilidade-do-nielsen

[aloneonline-blog]

Filtros

PImage imgOriginal; PImage imgCopiaR = createImage(320, 240, RGB); //grupo RGB PImage imgCopiaG = createImage(320, 240, RGB); PImage imgCopiaB = createImage(320, 240, RGB);

PImage imgCopiaC = createImage(320, 240, RGB); //grupo CMY PImage imgCopiaM = createImage(320, 240, RGB); PImage imgCopiaY = createImage(320, 240, RGB);

PImage imgCopiaNegativo = createImage(320, 240, RGB); //negativo

PImage imgCopiaCinza = createImage(320, 240, RGB); //tom de cinza

PImage imgCopiaMPonderada = createImage(320, 240, RGB); //tom de cinza com média ponderada

PImage imgCopiaAjustePos = createImage(320, 240, RGB); //ajuse com variável adicionada

PImage imgCopiaAjusteNeg = createImage(320, 240, RGB); //ajuste com variável subtraída

int pos; float r, g, b; float v = random(-128, 128); //variável que recebe um número entre -128 e +128, que será adicionado ou subtraído na imagem de ajuste

void setup() { size(1280, 720); imgOriginal = loadImage("original.jpg"); for (int x = 0; x < 320; x++) { for (int y = 0; y < 240; y++) { pos = y * 320 + x; r = red(imgOriginal.pixels[pos]); g = green(imgOriginal.pixels[pos]); b = blue(imgOriginal.pixels[pos]);

//println(r);

imgCopiaR.pixels[pos] = color(r, 0, 0); imgCopiaG.pixels[pos] = color(0, g, 0); imgCopiaB.pixels[pos] = color(0, 0, b);

imgCopiaC.pixels[pos] = color(0, g, b); imgCopiaM.pixels[pos] = color(r, g, b); imgCopiaY.pixels[pos] = color(r, g, 0);

imgCopiaNegativo.pixels[pos] = color(255-r, 255-g, 255-b);

imgCopiaCinza.pixels[pos] = color((r+g+b)/3, (r+g+b)/3, (r+g+b)/3);

imgCopiaMPonderada.pixels[pos] = color((0.3*r + 0.59*g + 0.11*b), (0.3*r + 0.59*g + 0.11*b), (0.3*r + 0.59*g + 0.11*b));

imgCopiaAjustePos.pixels[pos] = color(r+v, g+v, b+v);

imgCopiaAjusteNeg.pixels[pos] = color(r-v, g-v, b-v); } } }

void draw() { image(imgOriginal, 0, 0);

image(imgCopiaR, 320, 0); image(imgCopiaG, 640, 0); image(imgCopiaB, 960, 0);

image(imgCopiaC, 0, 240); image(imgCopiaM, 320, 240); image(imgCopiaY, 640, 240);

image(imgCopiaNegativo, 960, 240);

image(imgCopiaCinza, 0, 480);

image(imgCopiaMPonderada, 320, 480);

image(imgCopiaAjustePos, 640, 480);

image(imgCopiaAjusteNeg, 960, 480); }

Todos os filtros na ordem do código:

Original, Red, Green, Blue, Ciano, Magenta, Yellow, Negativo, Tom de cinza com média aritmética, Tom de cinza com média ponderada, Ajuste com variável entre -128 e +128 adicionado, Ajuste com variável dentre 128 e +128 subtraído.

[aloneonline-blog]

Questão 3 da prova.

float posAng = 0;

int larguraTela = 600;

void setup() {

  background(200);

  size(larguraTela, larguraTela);

}

void draw() {

  background(200);

  fill(0);

  rect(0, 10, larguraTela, 60);

  fill(255);

  rect(((larguraTela-30)*posAng)/360, 10, 30, 60);

  float ang = calculaAngulo(mouseY-larguraTela/2, mouseX-                        larguraTela/2) ;

  stroke(0);

  ellipse(larguraTela/2, larguraTela/2, larguraTela/2, larguraTela/2);         polar(larguraTela/4, -ang);

  posAng = ang+180; textSize(20);

  text("Angulo " + posAng, larguraTela/2-50, larguraTela - 50);

}

void polar(float r, float a) {

  float x = r*cos(radians(a));

  float y = r*sin(radians(a));

  //stroke(255, 0, 0);

  strokeWeight(2);

  line(x+larguraTela/2, larguraTela/2-y, larguraTela/2, larguraTela/2);

}

  float calculaAngulo(float y, float x) {

  float ang = atan2(y, x);

  ang = degrees(ang);

  return ang;

}

[aloneonline-blog]

Trajetória da bolinha trabalhando com 
ângulo e velocidade de lançamento

int relogio = millis(); int intervalo = 1000; float dx; float dy = 600;

float t;

ArrayList pontos = new ArrayList();

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

void draw() { t = millis()/100; disparoBalistico(70, 100); desenhaTrajeto(pontos); }

void disparoBalistico(int ang, int velLancamento) { /* Essa função funciona a partir da decomposição dos vetores de movimento o Vo da formula é o valor velLancamento, passado por parametro. O V utilizado no dx é o resultado da decomposição do eixo X do vetor de movimentação | V do MRUV | |______ Velocidade do MRU eixo y = hipotenusa * seno(angulo) eixo x = hipotenusa * cos(angulo) */ background(100); float a = -9.8; //declaro a aceleração, uma CONSTANTE. float hipo = velLancamento/sin(radians(ang)); // descubro o valor da hipotenusa, necessária para descobrir o eixo X do vetor float velFixo = hipo * cos(radians(ang)); //Descubro o eixo X do vetor. //A partir daqui é apenas aplicação de formula. pontos.add(dx); //pontos utilizados para a função desenhaTrajeto. pontos.add(dy+600); dx = velFixo*t; dy = (velLancamento*t + (a*t*t/2))*-1; pontos.add(dx); pontos.add(dy+600); ellipse(dx, 600 + dy, 30, 30); }

void desenhaTrajeto(ArrayList pontos) { for (int i = 3; i < pontos.size(); i+=2) { line((Float)pontos.get(i-3), (Float)pontos.get(i-2), (Float)pontos.get(i-1), (Float)pontos.get(i)); } }

[aloneonline-blog]

Polígono regular centralizado na tela com quantidade de lados informada no próprio código

int largura = 500; //largura da tela int altura = 500; //altura da tela

void setup() { size(largura,altura); desenhaForma(5,100); // mudando-se o primeiro parâmetro, muda-se o número de lados do polígono }

void draw() { } //Função que retorna o eixo x de uma coordenada polar em relação an centro da tela float polarX(float angulo, float raio) { float x = raio * (cos(radians(angulo))); return x + largura/2; }

//Função que retorna o eixo y de uma coordenada polar em relação an centro da tela float polarY(float angulo, float raio) { float y = raio * (sin(radians(angulo)));  return y + altura/2; }

//Função que desenha os lados dos poligonos utlizando o valor retornado pelas funções polarX e polarY void desenhaForma(int numLado,int raio) { float incremento = 360/numLado; for(int i = 0; i < 360; i+=incremento) { line(polarX(i,raio),polarY(i,raio),polarX(i+incremento, raio),polarY(i+incremento, raio)); } }

[aloneonline-blog]

Movimento balístico com tragetória

int relogio; int intervalo = 100; float dX; //distância em x float dY; //distância em y int vI = 10; //velocidade int t = 0; //tempo int i; //contador int a = -1; ArrayList pontos = new ArrayList();

void setup() { relogio = millis(); size(600, 600); } void draw() { if ( millis() > relogio + intervalo ) { //laço para criar o temp relogio = millis(); moveBolaMRUV(); t++; } } void moveBolaMRUV() { background (100); //limpa o rastro da bola pontos.add(dX); pontos.add(dY+300); dX = vI * t; //rota de mru dY = (vI*t + (a*t*t/2)) *-1; //rota de mruv

pontos.add(dX); pontos.add(dY+300); ellipse(dX, dY+300, 40, 40); desenhaTrajeto(pontos);//chama a função e passa a arrayList como parametro. }

void desenhaTrajeto(ArrayList pontos) { for (int i = 3; i < pontos.size(); i+=2) { line((Float)pontos.get(i-3), (Float)pontos.get(i-2), (Float)pontos.get(i-1), (Float)pontos.get(i)); } }