Making things move


Making things move using code is one thing, and making code do what you want is another animal. I wanted to make sure that I understood the logic of the code more so than creating something visually beautiful.

Below shows that there are three “flower” shapes using ellipses. The largest of the three doesn’t animate, but acts like the base, as if the three shapes are one.

Screen Shot 2015-09-15 at 10.16.55 PMScreen Shot 2015-09-15 at 10.16.29 PM

Screen Shot 2015-09-15 at 11.56.18 PM This shows the three flower shapes.

Screen Shot 2015-09-16 at 12.16.33 AM

I wanted the two smaller flowers to move to the right, but return to their original position and then repeat. To do this, I created the variable “limit” to help track the position of the shapes as they move. When the code initially runs the shapes grow bigger as “limit” is initially defined as “0”. Once “limit” is over 100 the “wide” and “tall” variables decrease.

In order to ensure the shapes would return to their original position value, I made an if-statement that said once CircleA and circleC are greater than 360 (on the x-axis), it would return back to the value of 25. Although this isn’t the best transition, since the shapes jump back to restart the animation, I was happy with the exhale/inhale simulation.

I chose to fill the color of the ellipses with a random color that is different each time the code runs. To ensure the ellipses are filled differently each time, I created the variables ballR, ballB, ballG in the setup function.

Screen Shot 2015-09-16 at 12.19.45 AM

I wanted to an action controlled by the mouse as well.

Screen Shot 2015-09-16 at 12.19.45 AM

Finally, to show the change in colors of the background as the code runs:

Screen Shot 2015-09-16 at 12.23.27 AM