For this week’s assignment, we were supposed to create something that bounces off of walls. I decided to make a ball/circle that would change direction when the mouse was pressed or when it passed the width of the page on both sides. As the circle progressed towards the center of the screen, the background would become darker, while it would get lighter as it neared both edges of the screen. In order to accomplish this, I mapped the range of light blue to dark blue for the left half of the screen to the circle’s x value, so that the background would get darker as it approached the center of the screen. I did the opposite for the right half of the screen, going from dark to light. This creates a smooth transition from one color to the next.

I had wanted to change from purple or orange to the dark blue, but wasn’t sure how to accomplish that. I think I had to use lerpColor(), but I wasn’t sure how to accomplish that. Additionally, the number of times the mouse was pressed is counted in the right hand corner because I wanted to use type in some way. Because what I made kind of replicates watching the moon at night and controlling what time it is by reversing the direction, I may have been able to have the time proportional to where the moon was in the sky, but I just thought of this.

Below is a picture of my brainstorming process and an example of what it looks like.

Code on GitHub

You can also use the program here

Leave a Reply