Invert and Masking Image on Processing
9:54 PM
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
Fourth, Create the void draw and set the background with img variable.
Fifth, create an ellipse with size 100 x 100 and that ellipse following your mouse for masking.
Sixth, mask the image and show the image
And then this is final code for this project.
I hope you can enjoy with my explanation. So, this tutorial can be usefull.
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 comments
thank you so much! it really helped me alot:)
ReplyDeleteYou are welcome :)
ReplyDelete