Week 4: Functions

I was super excited to reorganize last week's algorithmic design with functions, but first I learned to build a slider of the the likes that we incorporated into that sketch.

First, I built a slider that does nothing so I could understand all the moving parts so to speak.

Next, I added the basic elements of our algorithmic design and programmed the slider to adjust just one variable. I know it's necessary, but I still cannot articulate how Offset works...

Okay, now onto organizing my code with functions! I LOVE to organize. As with my process above, I decided to start on a small scale. I copied my one-variable slider sketch just mentioned and based on the content in draw(), defined three new functions outside of draw(): displayDesign(),  displaySlider(), and sliderBehaviors(). Aside from background(), these are the only functions called inside of draw() now as you can see here, and everything continued to work as before.

Then I wanted to add parameters to my functions. I took note of all of the global variables related to sliders and instead listed those as parameters in my new function, slider(). When I called the function in draw(), I did so with the values that I originally set globally. But when I did that my mousePressed() stopped working because it was looking for those global values (fixed here). So my slider includes functions and variables--would turning this into an object help?!

I see how functions are useful for drawing variations of a common element, but I want to draw several sliders and map each slider to a different variable. Remembering that I had access to browser sliders, I played with those, again starting on a smaller scale first to work out the syntax: four sliders with the original design element. Finally, I jazzed up our original algorithmic design with six sliders (above), crashing my sketch several times while before I set less browser-taxing slider min and max levels. So much fun!

Back to the homework this week, I did write a sketch with a function and parameters (below) and then called that function multiple times with different arguments. Sticking with the same original design element, it was a great, albeit veery slooow way to understand how each of my sliders in the other sketches visually impacts the individual unit.