My finished code: https://alpha.editor.p5js.org/embed/rkuV417j-
I knew I wanted to create something that was simple and geometric. I wanted the background to move on its own, and to have a circle in the center that was interactive for the user. The background will be composed of evenly spaced diagonal lines that move in an upward-right direction, and the circle will change color when the user presses their mouse.
I decided to create a square canvas of 500 pixels x 500 pixels. To map out where the diagonal lines would fall, I divided my square canvas by four on each side and wrote down the coordinates of each point needed to form the lines. It turns out that I needed 7 lines in total. I also sketched out what I wanted each frame of my animated background to look like. It will start off with one diagonal line, then add another, and another, until there are 7 lines. Then the background will go blank and start again.
I established four variables for the background: x1, y1, x2, and y2. These variables represent the points that make up each line. I made a table listing all the points in the order that they appear in my frames. I realized that y1 decreases by 125 each frame, and x2 increases by 125 each frame.
In order for the background to go blank and start again, I knew I would need to use if statements. Increasing the value of x2 by 125 each frame meant that by the 7th frame, its value would be 875. When x2 reaches this point, I wanted a solid rectangle to fill the canvas and for all the variables to go back to their original values. This is what the following code represents:
As for the interactive circle that changes color, I looked at an example from p5.js. This was very helpful and I applied the same concept to my code.