Processing - Imagem 1. Processing. Imagem (PImage) Jorge Cardoso

Transcrição

1 Processing - Imagem 1 Processing Imagem (PImage)

2 Processing - Imagem 2 Classe PImage Imagem Utilizada para guardar e manipular imagens em memória

3 Processing - Imagem 3 Ficheiros de Imagem Os ficheiros de imagem devem ser colocados na pasta data dentro da pasta do projecto Processing loadimage(nomeficheiro) carrega um ficheiro de imagem da pasta data JPEG PNG GIF TIF image(img, x, y) desenha uma imagem na janela

4 Processing - Imagem 4 Exemplo #1 - PImage Utilização mais comun // declarar a variavel que vai guardar a imagem PImage imagem; void setup() { size(600, 600); //carrega um ficheiro de imagem e constroi o objecto do tipo PImage imagem = loadimage("systemerror.jpg"); void draw() { // Desenha uma imagem nas coordenadas dadas image(imagem, 0, 0);

5 Processing - Imagem 5 Modificar o tamanho image(img, x, y, width, height) desenha uma imagem nas coordenadas e com a dimensão especificada

6 Processing - Imagem 6 Exemplo_2 // declarar a variavel que vai guardar a imagem PImage imagem; void setup() { size(600, 600); //carrega um ficheiro de imagem e constroi o objecto do tipo PImage imagem = loadimage("systemerror.jpg"); void draw() { background(0); // Desenha uma imagem na posicao 0,0 e com largura e altura igual // 'a posicao do rato. image(imagem, 0, 0, mousex, mousey);

7 Processing - Imagem 7 Exercício #1 Modificar o Exemplo #2 de forma a que a imagem (não a dimensão) siga o ponteiro do rato.

8 Processing - Imagem 8 Imagens com transparência tint(gray) tint(gray, alpha) tint(value1, value2, value3) tint(value1, value2, value3, alpha) notint()

9 Processing - Imagem 9 Exemplo_3 // declarar a variavel que vai guardar a imagem PImage imagem; void draw() { background(0); void setup() { size(600, 600); //carrega um ficheiro de imagem e constroi o objecto do tipo PImage imagem = loadimage("systemerror.jpg"); // a transparencia varia com a posicao do rato tint(255, mousex/2); // Desenha uma imagem na posicao 0,0 image(imagem, 0, 0, 300, 300); tint(mousex/2, 255, 255, 255); // Desenha uma imagem na posicao 300,0 image(imagem, 300, 0, 300, 300); tint(255, mousex/2, 255, 255); // Desenha uma imagem na posicao 0,300 image(imagem, 0, 300, 300, 300); tint(255, 255, mousex/2, 255); // Desenha uma imagem na posicao 300,300 image(imagem, 300, 300, 300, 300);

10 Processing - Imagem 10 Exemplo_4 // declarar a variavel que vai guardar a imagem PImage imagem; void setup() { size(600, 600); //carrega um ficheiro de imagem e constroi o objecto do tipo PImage imagem = loadimage("systemerror.jpg"); void draw() { background(0); notint(); // Desenha uma imagem na posicao 300,0 image(imagem, 300, 0, 300, 300); fill(255, 0, 0, mousex/2); rect(300, 0, 300, 300);

11 Processing - Imagem 11 Exercício #2 Modificar o Exemplo #4 de forma a que A imagem ocupe o ecrã todo (redimensionar) O rectângulo seja um bocado mais pequeno e siga o ponteiro do rato

12 Processing - Imagem 12 Filtros Não directamente relacionados com PImage São aplicados a TUDO o que estiver desenhado na janela filter() THRESHOLD GRAY INVERT POSTERIZE BLUR OPAQUE

13 Processing - Imagem 13 Exemplo_5 // declarar a variavel que vai guardar a imagem PImage imagem; void setup() { size(600, 600); //carrega um ficheiro de imagem e constroi o objecto do tipo PImage imagem = loadimage("systemerror.jpg"); void draw() { background(0); // Desenha uma imagem na posicao 0,0 image(imagem, 0, 0, 300, 300); filter(blur, 6); // Desenha uma imagem na posicao 300,0 image(imagem, 300, 0, 300, 300); filter(invert); // Desenha uma imagem na posicao 0,300 image(imagem, 0, 300, 300, 300); filter(threshold); // Desenha uma imagem na posicao 300,300 image(imagem, 300, 300, 300, 300); filter(posterize, 4);

14 Processing - Imagem 14 blend() Misturar imagens Permite misturar partes de imagens Ou do ecrã com uma imagem Funciona como os blend modes do Photoshop (muito mais simplificado)

15 Processing - Imagem 15 Exemplo_6 // declarar a variavel que vai guardar a imagem PImage maq; PImage pes; void draw() { background(0); // Desenha a maquina original image(maq, 0, 0); void setup() { size(640, 480); // Desenha os pes original image(pes, 320, 0); //carrega um ficheiro de imagem e // constroi o objecto do tipo PImage maq = loadimage("systemerror.jpg"); pes = loadimage("feet.jpg"); // Desenha a maquina, que vai ser misturada, canto inferior esquerdo image(maq, 0, 240); blend(pes, 0, 0, 320, 200, 0, 240, 320, 240, ADD); // Desenha a maquina, que vai ser misturada, canto inferior direito image(maq, 320, 240); blend(pes, 0, 0, 320, 200, 320, 240, 320, 240, DARKEST);

16 Processing - Imagem 16 Exemplo_7 // declarar a variavel que vai guardar a imagem PImage maq; PImage pes; int x, y; int dx, dy; int mode; void draw() { background(0); // Desenha a maquina original image(maq, 0, 0, 640, 480); blend(pes, 0, 0, 320, 200, x, y, 320, 240, mode); void setup() { size(640, 480); x = 0; y = 0; dx = 1; dy = 2; mode = DARKEST; //carrega um ficheiro de imagem e constroi o objecto do tipo PImage maq = loadimage("systemerror.jpg"); pes = loadimage("feet.jpg"); x = x + dx; y = y + dy; if (x < 0 x > ) { dx = -dx; if (y < 0 y > ) { dy = -dy; void keypressed() { if (key == '1') { mode = SUBTRACT ; else if (key == '2') { mode = BLEND ; else if (key == '3') { mode = ADD ; else if (key == '4') { mode = DARKEST; else if (key == '5') { mode = LIGHTEST ;

17 Processing - Imagem 17 Exercício #3 Modificar o Exemplo #7 de forma a que a dimensão da imagem também aumente e diminua continuamente

18 Processing - Imagem 18 Desenhar uma Imagem Pixel a Pixel Propriedade pixels do objecto PImage Array de int com todos os pixels

19 Processing - Imagem 19 Imagem como Textura