Week 2: Animation Variables

This week I began to replace the some of the hard coded numbers from my pixel portrait with ellipses sketch of last week with variables. Specifically, since all the ellipse are the same width and height, I declared those values at the beginning of my program. I'm working on a more elegant way to draw the ellipses at their current locations...

For additional practice with variables, I set the background to change every time the sketch runs by assigning random numbers within the 0 to 255 range to each of the red (r), green (g), and blue (b) values. 

I also added a transparency variable to the fill (color) of each portrait ellipse such that when the mouse slides from the left edge of the canvas to the right edge the ellipses become less opaque. The starting value for the transparency variable is a fixed number, however changes occur because the values of the mouse's X coordinates on the canvas are mapped to a range between that fixed transparency number and complete opaqueness at 255. 

In response to the assignment to create an element that changes over time independently of the mouse, I programmed a center ellipse to grow incrementally and eventually fill the entire canvas. Its color is also generated by random values assigned when the sketch starts, but it's transparency value is mapped to the value of the mouse's Y coordinates on the canvas. I would like to figure out how to loop this growing ellipse or program it to start shrinking incrementally once its radius matches that of the canvas.

Before adding the animation additions to my pixel portrait ellipse sketch, I experimented with the variables in a sandbox sketch here.

Here is the final modified pixel portrait with ellipses sketch.

A couple of still shots: