Invert and Masking Image on Processing

I'm still doing multimedia homework with processing. Now, my homework about how to invert image color and creating a masking. So, i've joined invert and masking the image, and the result was invert the image above ellipse.

I've added mouse function on this project, so the ellipse with invert image will be following your mouse. You just need import three variable, they are two PImg and one PGraphics. If you can't imagine what i've talking about. You can see image bellow. My project is like this.

sample project

Before we write the code, i suggest you to import the image first with clicking sketch > Add file > Browse and select the image. REMEMBER the name of our image. It's case sensitive. Let start write the code.

First, create two PImage and one PGraphics variable. PImage for save the image and PGraphics for creating graphic like ellipse for creating ellipse.
PImage img;
PImage img2;

Second, create the void setup and load one image twice. First image for original image, and second image for invert image. Don't forget to create pg varible for creating a shape like ellipse. And the code  look like this
img = loadImage("gbr_01.jpg");
img2 = loadImage("gbr_01.jpg");
pg= createGraphics(640, 480, P2D)

Third, give second image variable INVERT function and set the window height and with same with our image. So the code look like this

img2.filter(INVERT);
size(img.width, img.height);

Fourth, Create the void draw and set the background with img variable.

background(img);

Fifth, create an ellipse with size 100 x 100 and that ellipse following your mouse for masking.

pg.beginDraw();
pg.background(0); 
pg.ellipse(mouseX, mouseY, 100, 100); 
pg.endDraw();

Sixth, mask the image and  show the image

img2.mask(pg);
image(img2,0,0);

And then this is final code for this project.

PImage img;
PImage img2;
PGraphics pg;

void setup(){
 img = loadImage("gbr_01.jpg");
 img2 = loadImage("gbr_01.jpg");
 pg = createGraphics(640, 480, P2D);
 img2.filter(INVERT);
 size(img.width, img.height);
}

void draw(){
  background(img);
  pg.beginDraw();
  pg.background(0); 
  pg.ellipse(mouseX, mouseY, 100, 100); 
  pg.endDraw();
  img2.mask(pg);
  image(img2,0,0);

}

I hope you can enjoy with my explanation. So, this tutorial can be usefull.

2 Responses to "Invert and Masking Image on Processing"