Workshop Processing: Visualização de Dados e Interatividade

Transcrição

1 Workshop Processing: Visualização de Dados e Interatividade Imagens Claudio Esperança Programa de Engenharia de Sistemas e Computação COPPE / UFRJ Escola de Belas Artes Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

2 Sumário 1 Imagens Desenhando imagens Endereçamento de pixels Processamento de imagens Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

4 Imagens Digitais Imagens digitais são matrizes retangulares de pixels A profundidade de uma imagem está relacionada com a resolução no espaço de cores, isto é, quantos valores distintos cada pixel pode assumir: 1 bit Imagem binária (preto e branco) 8 bits 2 8 = 256 cores n bits 2 n cores Frequentemente o espaço de cores é organizado por componentes, por exemplo: 8 bits 256 tons de cinza 8 bits 256 cores quaisquer usando uma tabela de cores 24 bits 8 bits para cada componente R/G/B 32 bits 8 bits para cada componente R/G/B/Alfa Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

14 Arquivos de imagens Possuem um cabeçalho com as propriedades da imagem Tamanho em pixels (largura/altura) Tamanho para impressão (em unidades de comprimento) Profundidade (resolução do espaço de cores) Palavras-chave para catalogação Costumam utilizar compressão para reduzir o espaço para armazenamento Compressão sem perda: cada pixel original pode ser reproduzido exatamente (ex.: formato GIF para imagens de 1 a 8 bits) Compressão com perda: cada pixel é reproduzido aproximadamente Permite maiores taxas de compressão Ex.: formato JPG para imagens de 8/24 bits Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

24 Exibindo imagens com Processing Processing pode ler imagens digitais em vários formatos Para usar uma imagem: 1 Coloque o arquivo no subdiretório data da aplicação Use o comando Sketch > Add File a partir do menu principal do PDE 2 Declare um objeto do tipo PImage 3 Carregue o objeto com a imagem do arquivo usando a função loadimage(arquivo) Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

30 Exibindo imagens com Processing (cont.) Para desenhar uma imagem carregada no objeto PImage img use image(img,x,y) desenha img com o canto superior esquerdo em [x, y] image(img,x,y,w,h) desenha img com o canto superior esquerdo em [x, y] escalada para ocupar largura w e altura h A função imagemode() pode ser usada para alterar o significado dos argumentos da função image() Por exemplo, imagemode(center) faz com que os argumentos x e y refiram-se ao centro da imagem Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

35 Exibindo imagens - exemplo size(300,300); PImage img = loadimage("arvore.jpg"); image(img,0,0); nostroke(); rectmode(center); imagemode(center); rect(150,150,110,110); image(img,150,150,100,100); Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

36 Alterando o tom de imagens Usando a função tint() é possível alterar a cor global (tom) da imagem tint() pode receber argumentos de forma análoga a funções como fill() ou stroke(): tint(cinza) tint(cinza, alfa) tint(c 1, c 2, c 3 ) tint(c 1, c 2, c 3, alfa) tint(cor) Para cancelar o efeito do tint() use notint() Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

44 Alterando o tom de imagens - exemplo size(300,300); PImage img = loadimage("arvore.jpg"); colormode(hsb,9,100,100); for (int i = 0; i < 3; i++) { for (int j = 0; j < 3; j++) { tint (i*3+j, 100, 100); image(img, i*100, j*100, 100, 100); } } Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

46 Acessando pixels da tela É possível manipular a tela pixel a pixel A função get (x,y) retorna um objeto do tipo color na posição [x,y] da tela A função set (x,y,cor) substitui o pixel na posição [x,y] da tela por cor Essas funções são bastante eficientes Não são afetadas por transformações afim x e y são sempre coordenadas de tela em pixels Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

52 Acessando pixels da tela - exemplo size(300,300); PImage img = loadimage("arvore.jpg"); image (img, 0,0,150,150); for (int x = 0; x < 150; x++) { for (int y = 0; y < 150; y++) { color p = get(x,y); set (300-x,y,p); set (300-x,300-y, p); set (x,300-y,p); } } Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

53 Analisando cores Um objeto color pode ser decomposto em componentes usando as funções red(), green(), blue(), alpha(), hue(), saturation() e brightness() Por exemplo, red(color(100,120,90)) retorna 100 Um objeto color é essencialmente uma palavra de 32 bits sendo que cada 8 bits contém a componente A(alpha),R(red),G(green) e B(blue), respectivamente Uma maneira mais rápida de obter suas componentes é através de bit shifting Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

57 Analisando cores - exemplo size(300,300); PImage img = loadimage("arvore.jpg"); image (img, 0,0,150,150); for (int x = 0; x < 150; x++) { for (int y = 0; y < 150; y++) { color c = get(x,y); int b = c & 0xff; int g = (c >> 8) & 0xff; int r = (c >> 16) & 0xff; set (x+150,y,color(r,0,0)); set (x+150,y+150, color(0,g,0)); set (x,y+150, color(0,0,b)); } } Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

