Matemátila e Multimídia

Registro digital de MPM por um semestre.

[matematila]

The Beauty of Data Visualization - Comentário pessoal

Esse é o vídeo/palestra que todos que trabalham com comunicação / mídia / imagem deveria assistir obrigatoriamente, e na verdade mesmo quem não é da área DEVE ter pelo saber do que se trata o termo "Visualização de Dados" antes de se aventurar no mundo informativo que temos hoje. Eu já tinha assistido antes, mas sempre é bom rever e relembrar conceitos básicos que o David explica durante a palestra. Dados são inúteis fora de contexto e se tratando de informação na Internet: tudo é suspeito até que se prove a fonte. Os números são estatísticas e são úteis para o pesquisador ou o usuário, mas a maioria de nós precisa de conceitos e analogias visuais para dar sentido a eles. É mais simples pensar em cores, tamanhos e formas do que em casas decimais, porcentagem, fraçoes...uma coisa está ligada a outra o que muda é a forma como é representada.

Utilizando as palavras do próprio David:

Os dados são o novo solo, porque, para mim, parece um meio fértil e criativo. Ao longo dos anos, continuamente, nós estabelecemos/criamos uma enorme quantidade de informações e dados, e nós a irrigamos com redes de contatos e conectividade, e a mesma tem sido trabalhada e cultivada por trabalhadores não remunerados e governos.

No atual contexto global, se você possui alguma barreira comunicativa, ou seja, se você não consegue passar uma ideia de modo claro, não consegue vender seu peixe, se comunicar com seu cliente/parceiro/patrocinador/patrão/usuário de maneira clara e objetiva, prepara-se para ser pisoteado pela enxurrada de concorrentes que estão prontos para pegar seu lugar. Em outro patamar, o aprendizado pode ser resignificado e ter um aproveitamento muuuito maior do que o de hoje: ao mesmo tempo que eu educo e formo e alfabetizo crianças e jovens visualmente, eu os faço compreenderem o mundo de outra forma, por uma outra ótica: a estética aliada a informativa.

Eu gostaria bastante de ter sido educado dessa maneira visual, trabalhando, modificando e tratando assuntos de outras formas, desde de pequeno, mas nunca é tarde e a Universidade está aí para isso, a internet está aí para isso. #momentodesabafo Voltando, esse particularmente é um assunto que me interessa bastante: infografia, visualização de dados, manupilação de informação...e deixo aqui um complemento para os interessados ao assunto:

É a palestra da Fernanda Viegas no TEDx São Paulo que apresenta uma ferramenta bem importante para transformar dados em informações fáceis de serem visualizadas - o bom é que é em Português. 

[matematila]

Análise do Infográfico Interativo

A peça a ser analisada é um infográfico sobre compra e venda de armas (e assuntos relacionados a armamento) ao redor do globo. Acesse aqui: http://workshop.chromeexperiments.com/projects/armsglobe/

O que eu acho bacana desse infográfico é o aproveitamento perfeito de formas simples, animação sutil mas que diz muito, as cores expressivas e harmônicas e o aprofundamento que a peça permite, foi um trabalho de garimpar a informação e fragmentar de uma maneira que é possível aproveita-la para diversos outros usos. Basicamente você escreve o nome do país na caixa de busca no canto direito e ele mostra o fluxo de compra e venda de armamentos relacionados a esse país. O que é possível analisar: 1 - Com quais os países ele se relaciona comercialmente. 2 - O quanto eles gastam com importaçao e exportaçao. 3 - De quem se compra mais e para onde se vende mais. 4 - Um gráfico de barras na esquerda mostra a decomposiçao desses valores gastos. 5 - Você pode ativar/desativar o que é mostrado na tela pelos checkbox no canto inferior direito. 7 - É possível ver os números por ano, na barra localizada embaixo do infográfico. 8 - E no botáo logo ao lado, um gráfico de linhas que mostra o progresso/regresso com o passar dos anos desse setor naquele país. com certeza tem mais inúmeras formas de associar esses dados, mas se tratando de estatística, temos aqui um prato cheio. Ele se apropria de basicamente três formas de mostrar números grandes: Gráfico de Fluxo (nesse caso sem o uso de setas e sim de animaçao) e Gráfico de Linhas e Gráfico de Barras. Sábias escolhas para o tipo de dado trabalhado. Quando se trata de dinheiro e tempo queremos comparar geralmente o crescimento ou descrescimento, então eu preciso visualizar o antes e o depois de uma maneira intuitiva para afirmar de cara: está indo bem, caiu muito, se manteve estável, lucro exorbitante...e nisso o gráfico de barras é perfeito. Já o gráfico de linhas serve para acompanhar e auxiliar em questões como previsões para o setor nos próximos anos, detectar padrões e variaçoes mínimas que ocorreram durante o período analisado. O problema é que nesse tipo de visualização, alguns bilhões de dólares são representados na maioria das vezes como uma curva ínfima...quando na verdade é muuuuuuuito dinheiro em jogo. Por sua, o gráfico de fluxos nos convida a supor quais as intençoes ou como anda a situação armamentista daquele determinado país: está comprando muito e vendendo pouco, vendendo muito e comprando pouco, negociando com a China, com a Rússia, com países menores na costa Africana, não possui uma relação grande com mais países, por que? O tamanho da luz, a cor da luz e a periodicidade são auto-explicativas.

