"erasing" effect from one image to another.

Programming Questions

qwermqwerm

"erasing" effect from one image to another.

in Programming Questions • 3 years ago

Hi!
So im trying to create an erasing effect on an image. I am using a small square box to 'erase' one image, and in its place, have the other image exposed. The best way i can describe it to you is like this website did, (click somewhere and drag to expose the image.) http://anotherversionofthetruth.com/ Thats what i am trying to do, but i am unsure how. I have loaded the initial image into the void setup, and the second image into the void draw.
Any assistance is much appeciated!

Replies(6)

yelele_br..

Re: "erasing" effect from one image to another.

3 years ago

Use something like this in your draw method (the two image have to fit screen size and having the same size) :

if(mousePressed)
copy(image2,
constrain(mouseX-SQUARE_WIDTH/2,0,width),
constrain(mouseY-SQUARE_HEIGHT/2,0,height),
SQUARE_WIDTH,SQUARE_HEIGHT,
constrain(mouseX-SQUARE_WIDTH/2,0,width),
constrain(mouseY-SQUARE_HEIGHT/2,0,height),
SQUARE_WIDTH,SQUARE_HEIGHT);

qwermqwerm

Re: Re: "erasing" effect from one image to another.

3 years ago

i dont know if this would work with a mousePressed function... its more like, painting over the other image. the problem im running into is that the second image is compressed into the small 20,20 pixel square, which isnt what i want, you know??
would this work with a mousePressed?

qwermqwerm

Re: Re: "erasing" effect from one image to another.

3 years ago

hey! i was wondering if you could help me a little with this code again! lol!
is it possible to turn the contrained areas that is copied into a whole bunch of smaller squares/ellipses? im after the spray paint effect like in MS Paint, but im unsure how to do this. An array is the first thing that comes to mind... so within the constrain funtion, i would have it copy lets say... 10 2px by 2px squares within the initial constrain of 20px. Would that work?
Thanks a bunch!!

blindfish

Re: "erasing" effect from one image to another.

3 years ago

You should perhaps explain that you need to click and drag on that page to see the effect; otherwise it looks like you're spamming us with U.S. propaganda ;)

Have you checked out the PImage documentation? There are several possible approaches to this: e.g. directly affecting the alpha property of the top image using the pixels[] array or perhaps using mask() where a separate image buffer is drawn and acts as the mask... It might take some figuring out, but certainly do-able.

But first things first: don't load image in draw; that's very inefficient and rarely (if ever) necessary. Load both images in setup: they'll be layered as you display them in draw with the last image() call being the top image.

yelele_br..

Re: "erasing" effect from one image to another.

3 years ago

This code do exactly what you show us in your example (put "glow1.png" and "glow2.png" in you data sketch folder) :

public static int SQUARE_WIDTH = 20;
public static int SQUARE_HEIGHT = 20;
PImage img1,img2;
void setup() {
size(256,256);
img1 = loadImage("glow1.png");
img2 = loadImage("glow2.png");
image(img1,0,0);
}
void draw() {
if(mousePressed)
      copy(img2,
              constrain(mouseX-SQUARE_WIDTH/2,0,width),
              constrain(mouseY-SQUARE_HEIGHT/2,0,height),
              SQUARE_WIDTH,SQUARE_HEIGHT,
              constrain(mouseX-SQUARE_WIDTH/2,0,width),
              constrain(mouseY-SQUARE_HEIGHT/2,0,height),
              SQUARE_WIDTH,SQUARE_HEIGHT);
}

qwermqwerm

Re: Re: "erasing" effect from one image to another.

3 years ago

WOW! thats exactly it!! thank you sooo much! im going to work with that and manipulate it so does a bit more, but thank you so much for the help! I was researching a ton trying to get it to work. Thanks a bunch!

Top Reply