58 Acessando blocos de pixels get() e set() também podem ser usados para ler e escrever blocos retangulares de pixels: get() retorna uma PImage correspondente a toda a tela get(x,y,width,height) retorna uma PImage com os pixels da tela correspondente a um retângulo set(x,y,img) desenha a PImage img na posição x, y da tela Obs.: set() é mais rápido mas menos flexível que image() Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

63 Acessando blocos de pixels - exemplo size(300,300); smooth(); strokeweight (40); line(0, 0, width, height); line(0, height, width, 0); nostroke(); ellipse(width/4, height/2, 80, 80); for (int x = 0; x < width; x+=20) { PImage fatia = get(x,0,10, height); set (x+10,0, fatia); } Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

64 Acessando pixels numa imagem Todo objeto PImage dispõe dos campos: width largura em pixels height altura em pixels pixels[] array com width height pixels É possível acessar diretamente os pixels de uma imagem através do array pixels, mas é necessário 1 chamar o método loadpixels() antes de ler os valores do array 2 chamar o método updatepixels() após escrever os valores no array Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

71 Acessando pixels numa imagem - exemplo size(300,300); PImage img = loadimage("arvore.jpg"); int tam = (img.width*img.height); img. loadpixels(); for (int i=0; i < tam; i+=4) { img.pixels[i] = img.pixels[i+1] = 0; } img. updatepixels (); image(img, 0, 0); Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

73 Processamento de imagens Imagens digitais podem ser submetidas a algoritmos cujas finalidades incluem: Enfatizar ou atenuar bordas Alterar sua distribuição de cores Misturar elementos de outras imagens Simular meios convencionais como pintura aquarela ou a óleo O termo processamento de imagens refere-se ao estudo desses algoritmos Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

79 Filtragem O processo conhecido como filtragem é oriundo da disciplina de processamento de sinais e tem grande aplicação em imagens Um filtro consiste de um algoritmo que gera uma nova imagem aplicando uma função a cada pixel e sua vizinhança de uma imagem de origem Por exemplo, o filtro conhecido como "limiar"(threshold) analisa cada pixel de uma imagem e o substitui por um pixel preto ou branco conforme seja menor ou maior que um valor de intensidade (limiar) dado Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

82 Filtro de limiar - exemplo size(300,300); int limiar = 128; PImage img = loadimage("arvore.jpg"); int tam = (img.width*img.height); img. loadpixels(); for (int i=0; i < tam; i++) { if ( brightness(img.pixels[i])<limiar) { img.pixels[i] = color(0); } else { img.pixels[i] = color (255); } } img. updatepixels (); image(img, 0, 0); Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

83 A função filter() Vários filtros comuns podem ser aplicados diretamente sobre a tela usando a função filter() que tem duas assinaturas filter(modo) filter(modo,valor) onde modo pode ser THRESHOLD, GRAY, INVERT, POSTERIZE, BLUR, OPAQUE, ERODE, ou DILATE O parâmetro modo indica o algoritmo a ser aplicado O parâmetro valor é necessário apenas para alguns modos Para filtrar uma imagem ao invés da tela, pode-se usar o método filter() da classe PImage que tem os mesmos argumentos que a função filter() Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

89 Exemplos de filtragem ( original ) filter(threshold,0.5); filter(threshold,0.3); filter(blur,1); filter(blur,2); filter(blur,4); filter(posterize,2); filter(posterize,4); filter(gray); filter(invert); filter(dilate); filter(dilate); filter(dilate); filter(dilate); filter(erode); filter(erode); filter(erode); filter(erode); Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

101 Combinando imagens A combinação (ou mistura) de imagens consiste em operar pixel a pixel com duas imagens ou duas porções de uma mesma imagem a fim de obter uma imagem resultado A exemplo da operação de filtragem, pode ser feita por um programa usando as funções get() e set() Alternativamente, pode-se usar a função blend() que suporta as operações de mistura mais comuns A classe PImage também dispõe de um método chamado blend() que opera sobre a própria imagem ao invés da tela Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

105 A função blend() Há duas assinaturas: blend(x,y,wid,hgt,dx,dy,dwid,dhgt,mode); blend(src,x,y,wid,hgt,dx,dy,dwid,dhgt,mode); Os parâmetros x,y,wid,hgt designam o retângulo de origem Os parâmetros dx,dy,dwid,dhgt designam o retângulo de destino Se origem e destino têm tamanho diferente, os pixels da origem são escalados para cobrir adequadamente a área de destino src, se presente, é uma PImage contendo os pixels de origem mode é uma constante que designa a operação de mistura: BLEND, ADD, SUBTRACT, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, e BURN Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28

113 Exemplos de mistura Imagem origem Imagem destino ADD Claudio Esperança (PESC/COPPE/UFRJ) Processing / 28