[matematila]

Gráfico Lançamento de Dados

int Sorteado; int[] quantidades = new int [6]; float[] angulos = new float [6]; color[] cores = new color [6]; float inicial = 0; float finals = 0;

void setup() { size(600,600); background(#ECF0F1); fill(0,0,0); textSize(14); text("GRÁFICO DE LANÇAMENTO DE UM DADO 10000 VEZES", width/5, 30); //atribuição de cores a um índice cores[0] = color(#FC797A); cores[1] = color(#343844); cores[2] = color(#2AB69D); cores[3] = color(#E65848); cores[4] = color(#FDC536); cores[5] = color(#FCF2D7); //cada indice do vetor quantidades vai sendo preenchido de um em um caso o numero sorteado corresponda ao seu indice for (int i = 0; i < 10000; i++) { Sorteado = (int(random(6))+1); if (Sorteado == 1) quantidades[0]++; if (Sorteado == 2) quantidades[1]++; if (Sorteado == 3) quantidades[2]++; if (Sorteado == 4) quantidades[3]++; if (Sorteado == 5) quantidades[4]++; if (Sorteado == 6) quantidades[5]++; } //conversão dos valores em ângulos for (int i = 0; i<6; i++){ angulos[i]=(2*PI*quantidades[i]) / 10000; println("angulo:" + angulos[i]); } noStroke(); //desenhando setores, começa de zero ate um angulo inicial, ai depois vai do ultimo ate o proximo angulo... for(int i = 0; i<6; i++){ fill(cores[i]); arc(300, 300, 400, 400, finals, finals+angulos[i], PIE); finals = finals + angulos[i]; } println("Quantidade de 1: " + quantidades[0]); println("Quantidade de 2: " + quantidades[1]); println("Quantidade de 3: " + quantidades[2]); println("Quantidade de 4: " + quantidades[3]); println("Quantidade de 5: " + quantidades[4]); println("Quantidade de 6: " + quantidades[5]); }

[matematila]

Gráfico Lançamento de Moedas

int cara = 0; int coroa = 0; int anday = 0; int tam = 300; int lancamentos = 5;

void setup(){ size(tam, tam+200); background(#011528); fill(0, 255, 0); for(int j = 0; j<5; j++){ for(int i = 0; i<lancamentos; i++){ if(int(random(2)) == 0) cara++; else coroa++; } noStroke(); fill(#F52A48); rect(0, anday, cara*(tam/lancamentos), 30); fill(#40C177); rect(0, anday+30, coroa*(tam/lancamentos), 30); anday = anday + 65; cara=0; coroa=0; } textSize(24); fill(#F52A48); text("cara", 10, 370); fill(#40C177); text("coroa", 70, 370); }

[matematila]

Jogo da Vida com Gráfico de Mortes, Nascimentos e População

Três gráficos de superfície sobrepostos informando a quantidade de mortes, nascimentos e número de indivíduos no decorrer das gerações. Eis o código:

//A tela terá dimensão tam x tam int tam= 300; //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 cgera, cpop, cmaior, cmenor; int taxadenatalidade = 0; int taxademortalidade = 0;

void setup() { size(tam, 2*tam); background(0); frameRate(10); criaMundo(); for (int i=0; i<vtam; i++) { if (mundo.pixels[i] == color (0, 255, 0)) { cpop++; } } cmenor = cpop; cmaior = cpop; text("VARIAÇÃO POPULACIONAL DE GERAÇÕES:", 10, 400); text("Maior Valor de População:", 10, 420); text("Menor Valor de População:", 10, 440); }

void draw() {

//Zerar as variáveis de natalidade e mortalidade para cada geração taxadenatalidade = 0; taxademortalidade = 0; //Criando gerações evoluiMundo(); //Exibindo image(mundo, 0, 0);

//condição para avaliar qual a maior e a menor população registrada nas gerações if (cpop > cmaior) { cmaior = cpop; } if (cmenor > cpop) { cmenor = cpop; } println("geração: " + cgera); println("população: " + cpop);

//Retangulo preto que limpa a posição onde é mostrada os valores de maior e menor noStroke(); fill(#000000); rect(190, 410, 50, 30);

//Mostra o valor de maior e menor stroke(1); fill(#ffffff); text(cmaior, 200, 420); text(cmenor, 200, 440);

//com sucessivas linhas, o gráfico de superficie é desenhado, para alterar a ordem da sobreposição,´basta alterar a ordem do codigo abaixo. stroke(255, 0, 0); line(0+cgera, 2*tam, 0+cgera, 600-(taxademortalidade/50));

stroke(0, 0, 255); line(0+cgera, 2*tam, 0+cgera, 600-(taxadenatalidade/50));

stroke(0, 255, 0); line(0+cgera, 2*tam, 0+cgera, (2*tam)-(cpop/100));

//zero a variavel para a próxima geração cpop = 0; }

//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); taxademortalidade++; } } //Se morta, mas com 3 vizinhos, viva else if (vizinhos == 3) { mundoTemp.pixels[pos(i, j)] = color (0, 255, 0); taxadenatalidade++; } }

//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();

cgera++;

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

//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 * width + i; }

//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); } }

[matematila]

Fade nas Imagens - Pt 2 - CrossFade e Fantasma (Chroma Key + Fade)

Para o Efeito Fantasma é preciso ter 3 elementos PImages:

>Personagem >Máscara >Cenário

Todos devem ter o mesmo tamanho, inclusive o canvas. Nesse exemplo tanto as imagens carregadas quanto o canvas possuem 320x240px. A máscara é um gif em preto e branco puro, o que faremos é onde tiver preto, será copiado da imagem do personagem e o que tiver branco será copiado do cenário. Só que além disso, o personagem tem que estar translúcido, incluindo valores de transparencia para ele e misturando as intensidades R G B com o R G B do cenário.

Vamos ao código:

PImage imgOriginal; PImage img2; PImage imgMascara; float r, g, b; int pos;

void setup() { size(320, 240); imgOriginal = loadImage("cenario.jpg"); img2 = loadImage("personagem.jpg"); imgMascara = loadImage("mascara.gif"); }

void draw() { crossFadeCroma(imgOriginal, img2, imgMascara, 30); }

void crossFadeCroma(PImage img1, PImage img2, PImage mascara, float alfa) { {

loadPixels(); alfa = alfa/100; for (int x = 0; x < 320; x++) { for (int y = 0; y < 240; y++) { pos = y * 320 + x;

//onde tiver vermelho (branco) copia-se o pixel do cenario float seletorCroma = red(mascara.pixels[pos]); if(seletorCroma == 0) { r = red(img1.pixels[pos]); g = green(img1.pixels[pos]); b = blue(img1.pixels[pos]); }

//se não copia-se do cenário + o personagem, aumentando o alfa em um e diminuindo em outro else { r = alfa*red(img1.pixels[pos]) + (1-alfa)*red(img2.pixels[pos]); g = alfa*green(img1.pixels[pos]) + (1-alfa)*green(img2.pixels[pos]); b = alfa*blue(img1.pixels[pos]) + (1-alfa)*blue(img2.pixels[pos]); } pixels[pos] = color(r, g, b); } } updatePixels(); }

}

imagens utilizadas:

[matematila]

Fade nas Imagens - Pt 1 - Fade In e Fade Out

O gif abaixo mostra bem como são esses efeitos. No fade in, a imagem começa escura e chega no brilha natural, e no fade out ela sai do brilho natural para o preto. Os fades podem ser também para o branco ou qualquer outra cor. 

No código abaixo controlamos o valor os fades por um variável, com ela podemos prolongar e decompor o fade, ou torna-lo mais bruto. PImage imgOriginal; PImage img2; float r, g, b; float brilho = 1; float brilho2 = 0; int pos;

void setup() { size(220, 165); imgOriginal = loadImage("original.jpg"); img2 = loadImage("original2.jpg"); }

void draw() {

//chamando função no draw. fadeIn(imgOriginal);

fadeOut(imgOriginal); }

//recebe um elemento PImage void fadeIn(PImage imgOriginal) { loadPixels();

//variavel regula o brilho, durante a execução ela vai sendo incrementada do valor mais baixo de brilho até o valor original de brilho. brilho2 += 0.01; if (brilho2 >= 1) { brilho2 = 1; }

for (int x = 0; x < 220; x++) { for (int y = 0; y < 165; y++) {

//conversao de matriz para vetor. pos = y * 220 +x;

//para cada cor de pixel eu multiplico o valor da variavel de brilho r = brilho2*red(imgOriginal.pixels[pos]); g = brilho2*green(imgOriginal.pixels[pos]); b = brilho2*blue(imgOriginal.pixels[pos]); pixels[pos] = color(r, g, b); } } updatePixels(); }

//recebe um elemento PImage

void fadeOut(PImage imgOriginal) {

loadPixels();

//decrementando a variável brilho brilho -= 0.01;

for (int x = 0; x < 220; x++) { for (int y = 0; y < 165; y++) {

//convertendo matriz em vetor pos = y * 220 +x;

//cores em função de variável de brilho r = brilho*red(imgOriginal.pixels[pos]); g = brilho*green(imgOriginal.pixels[pos]); b = brilho*blue(imgOriginal.pixels[pos]); pixels[pos] = color(r, g, b); } } updatePixels(); }

[matematila]

Jogo da Vida Aumentado em 8 vezes

[matematila]

Jogo da Vida - Zoomx8

Para quem não sabe do que se trata, esse vídeo explica diretinho.

Nos foi dado um código para rodar o jogo da vida no processing utilizando-se da manipulação pixel a pixel já comentada anteriormente, o problema é que essa manipulação se via em escala de pixel, ou seja, muito pequena. A proposta então é aumentar/dar um zoom nesses elementos em 8 vezes. Então vamos ao código e o qual a solução fora utilizada.

É dentro do draw que a mágica deve acontecer. Os cálculos dos mundos e das gerações não deve ser alterado em nada, somente a exibição. Não sei se essa seria a solução esperada, mas é muito próxima. 

void draw() { //Criando gerações evoluiMundo(); //Exibindo /*   Aqui tem-se um laço dentro de um laço, de forma a percorrer todas as linhas e todas as colunas do canvas. Dentro desse laço, se determinado pixel for verde, eu desenho um retangulo com as posições dele e de tamanho 8 x 8(um quarado). Se for preto eu faço o mesmo retangulo sendo que preto. No laço eu pulo de 8 em 8 o incremento. */ for (int i=1; i< tam; i=i+8) { for (int j=1; j< tam; j=j+8) { if (mundo.pixels[pos(i, j)] == color (0, 255, 0)) { noStroke(); fill(0, 255, 0); rect(i, j, 8, 8); } else{ fill(0, 0, 0); rect(i, j, 8, 8); } } } }

CONFIRA O VÍDEO NO PRÓXIMO POST DAS GERAÇÕES AUMENTADAS.

[matematila]

BALLDROPPING – AVALIAÇÃO DE EXPERIÊNCIA

Selecionar aplicação Processing, informá-la no dropbox, proceder a análise visual e funcional de sua interface gráfica e propor alterações - postar o resultado em seu blog.

A Aplicação – http://balldroppings.com/js/

O balldroppings faz parte da coleção Chrome Experiments e foi criado por jtnimoy, um Sillicon Valley Unicorn (termo usado para designar pessoas que possuem forte característica multidiscplinar por vezes designers-programadores ou artistas-engenheiros capazes de coisas inimagináveis) e artista de software que acredita que “a criatividade é uma força séria de negócio e da humanidade, capaz de muito mais do que mero entretenimento, a manipulação do consumidor e fortalecimento intelectual. É nutritiva, cura, é mágica, um componente absolutamente essencial em cada um de nós.” O Balldropping é seu trabalho mais famoso e trata-se de um ambiente onde o usuário cria linhas que produzem sons quando bolinhas atingem sua superfície.

Preparando o terreno – Algumas considerações devem ser levadas em contas por quem ler essa avaliação, essas mesmas foram levadas em conta por quem realizou a avaliação, são elas:

1 –UX Design é um termo bastante abrangente e usado errôneamente na maioria das vezes. Aqui a melhor definição seria(no original em inglês):

A UX designer’s work should always be derived from people’s problems and aim at finding a pleasurable, seductive and inspiring solution. The results of this work should always be measurable through metrics describing user behaviour. UX designers use knowledge and methods that originate from psychology, anthropology, sociology, computer science, graphic design, industrial design and cognitive science.

2 - São poucas as referências sobre heurísticas de avaliação de UX. Em sua maioria são heurísticas de usabilidade adaptadas e não suprem a necessidade de precisão. Métodos de avaliação existem aos montes. Nessa avaiação fora utilizado o Teste Heurístico proposto por Leena Arhippainen e o Teste de Valores proposto por Moser, Fuchsberger e Tscheligi.

3 – A experiência é individual, cada usuário experimenta algo único. A experiência é afetada por experiências anteriores e grau de familiaridade com o elemento com o qual se interage. A experiêcia varia também de acordo com o contexto cultural e social ao qual o usuário está inserido.

4 – Os  melhores designers não são aqueles que se fixam à uma técnica ou método de design, mas o que escolhe qual é o mais adequado para cada projeto.

5 – Não é sabido se o autor da aplicação teve a preocupação ou optou por não seguir a corrente do UX Design. Ele pode ter escolhido outra vertente.

6 – O objetivo dessa avaliação não é constatar certo ou errado, mas o que funciona e o que pode ser melhor trabalhado.

  Resultados

A aplicação é bem simples de ser utilizada, bastante convidativa à exploração principalmente devido às bolinhas caindo constantemente, instiga a curiosidade de testar o que se pode fazer ali e cumpre o objetivo sem muitas voltas: explore e crie sons variados com as linhas certas nas posições certas. É fácil de aprender a utilizar, há um pequeno texto dizendo o que deve ser feito mas a lógica não parece tão evidente. É também bastante divertida, entretém e desafia a buscar “a batida perfeita”, não enjoa facilmente, possui sons agradáveis e não frustra o usuário com facilidade. O nível de imersão é altoe a taxa de engajamento (tempo de uso) também é maior para aplicações desse tipo (ambientes propícios para exploração) devido em parte à capacidade de auto-expressão do usuário.

O contraste é o grande forte da aplicação em questões visuais. Apesar de seguir uma linha minimalista, a diagramação distoa da aplicação. A parte inferior (branca) parece algo alheio à parte superior (preta) quando na verdade uma depende da outra. A proposta seria integrar as duas áreas através da forma dos botões por exemplo – botões redondos com negativo evidente, da tipografia pelo uso de fontes light ou black e do layout dos textos e elementos (alinhamento). Essa integração facilitaria a compreensão do funcionamento do produto , por exemplo: a gravidade e o fluxo de bolas afetam diretamente os sons produzidos tornando-os mais longos ou curtos, mais agudos ou graves, ressoantes ou abafados sendo que não está explícito e demora um pouco para seus efeitos serem sentidos.

O feedback de causa e consequência pode ser muito melhor aproveitado utilizando cores. A altura em que a linha é desenhada, a capacidade de mover seus pontos inciiais e finais e reposiciona-las, o comprimento da linha, a inclinação, a proximidade…sãos algumas das variáveis que com feedback de cores e animações (tempo de fade out do contorno por exemplo) ficariam muito mais evidentes e proporcionariam um melhor aprendizado / reconhecimento / intuição no uso  e consequentemente experiência. Exemplos que ilustram esse tipo de feedback e incrementam a imersão, a atenção e a qualidade da experiência:

CONTACT: Augmented Acoustics from Felix Faire on Vimeo.

reactable from mediateletipos on Vimeo.

  Referências: http://di.ncl.ac.uk/uxtheory/files/2011/11/11_Moser.pdf

http://www.cie.fi/media-files/Profilematerial/Ten%20User%20Experience%20Heuristics%20with%20a%20Template.pdf

http://www.allaboutux.org/files/UX-WhitePaper.pdf

http://uxpin.com/upload/ux-design-for-startups-marcin-treder.pdf

[matematila]

Modificando Imagens Pixel a Pixel

PARA MELHOR COMPREENSAO DESSES EXEMPLOS É IMPORTANTE QUE VOCÊ SAIBA O BÁSICO SOBRE PERCEPÇÃO ÓPTICA HUMANA E IMAGENS EM SISTEMAS ELETRÔNICOS. PARA ISSO RECOMENDO A LEITURA DA APOSTILA ANEXADA NO POST ANTERIOR. A partir de uma imagem original colorida de tamanho definido são geradas versões dessa mesma imagem com filtros de cores já que nesse processo manipula-se pixel por pixel, suas intensidades e seus espectros com variáveis.

PImage imgOriginal; PImage imgR = createImage(220,165,RGB); PImage imgG = createImage(220,165,RGB); PImage imgB = createImage(220,165,RGB); PImage imgC = createImage(220,165,RGB); PImage imgM = createImage(220,165,RGB); PImage imgY = createImage(220,165,RGB); PImage imgGray = createImage(220,165,RGB); PImage imgHumanGray = createImage(220,165,RGB); PImage imgIn = createImage(220,165,RGB); PImage imgMaisBrilho = createImage(220,165,RGB); PImage imgMenosBrilho = createImage(220,165,RGB);

float r,g,b; int pos;

//definindo mundo void setup(){ size(880,495); imgOriginal = loadImage("original.jpg");

//aqui vou percorrer a imagem toda, pixel a pixel e guardar certas informações que me serão úteis mais a frente for(int x=0; x<220;x++){ for(int y=0;y<165;y++){ pos = y*220+x;

//aqui eu armazeno numa variavel as informações dos canais de cores RED GREEN e BLUE r = red(imgOriginal.pixels[pos]); g = green(imgOriginal.pixels[pos]); b = blue(imgOriginal.pixels[pos]); println(r);

//aqui eu atribuo os valores armazenados nas variaveis à outros elementos do tipo PImage, esses serão desenhados no DRAW imgR.pixels[pos] = color(r,0,0); //Só informações de vermelho Vermelho imgG.pixels[pos] = color(0,g,0); //Só informações de Verde imgB.pixels[pos] = color(0,0,b); //Só informações de Azul

//Adição e Subtração e Cores imgC.pixels[pos] = color(r,0,b); //Magenta imgM.pixels[pos] = color(r,g,0); //Amarelo imgY.pixels[pos] = color(0,g,b); //Ciano imgGray.pixels[pos] = color((r+g+b)/3,(r+g+b)/3,(r+g+b)/3); //Cinza imgHumanGray.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); //Cinza Humano imgIn.pixels[pos] = color(255-r,255-g,255-b); //Negativo

imgMaisBrilho.pixels[pos] = color (r+30,g+30,b+30); //+Brilho imgMenosBrilho.pixels[pos] = color(r-30,g-30,b-30); //-Brilho } } }

//desenhando as imagens geradas void draw(){ image(imgOriginal,0,0); image(imgR,220,0); image(imgG,440,0); image(imgB,660,0); image(imgC,0,165); image(imgM,220,165); image(imgY,440,165); image(imgGray,660,165); image(imgHumanGray,0,330); image(imgIn,220,330); image(imgMaisBrilho,440,330); image(imgMenosBrilho,660,330); }

Imagem original:

[matematila]

Apostila Sistema de TV Digital 1.pdf

Shared with Dropbox

Essa é uma apostila usada por mim quando ainda era aluno no IFCE para a Disciplina de TV Digital. 

Mas por que cargas d'agua ela está sendo postada aqui?

O estudo de sistemas de projeção de imagens como cinema e televisão, por exemplo, não deve prescindir dos conhecimentos do funcionamento do olho humano que é parte integrante de qualquer sistema de imagens. O olho humano, por sua vez, faz parte de um sistema complexo que inclui o nervo óptico e o córtex cerebral. O mecanismo de percepção da visão humana envolve alem dos aspectos físicos da conversão de imagens luminosas em impulsos elétricos que são interpretados pelo cérebro, em fatores de ordem psicológica, de interpretação e memorização, que ainda não são totalmente conhecidos pela ciência.

A partir desse post, os exercícios pedem esse conhecimento básico de como o olho funciona, quais são os esquemas de cores utilizados hoje em dia, como as cores são geradas por sistemas eletrônicos... e nessa apostila contém tudo isso. 

É um conhecimento elementar para qualquer designer ou profissional que manipule imagens.

[matematila]

Revisão I - Triangulos retângulos da origem para o cursor

eis o código:

void setup(){ size(400, 400); background(53,19,48); }

void draw(){ background(53,19,48); textSize(18); text("cmprimnto: ",20,30);

text (distanciaPP(width/2, height/2, mouseX, mouseY), 120, 30); strokeWeight(5); stroke(99,198,0); ellipse(width/2, height/2, 10, 10); line(width/2, height/2, mouseX, mouseY); ellipse(mouseX, mouseY, 10, 10); line(width/2, height/2, mouseX, height/2); ellipse(mouseX, height/2, 10, 10); line(mouseX, height/2, mouseX, mouseY); }

float distanciaO(int a, int b){ float distancia1 = sqrt(sq(a)+sq(b)); return distancia1; }

float distanciaPP(int a1, int b1, int a2, int b2){ int xis = a2-a1; int ipsilon = b2 - b1; float distancia2 = distanciaO(xis, ipsilon); return distancia2; }

[matematila]

Círculos aleatórios que mudam de cor no over - II

Nessa versão ainda há o armazenamento de valores x e y do centro da esfera para a reconstrução da mesma, sendo que agora quando o mouse sai de cima ele volta ao estado original ao invés de ficar sempre com uma nova cor.

float[] ellipse1 = new float [2]; float[] ellipse2 = new float [2]; float[] ellipse3 = new float [2]; float[] ellipse4 = new float [2];

void setup(){ size(600, 600); background(#f8db94); desenhaCirculos(); }

void draw(){ detectaCirculos(); }

void desenhaCirculos(){ ellipse1[0] = random(50, 550); ellipse1[1] = random(50, 550); ellipse2[0] = random(50, 550); ellipse2[1] = random(50, 550); ellipse3[0] = random(50, 550); ellipse3[1] = random(50, 550); ellipse4[0] = random(50, 550); ellipse4[1] = random(50, 550); fill(#00bbd6); noStroke(); ellipse( ellipse1[0], ellipse1[1], 50, 50); ellipse( ellipse2[0], ellipse2[1], 50, 50); ellipse( ellipse3[0], ellipse3[1], 50, 50); ellipse( ellipse4[0], ellipse4[1], 50, 50);

}

void detectaCirculos(){ if(distanciaPP(ellipse1[0], ellipse1[1], mouseX, mouseY)<=50){ fill(#ec008b); ellipse( ellipse1[0], ellipse1[1], 50, 50); }else{ fill(#00bbd6); ellipse( ellipse1[0], ellipse1[1], 50, 50); } if(distanciaPP(ellipse2[0], ellipse2[1], mouseX, mouseY)<=50){ fill(#ec008b); ellipse( ellipse2[0], ellipse2[1], 50, 50); }else{ fill(#00bbd6); ellipse( ellipse2[0], ellipse2[1], 50, 50); } if(distanciaPP(ellipse3[0], ellipse3[1], mouseX, mouseY)<=50){ fill(#ec008b); ellipse( ellipse3[0], ellipse3[1], 50, 50); }else{ fill(#00bbd6); ellipse( ellipse3[0], ellipse3[1], 50, 50); } if(distanciaPP(ellipse4[0], ellipse4[1], mouseX, mouseY)<=50){ fill(#ec008b); ellipse( ellipse4[0], ellipse4[1], 50, 50); }else{ fill(#00bbd6); ellipse( ellipse4[0], ellipse4[1], 50, 50); } }

float distanciaPP(float a1, float b1, float a2, float b2){ float xis = a2-a1; float ipsilon = b2 - b1; float distancia2 = distanciaO(xis, ipsilon); return distancia2; }

float distanciaO(float a, float b){ float distancia1 = sqrt(sq(a)+sq(b)); return distancia1; }

[matematila]

Círculos aleatórios que mudam de cor no over - I

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

Essa primeira versão do código faz com que gere círculos aleatórios na tela, armazene os valores de x e y em um vetor que eu possa recuperar depois para redesenhar o circulo, mas o diferencial mesmo é que enquanto o mouse fica sobre o circulo a cor dele muda até sair do over.

Eis o codigo: float[] ellipse1 = new float [2]; float[] ellipse2 = new float [2]; float[] ellipse3 = new float [2]; float[] ellipse4 = new float [2];

void setup(){ size(600, 600); background(#f8db94); desenhaCirculos(); }

void draw(){ detectaCirculos(); }

void desenhaCirculos(){ ellipse1[0] = random(50, 550); ellipse1[1] = random(50, 550); ellipse2[0] = random(50, 550); ellipse2[1] = random(50, 550); ellipse3[0] = random(50, 550); ellipse3[1] = random(50, 550); ellipse4[0] = random(50, 550); ellipse4[1] = random(50, 550); fill(#00bbd6); noStroke(); ellipse( ellipse1[0], ellipse1[1], 50, 50); ellipse( ellipse2[0], ellipse2[1], 50, 50); ellipse( ellipse3[0], ellipse3[1], 50, 50); ellipse( ellipse4[0], ellipse4[1], 50, 50);

}

void detectaCirculos(){ if(distanciaPP(ellipse1[0], ellipse1[1], mouseX, mouseY)<=50){ fill(random(255), random(255), random(255)); ellipse( ellipse1[0], ellipse1[1], 50, 50); } if(distanciaPP(ellipse2[0], ellipse2[1], mouseX, mouseY)<=50){ fill(random(255), random(255), random(255)); ellipse( ellipse2[0], ellipse2[1], 50, 50); } if(distanciaPP(ellipse3[0], ellipse3[1], mouseX, mouseY)<=50){ fill(random(255), random(255), random(255)); ellipse( ellipse3[0], ellipse3[1], 50, 50); } if(distanciaPP(ellipse4[0], ellipse4[1], mouseX, mouseY)<=50){ fill(random(255), random(255), random(255)); ellipse( ellipse4[0], ellipse4[1], 50, 50); } }

float distanciaPP(float a1, float b1, float a2, float b2){ float xis = a2-a1; float ipsilon = b2 - b1; float distancia2 = distanciaO(xis, ipsilon); return distancia2; }

float distanciaO(float a, float b){ float distancia1 = sqrt(sq(a)+sq(b)); return distancia1; }

[matematila]

Ying Yang

Essa não foi a maneira mais elegante de se fazer um código, mas cheguei no resultado esperado. Creio que dá pra ser otimizado com laços de repetição, tentei fazer com vetor mas aí acabou complicando muito e decido deixar assim na versão "trabalho braçal".

Eis o código:

int raio = 200; int x = width/2; int y = height/2;

//a ideia aqui é executar somente uma vez, por isso a função é chamada no setup

void setup(){ size(400, 400); background(#885780); noStroke(); YngYang(200, 200, raio); }

void draw(){ }

//o esquema é basicamente a criação de arcos, semi-círculos e esferas cujos tamanhos se relacionam proporcionalmente

void YngYang(int x1, int y1, int r){ fill(0); arc(x1, y1, r, r, 0, PI, CHORD); fill(255); arc(x1, y1, r, r, PI, 2*PI, CHORD); fill (0); arc(x1-r/4, y1, r/2, r/2, PI, 2*PI, CHORD); fill(255); arc(x1+r/4, y1, r/2, r/2, 0, PI, OPEN); fill(255); ellipse(x1-r/4, y1, r/8, r/8); fill(0); ellipse(x1+r/4, y1, r/8, r/8); }

[matematila]

Le Harmonógrafo - Bônus

Depois de vocês terem acompanhado o processo de criação do harmonógrafo nos três posts anteriores, eis aqui uma versão modificada. A lógica é a mesma mas agora as variáveis estão com nomes que podem ajudar a compreender o que de fato está em jogo e é possível ser modificado e também tentar fazer mais sentido o porquê de quando se altera determinado valor mesmo que mínimo o resultado é completamente diferente.

float angulopuro=radians(45);  ///converte graus para radianos float ar2=angulopuro; //variável de angulo que será alterada float ar3=angulopuro; //variável de angulo que será alterada float m=100; //varia o eixo da oscilação em função de seno ou cosseno float m2; //varia o eixo da oscilação em função de seno ou cosseno float c=1; //contador responsável por decrementar e fazer o pendulo perder a força int diametro = 2; float x, y; float enlouquecendo = 100; //ela tem como função reduzir o tamanho mas...como ela é usada na multiplicaçao, mudar seu valor muda tambem a forma do desenho float deualoca = 0.01; //tem q ser menor que 0.1 para conseguir um efeito bacana float piroudevez = 0.01; //tem q ser menor que 0.1 para conseguir um efeito bacana

void setup(){ size (600,600); background (68,30,53); } void draw(){ x = sin(angulopuro)*(m2*c)+300+(cos(angulopuro)*enlouquecendo*c); y = sin(angulopuro)*(m*c)+300+(sin(angulopuro)*enlouquecendo*c); fill(255,35,107); noStroke(); ellipse( x, y, diametro, diametro); angulopuro = angulopuro + 0.05; // quantidade de bolinhas que sao desenhadas m=sin(ar2)*100; ar2=ar2+deualoca; //maneira de incrementar o angulo para variar a posição do desenho das linhas e não ficar sempre no mesmo trajeto m2=cos(ar3)*100; ar3=ar3+piroudevez; //maneira de incrementar o angulo para variar a posição do desenho das linhas e não ficar sempre no mesmo trajeto if(c>0){ c=c-0.0001; //quantidade de voltas ou linhas } else{ c=0; }

}

mudando as variáveis você consegue efeitos como esses abaixo: