For my third week in ICM, I created a rule-based animation that incorporates motion, interaction, and a user interface element.

The starting screen
Link to the sketch:
Link to the code:

My partner Zach and I created a comical interactive game. The opening screen is a red button with the title “Do NOT click the button.” Each time the button is clicked, one of 15 random scenarios occurs. The scenarios were created with conditionals that were each assigned an integer. I utilized a Boolean expression successfully in which every time the button is clicked, the state of the background changes. My partner and I had the most difficulty implementing our basic algorithm. Once we realized that each value for variable r may represent a different scenario with ==, however, we created the conditionals easily.

I envisioned a reset button, which returns the background to the original white state with text. In order to do so, I learned about the function resetSketch(). Interestingly, the reset button is on the outside of the canvas. Furthermore, we learned how to add images from outside sources to the sketch, which completely transformed our project. I added music to the button by downloading the file in p5.js. The commands loadSound () and loadImage () were very fun and easy to use.

Initially we imagined each scenario to have a separate background color, but Zach thought of the amazing idea to have the background color change randomly by assigning red, blue, and green a value between 0 and 255 each time the user clicks the button. Therefore the images remain the same, but the background does not. In the future, I would like to learn how to animate the images in a manner in which they slightly shake from left to right. Additionally, I am interested in creating a system in which two scenarios never repeat consecutively.

Working as a team for a coding assignment was a very interesting experience. We each debugged the code at certain points, which made me realize the importance of collaboration. Zach and I each created the scenarios on our own and then we combined our code. I noticed that my coding style is different from his, such as how I name my variables and the way I placed the cat images in certain locations by multiplying or dividing their width and height.

My scenarios have about five cat pictures while Zach’s scenarios are simpler. He created text that is always slightly brighter than the background by multiplying the rgb values by 2, which is a very unique idea. Each scenario with text incorporates push/pop. With over 200 lines of code, I understand the significance of organization. I numbered my variables and images efficiently in order to keep track of their usage.