How to make an image disappear by assigning 'undefined' to an array entry without affecting other entries?

Question

I'm having problems making an image disappear after clicking on it by assigning 'undefined' to that array entry, but I don't know how to keep rewriting the other objects while letting the draw function of p5.js extension run through the undefined entry.

function preload()
{
  images[0] = loadImage("W5 T1 p1.png");
  images[1] = loadImage("W5 T1 p2.png");
  images[2] = loadImage("W5 T1 p3.png");
  images[3] = loadImage("W5 T1 p4.png");
}

function draw() {
  ...
if (mouseIsPressed == true && carX[i] <= mouseX && mouseX <= carX[i] + 432/4 && carY[i] <= mouseY && mouseY <= carY[i] + 128/4)
        {
          images[i] = undefined;
          images.length--;
        }
}

(just don't care too much about the other variables involved) // by running this code, i can delete the images one by one, but they have to be in the exact order of images[3],..., images[0], any difference would cause the program to run into an error.

Where do you draw the images? The entire scene is redrawn in every frame (`draw()` is executed continuously). To make an image disappear, just don't draw it any more. — Rabbid76, Dec 26 '22 at 10:13

Rabbid76 · Accepted Answer · 2022-12-26T10:32:02.740

Do not decrement images.length, but test that the image is not undefined before drawing it:

function draw() {

    // [...]

    for (let i = 0; i < images.length; ++i) {
        if (images[i]) {
            image(images[i], carX[i], carY[i]);
        }
    }

    // [...]
}

Alternatively do not remove the last element from the array, but remove the selected image (see How can I remove a specific item from an array?):

function draw() {
    // [...]

    if (mouseIsPressed == true && carX[i] <= mouseX && mouseX <= carX[i] + 432/4 && carY[i] <= mouseY && mouseY <= carY[i] + 128/4) {
          images.splice(i, 1);
    }
}

How to make an image disappear by assigning 'undefined' to an array entry without affecting other entries?

1 Answers1