Description: An evenly spaced stripe pattern makes up the background. When your mouse hovers over a stripe, it changes random colors. Meanwhile, two nested squares rotate around the center of the canvas.

Tips for user: Move your mouse over the stripe pattern to see the rainbow colors follow your movement.

Finished code:

Developing a Concept:

I knew I wanted to create a striped pattern in the background using a for loop. I sketched out the idea below. I used rectangles that were 10 pixels wide and the height of the canvas. I made sure to leave 10 pixels of empty space between each rectangle.


By drawing it out, I realized that the x position of the rectangles increased by 20 with each iteration. By multiplying 20 by the counting variable i, I was able to create the pattern 20, 40, 60, 80, 100, etc. because 20*1=20; 20*2=40; 20*3=60… and so on.

Screen Shot 2017-10-06 at 7.29.27 PM

Next, I wanted to give the stripes an interactive element. I decided that when the user rolls their mouse over a particular stripe, it will turn pink. I had to find what the restraints of the mouse position would be for this to happen. If mouseX is greater than the x position of the stripe (which equals x+20*i) AND mouseX is less than x+20*i+10 (because each stripe is 10 pixels wide), then the mouse must be inside the designated area of a particular stripe, therefore changing its fill to a pink color.

Screen Shot 2017-10-06 at 7.40.22 PM

Next, I needed to add a random element to the project. Instead of the stripes being pink, I chose to make them random colors, producing different results in every frame. To do this, I simply changed the fill color from ‘mediumVioletRed’ to three random values between 0-255. Again, this is only applied to the stripe that the mouse hovers over.

Screen Shot 2017-10-06 at 7.45.15 PM

I realized that at the standard frameRate of 60, the random colors changes very rapidly. To slow this down and make things easier on the eyes, I established a new frameRate of 8.

Screen Shot 2017-10-06 at 8.00.48 PM

Lastly, I had to incorporate an element that changes over time. I chose to include a rotating shape of nested squares in the center of the canvas. I wanted the shape to be outlined in white with no fill; this way, you can still see the striped background behind it.

Screen Shot 2017-10-06 at 7.48.24 PM

Using the translate function, I established a new origin in the center of the canvas. Then, I rotated the canvas by x. Because x is constantly increasing by 0.2, the rectangles I drew continually rotate around the new origin by 0.2 degrees, appearing to move. The stripes in the background are not affected by this rotation because the instructions to draw the stripes are written at the top of the code, above the instructions for translate and rotate.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s