Remove() and images

p5.js Beginners
1

I have a misunderstanding about images and ‘removing’ them.
The remove() function in p5.js

Removes a Graphics object from the page and frees any resources associated with it.

and one of the examples is:

let bg;
function setup() {
  bg = createCanvas(100, 100);
  bg.background(0);
  image(bg, 0, 0);
  bg.remove();
}

But this little fragment does not work:

let at;

function preload() {
  at = loadImage("./assets/img.jpg");
}

function setup() {
  createCanvas(400, 400);
  image(at, 0, 0);
}

function draw() {
  at.remove();
  noLoop();
}

fails with:

Uncaught TypeError: at.remove is not a function

loadImage returns at p5.Image, but that does not have a remove() method (hence my error).

So the bg object in the first bit of code (which can be used as an argument to image) is clearly a very different beast from the at object in my code.

What is the difference?

I can hide/show a div to get the effect I want, but I’m still interested in the clearing up my lack of understanding!

Thanks in advance!

2

On your 1st example, remove() is a method from class p5.Element.

However on your 2nd example, you’re attempting to invoke remove() on a p5.Image object, which strangely doesn’t have 1.

BtW, once something is drawn on a canvas invoking remove() won’t remove it from that canvas. Use background() instead.

2 Likes
3

Ah yes - that makes sense. Thanks for taking the time to answer.