removing an image once it's drawn?

brig

Hi there. P5 newbie here. Am trying to place an image and then remove it later (on user input). I can place it just fine,

image(myimages[imgselected], 0, 0);

But then, don't seem to be able to remove it. Don't see a remove image function available. And when I try to just move it offscreen, it seems to make a copy of it at the new location. Ie:

image(myimages[imgselected], -1000, -1000);

Just makes a copy of the image at -1000,-1000 and leaves the original in-tact at 0,0.

I have noLoop() turned on, in case this is an issue with not hitting the draw loop?

thx for any pointers.

TfGuy44

You should have a boolean that tracks if the image should be viewed or not. When it is false, just don't draw the image. Then, on user input, you can set that boolean to false, and then call loop() to have draw() re-render your sketch again. You can have a noLoop() call at the end of draw() too, if you only want draw() to run once when loop() is called.

GoToLoop

• Images, like anything else, aren't stickers that we can place and then remove w/o any trace.
• Like a painter's canvas, once something is painted on it, it can't be easily removed afterwards.
• We need to erase the canvas w/ background() and redraw anything we need.
• While leaving out what we want "erased" from it.

GoToLoop

However, since you're using p5js framework, it offers createImg(), which we can freely show() and hide(), plus set the position() of it too! Or we can outright remove() it as well: :D

1. http://p5js.org/reference/#/p5/createImg
2. http://p5js.org/reference/#/p5.Element/show
3. http://p5js.org/reference/#/p5.Element/hide
4. http://p5js.org/reference/#/p5.Element/position
5. http://p5js.org/reference/#/p5.Element/remove

PhiLho

As said. In Processing in general, in most sketches, you erase the whole image with background() and redraw everything. So if you call image() elsewhere, it will be no longer at the previous location.
If, for some reason, you cannot do that, you can still erase the image by drawing a rectangle of the color of the background where the image was.

brig

Thanks so much. Very helpful answers. Got it now.