Code Test: Removing Images [p5.js]

This piece of p5.js code is to test removing images from an array after a click event has occurred. I wrote this to help me understand how arrays and removal of objects in the array works.

This was a stepping stone towards completing Project Magic School Bus.

Goal:

Create an array of images, then when the mouse is clicked, remove each item from the array one-by-one. Once there are none left, display an alert indicating so.

Methods:

preload(), image(), splice(), mouseClicked()

Steps:

1. Setup the image files.
2. Preload the images.
3. Create the click event.
4. Alert when there are no images left.

Step 1. Setup the image files.

Before beginning the code, the first thing I did was setup my image files the same so I did not need to worry about modifying their looks after they were loaded into the webpage.

I grabbed these images from google and modified them in Adobe Illustrator 2019 using Image Trace and Expand. Then, I named each image with the same leading string, “smell”, then appended a number, starting from 0.

Starting my images from 0 is important because of how an array accesses itself. The first position is denoted as “0”. And, because I am creating a for loop to access the image files and placing then into the array, I need to start my access number at “0” to match the array position.

Here are the images I’m working with:

Step 1. smelly objects; filenames are “smell#.png” with “#” a number from 0–6.

Step 2. Preload the images.

To quickly preload the images, I need to use the preload() function to add the images to the code file. Using a simple for loop, I index through all my images (see caption of Step 1 for details on filename).

let images = [];
function preload() {
  for (var i=0;i<7;i++){
    images[i] = loadImage("smell"+i+".png");
  }
}

Step 3. Draw the images.

In order to have images to remove, I need to place the images on the screen. I will accomplish this using the setup() function, not the draw() function.

In a similar fashion as when I loaded the images, I use a for loop to create the image on my canvas.

function setup() {
  createCanvas(windowWidth,windowHeight);
  for (var i=0;i<images.length;i++){
    image(images[i],x,100,images[i].width,images[i].height)
    x+=300
  }
}

Output:

Step 3. Draw the images.

Step 4. Create the click event.

Using the mouseClicked() function in p5.js, I thought about what this needed to accomplish. First, I needed the images to show up when the mouse was clicked. For this, I made each image draw next to the one before it. To change the image position, I stored my x-position value into the variable, “x”. Then, I needed to remove one of the images from the image array. Finally, I needed to redraw this new array on the canvas.

function mouseClicked(){
  if(clicking===false){
    console.log("clicked")
    clear();
    x = 100;
    images.splice(0,1)
    for (var i=0;i<images.length;i++){
      image(images[i],x,100,images[i].width,images[i].height)
      x+=300
    }
    console.log(images.length)
  }
}

Step 4. Create the click event.

Step 5. Alert when there are no images left.

To set up an alert when there are no images left, the check will occur in the draw() function. I will check if the length of the images array is 0. Then, create an alert when it is true.

For this I must use “==” or “===”. Otherwise the code will break.

function draw() {
  if(images.length===0){      // must be === to compare or ==
    alert("no more images")
    noLoop();
  }
}

Output:

Step 5. Alert when there are no images left.

Great! Everything’s working!

Lessons Learned

I had to think about where each of my actions would need to occur, such as within draw() or setup().

Thanks for reading! Please leave a comment that you think might help me improve my skills. Maybe something new I could try. I’d love to give it a shot.

Follow me on LinkedIn.