Screen Shot 2017-09-22 at 8.57.11 PM Screen Shot 2017-09-22 at 8.57.45 PM Screen Shot 2017-09-22 at 8.58.04 PM

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.

exercise 2

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.

exercise 2 1

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.

exercise 2 2

exercise 2 3

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:

sketch

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

w

Connecting to %s