This week I continued my progression into code organization land and wrote my 10print-inspired design as a class (simply called Design) with a constructor function. While all of this new code may be written within the sketch.js file, I created a new file within my project called design.js to keep things extra tidy. (I made sure to include this new file, design.js, in my project's index.html code along with sketch.js.) I'm thinking of a class as a template to describe everything about my Design object, so within the constructor function I defined all my variables for Design, and then added to the class two pieces of functionality: how Design should look as show() and how Design should change its appearance as animate(). After that, it was only a matter of creating an instance of my new object, Design, in the sketch.js file by first declaring the object variable (let design), then initializing the object in setup() as design = new Design(), and finally, executing that object by calling it's functions in loop() with design.show() and design.animate(). Look how clean the code is here! Now can I write a sketch in which each the same object fills the canvas like in the slider practice? Yes!
The beauty of encapsulating my object in a class is that I can create multiple instances of it with different arguments for how it should appear and behave. In my next example, I modified my constructor for the Design class with parameters to accept different arguments for how it displays. I then created four different objects on my sketch.js file as concentric animating rings. It reminds of an eyeball iris opening and closing.
Next, I played with adding a parameter to the animate() function in my Design class. When I called that function for my objects back in loop, I gave each object a different value by which to animate. Whereas before my sketch "grows and shrinks," now my sketch animates to a certain point and stops. At the moment, I cannot articulate why the behavior changes--something to revisit. If I were to guess, it might have something to do with the scope of the arguments...?
Moving forward, to reinforce my understanding I solved some of the weekly quiz problems from last week:
Function practice from Week 4 Quiz - Ice Cream Cones
Object practice from Week 4 Quiz - Bouncing Ball
Return a value practice from Week 4 Quiz - Celsius to Fahrenheit Conversion
Now onto arrays and ooh, more efficient ways of organizing and writing code. After watching the Array and Arrays & Loops videos, I also peaked at this video on Arrays of Objects. I know the syntax is slightly different, but it helped me map out how I might write my Designs into an array. Here is the sketch from the eyeball above, rewritten without all the arguments for the sake of simplicity but with an array and for loops. Each x and y coordinate of the Design object origin is determined randomly. And just for fun, the same sketch with 40 objects and many random values assigned to their properties.
Review with this week's quiz problems:
Array practice with text from Week 5 Quiz - Funny Faces
Class and objects practice from Week 5 Quiz - Bubbles
Class and an array of objects practice from Week 5 Quiz - More Bubbles
Adding and removing objects from an array from Week 5 Quiz - Bubble Trail
Finally, I put everything together from this week's Design object explorations into one sketch. The combination of a looping array of animated Designs across the x/y array of the canvas, and depending on the speed, produces a subtle wave across the screen.