Manipulando imagens em processing

Uma imagem digital é um conjunto de dados que indicam as variações de vermelho (Red), verde (Green) e azul (Blue) num determinado local em uma grade de pixels, podendo ser representado por uma matriz de cores RGB, onde esses dados podem variar de 0 a 255.

Com base nessas informações da matriz de cores, podemos fazer algumas manipulações na imagem, seja modificando as cores e aplicando filtros, entre tantas outras que conseguimos fazer no Photoshop e demais editores de imagem.

Para exemplificar, vamos fazer a separação de cores RGB da imagem e trocar os valores dos canais. O Red vai receber o valor de Blue, o Green de Red e o Blue o valor de Green.

Para fazermos a troca de cores, percorremos toda a matriz (x, y) da imagem, verificamos a cor do pixel separando-a em seus respectivos tons e após isso, duplicamos na imagem chamando a função color() passando as cores trocadas:

void trocaDeCanais(){
  for (int x = 0; x < img.width; x++ ) {
    for (int y = 0; y < img.height; y++ ) {
      int loc = x + y * img.width;
      color pix = img.pixels[loc];
      float r = red(pix);
      float g = green(pix);
      float b = blue(pix);
     
      result.pixels[loc] = color(g, b, r);
    }
  }
}

Neste outro exemplo, fazemos uma pixelização da imagem, onde novamente percorreremos toda a imagem e adicionaremos a mesma cor em um determinado número de pixel na imagem de reprodução.

void pixelar(){
  for (int x = 0; x < img.width; x += 20) {
    for (int y = 0; y < img.height; y ++) {
      int loc = x + y * img.width;
      color pix = img.pixels[loc];
   
      for (int i = loc; i < loc + 20; i++){
        result.pixels[i] = pix;
      }
    }
  }
}

Para visualizar o código completo, baixe aqui

Histogram de Áudio em Processing

Histograma é uma representação gráfica de uma distribuição de classes de frequência de alguma medição. Abordaremos aqui a representação de um histograma de áudio, onde o eixo x representa a amplitude da frequência de áudio e o eixo y, a quantidade de vezes que aquela frequência foi expressa no arquivo de um determinado áudio.

Em processing criamos a função histogram(float[] arrayAudio), onde ela recebe o array do arquivo de áudio. Após isso, cria-se um array auxiliar onde será armazenado a quantidade de vezes que uma determinada frequência é usada. Por tratar-se de uma amostra de elementos contínuo e que tende a um número muito elevado, a frequência será representada em inteiros, sendo este o próprio index do array.

Assim sendo, a função ficará descrita:

float[] histogram(float[] arrayIn) {
  float[] histog = new float[];

  for(int i = 0; i < arrayIn.length; i++) {
      for(int j = (int) arrayIn[i] * 10000; j >=0; j--){
        histog[j]++;
  }}
  return histog;
}

No exemplo de áudio, as frequências ficam sempre próximas a 0, em potência 10E-4, sendo assim, ajustamos o código para "dar um zoom" na frequência, onde [linha 5...] int j = (int) arrayIn[i] * 10000.

Código completo

Processing.org - Alô Mundo!

Olá galera, neste período estou estudando a disciplina de Multimídias do curso de Análise e Desenvolvimento de Sistemas do IFPI. Nela, abordaremos diversos temas relacionado ao uso da tecnologia no dia-dia focando principalmente na parte de processamento de sinais multimídias e computação gráfica, dentre outros projetos.
O objetivo em si é pensarmos em projetos "extra-programação", sair um pouco da frente do computador e desenvolver (ou estimular o desenvolvimento [de]) projetos que busquem facilitar o desempenho das atividades cotianas. Não significa que nos absteremos de programação, mas de mudar um pouco o ambiente e fazer algumas coisas bacanas que postarei aqui no blog.
Para começarmos, vou postar aqui minha primeira experiência com Processing
O que é o Processing?
É uma ferramenta de desenvolvimento de projetos gráficos, animações, interações, etc. Seu objetivo é de que mesmo pessoas sem experiência prévia em programação consigam desenvolver seus projetos, ou seja, possui uma linguagem de programação muito simples.

Primeiros passos... (em ambiente windows)
Para começar a desenvolver em processing, basta acessar o site www.processing.org, baixar o pacote e descompactar. Execute o arquivo processing.exe e... mãos à obra!!

Alô mundo!

void setup() {
 // define the window size & enable anti-aliasing
 size(200, 200);
 smooth();
 // Set "ink" color, font, and alignment for rendering text.
 fill(0);  // Black
 // setup the font (system default sans serif)
 textFont(createFont("SansSerif",18));
 textAlign(CENTER);
 noLoop();  // draw() only once
}
void draw() {
 // Draw text to screen using the previously set font.
 text("Olá mundo!", width/2, height/2);
}