ICM Week 6

This week I worked with DOM library within p5. I was able to work with ready-made sliders, buttons, and more. Armed with these tools, I made a website where you can view gifs on a sliding scale from cat to dog. A screenshot of the initial page is below. View and interact with the website here.

My original intent ended up being pretty close to the final result. It could still use some refinement, but I'd say it's close.

To start the process, I initially set up this file structure and used the preload() function to get the images in an array.

This didn't really allow me to use the images and select DOM elements like I wanted to, so I decided to create an array of the file paths instead.

I had an issue displaying the gifs where the "createImg" function in p5 would keep creating new images every time I clicked the GO! button I made. I knew I needed to use the remove() function to get rid of the images. My solution works by deleting any gifs when the button is clicked, and then creating the new image when the button is released. A note - this is not the full code below, just the code that pertains to making the gifs.

Finally, my last struggle was placing all the components in the right spot. I did this mostly through the CSS file and used a lot of the info on positioning from this W3 Schools guide and a lot of Googling through stackoverflow.com. In case you were wondering how to position something off-center, I recommend this solution.