O Processing possibilita o carregamento e manipulação de imagens digitais. Com o uso de um tipo especial de variável (PImage) , podemos armazenar uma série de informações contidas nos arquivos  dos tipos JPEG, PNG ou GIF. Assim como no trabalho com tipografia visto no  tópico anterior, devemos dispor estes arquivos na pasta “data”,  que por sua vez  está  localizada dentro da  pasta reservada para o sketch atual.

Para o import  da imagem, basta arrastar o  arquivo escolhifo (jpg, png ou gif) para a áread a janela de  edição de texto no Processing. Desta forma, o sistema automaticamente  incluirá a imagem no sketch.

Um outro método é selecionar a opção “Add File” no menu do Processing, navegar para a localização da imagem e selecioná-la clicando em “Open”.  Posteriormente, verifique se a imagem foi corretamente adicionada ao sketch pressionando CTRL+K e certififique-se que o  arquivo está salvo na pasta “data”.

 

Uma vez armazenada,  a imagem pode ser carregada numa variável. O  código seguinte carrega a imagem contida no arquivo figura.png , exibindo-a na coordenada (0,0) do display.

 

PImage img;
img= loadImage(“figura.png”);
image (img,0,0);

 

Verificamos na primeira linha a declaração da variável img  do tipo PImage . Esta variável foi criada para guardar uma imagem carregada pela função loadImage( ). Note que o nome do arquivo escolhido deve estar entre aspas: “figura.png”. Finalmente a imagem é exibida na tela pela função image(). Os parâmetros usados por essa função são o  nome da variável que armazena a imagem (img) e a posição (coordenadas) na tela.

Uma vez carregada a imagem também pode ser redimensionada pela função image(). Por exemplo, essa  imagem capturada por Ayako Akamine foi digitalizada e exportada no formato JPEG  e redimensionada para 640 pixels de largura e 480 de altura.

 

loadImage

Imagem original - "Carpas" - Ayako Akamine


Este é o  código para importar a imagem no Processing:

size (640,480);
background(0);
PImage img;
img=loadImage(“carpas.jpg”);
image (img, 0,0);

 

Podemos reutilizar a variável img e redimensionar a imagem novamente com a função image():

size (640,480);
background(0);
noStroke();
smooth();
PImage img;
img=loadImage(“carpas.jpg”);
image (img,0,0);
fill(229,0,0,200);
ellipse(320,240,300,300);
image (img, 220,140,200,200);

Alteramos o código acrescentando a figura de um círculo vermelho desenhado no centro da tela (320,240). A função image (img,240,140,200,200) mostra a mesma imagem  armazenada em img, porém agora ela está localizada na coordenada (220,140) e seu novo tamanho em pixels é 200×200 (altura e largura). Portanto os parâmetros para image( ) também podem ser:

 

image (x,y,largura,altura);

 

E este é o  resultado da alteração:

 

 

 

Colorindo
As imagens podem ser tingidas com uma cor especificada da mesma maneira como usamos a função fill(). Neste caso,  utilizamos a função tint() para colorir a imagem, alterada  pelos parâmetros  cinza, rgb e   transparência.

Neste exemplo, a imagem da fotógrafa  Lygia Nery foi repetida três vezes. As imagens laterais foram redimensionadas com a função image() e coloridas com tint().

size (640,426);
background(0);
PImage img;
img=loadImage(“pessoa.jpg”);
image (img,0,0);
tint(74,203,79);
image (img,490,0,150,213);
tint(196,49,49);
image (img,490,213,150,213);

 

tint()

Montagem digital - imagem original: "A sombra de Pessoa" - Lygia Nery

 

Também podemos conseguir efeitos interessantes com a manipulação da transparência . Observe esta imagem original  do fotógrafo Rogério Simões:

 

tint()

Imagem original - "Simples" - Rogério Simões

 

Vamos modificá-la  , sobrepondo  várias cópias da mesma imagem e  alterando apenas o posicionamento e opacidade.

 

tint()

 

Para preservar a coloração original e variar a transparência, basta  manter a coloração com a cor branca e variar o parâmetro da opacidade . Veja o código utilizado:

size (500,334);
background(0);
PImage img;
img=loadImage(“simples.jpg”);
image (img,0,0);
tint(255,120);
image (img,0,20);
image (img,0,80);

 

Aqui  usamos tint(255,120) antes de mostrar as duas cópias deslocadas. O fundo cinza da imagem original contribui para o efeito suave de transição entre as camadas.

Veja esta outra alteração:

 

tint()

 

A segunda imagem foi colorida  com opacidade alterada pelo código tint(79,160,224,200). Note que o efeito gráfico de “pixelização” foi dado pelo redimensionamento da imagem: o código image (img,0,-20,1000,600) expandiu a largura e altura originais da imagem para fora dos limites estipulados em size (500,334). Desta forma, foi preciso o reposicionamento da figura, alterando a posição y da imagem para fora do sketch (y vale  -20).

size (500,334);
background(0);
PImage img;
img=loadImage(“simples.jpg”);
image (img,0,0);
tint(79,160,224,200);
image (img,0,-20,1000,600);

 

Em outro tópico, vamos explorar as possibilidades de alterações da própria estrutura da imagem.

Tagged with: