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:
- Setup the image files.
- Preload the images.
- Create the click event.
- 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 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 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 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:
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.