Link to sketch: LINK
I’ll likely keep iterating upon this “pet the fish” scene as I continue to gain new skills and knowledge of different interactive components. This time, I wanted to try out the fish and hand with rasterized images. I used preload() and image() to import and place the images.
Next, I used a class constructor to make the clouds interaction organization more efficient. Instead of having a standalone series of moving ellipses. Each cloud had its own properties and placement. The x, y, w, h are self-explanatory, but ppf stands for pixels per frame (indicating a different movement speed for each. Whenever, createNewCloud() is called, it generates properties within a set range and pushes a new cloud into the clouds array stack. I separated these into two different functions so it would be easier to change the range of cloud sizes and positions without having to change the Cloud constructor / class itself.
I created an array of clouds (clouds[]) which is set to always have ~10 clouds. In the setup(), a for loop will push 10 clouds into the array and then within the draw() function, a for loop will parse through the clouds[]. This was the most challenging part of the code to work through so far. I wanted to make it so that if the cloud has fully passed the screen, it removed itself from the array. At first, I put clouds.length-1 within the for loop, but it kept generating way too many clouds. I think it’s because clouds.length was continually being updated as I added/removed from the array. Once I took that calculation out to be done before going into the loop, it solved my issue.
Lastly, I added a click counter to game-ify the interaction. I want to keep working on the visuals for this, for sure. This project is still yet to be fully realized. I want to bring back the petting fish mechanism / interaction again, but I was only able to complete the clouds so far.