This week, I practiced more animation techniques and added some conditional and loop statements into the mix. Some of the sketches below are from the weekly review quizzes, which I've found to be quite helpful in consolidated my understanding.
painting and changing colors with the mouse
practicing translate(), rotate(), push() and pop()
animating a rectangle and using constrain()
making a rollover and a button
creating concentric circles using a for loop
nested a loop within a loop to draw an array of rects*
*I'm curious if I can link this back to my pixel portrait sketches from the first week?
Keerthana and I partnered for this week's assignment. I was keen to explore algorithmic design with simple parameters (inspired by 10 PRINT, P5.js example), and she, rollovers, buttons, and sliders. She suggested we pick a theme to guide orient our exploration: mandalas. Great idea! Those they are quite intricate, I wondered if I could create a design that flowered out from the center of the canvas.
I riffed off of my concentric circles sketch above and played with drawing groups of circles around the canvas here. Not nearly as simple as the 10 Print example. I gave myself a new parameter: how might I limit the entire code in one screen view without the need for scrolling?
Next, I simplified: could I just draw a series of lines radiating from the origin of the canvas? Yes, I used translate() to shift the origin, and then used a For Loop to draw lines starting from that origin at regular angle increments for 360 degrees.
Then, I nested this loop within a nested loop wherein I shifted the origin across the grid of the canvas and drew a new grouping of radiating lines at each location. Here's my draft. I'm sure there are more, but by just changing one of these values the entire pattern shifts in some exciting ways:
amount of degrees
amount of angle increment
increasing or decreasing x and y
changing the line endpoints
Keerthana took the code and incorporated a slider into the sketch that adjusted the amount of x. Together we realized that we could also map her slider to the amount of y. We then built another slider to change the angle increment. What fun! Here is our final sketch.
There were so many other variables for which we wished to create sliders, but we realized that our code would become very messy, very fast. Ah! Is this where we might want to utilize functions for our program to help us keep our code organized? Keerthana also had the genius idea to map the location of the mouse to the angle increment such that you could spin around the entire canvas clockwise and simultaneously animate the drawing. I can't wait to come back to this sketch and add more options to play with the animation.