Changing Planets

This week, we learned about DOM, HTML and CSS. For my sketch, I played around with images. I tried to make it so that each time the user clicked on a planet, it would change (there were 4 different planets in total). It works, but I don’t really know why sometimes it doesn’t always register the click or sometimes you have to click the planet twice before it changes. The code was adapted from Shiffman’s Coding Train videos.

I added a background image in CSS and had it repeat continuously to fit the screen. I had some trouble figuring out how to make it so that the background image I set up in CSS could be called in the draw function so that I could have the planets move against the image without it having that weird multiple effect. I ended up just using a back background for the planets. I’m going to have to keep working on that part.

Lastly, I added some heading and paragraph text on the HTML. For some reason, my sketch doesn’t show up fullscreen (only the background shows up, but not the planets), but it works perfectly fine in p5.js. I don’t know why that is. 

The sketch can be found here.

 

Update: Now my sketch doesn’t work in the p5.js editor and I cannot figure out why. I have been error checking it but cannot figure out what is wrong because I get no error messages running the code…