ICM Week 3 - Part 1

The first part of this week's assignment is to create a sketch of some kind of rollover, button, or slider interaction from scratch. In the second part, I will swap sketches with a classmate and make some changes to his/her code. I'll add a link to that post later.

I decided to create a slider that would change colors. I wanted the user to drag his/her cursor so the colors would change like turning a page in a multicolor book. Full code is available here and this is the final version.

My initial ideas looked like this on paper:

I drew up a large arc in p5.js and I thought the slider would look something like this at its start position:

I also got very confused by how javascript defines positive or negative direction for angles. I figured it out eventually (see confused sketching below).

With this info, I reoriented my arc so dragging left would increase the slider's angle. I mostly did this because it made more sense to me, but I know I could reposition it later if I wanted to. Also, it was hard to debug the arc when it was large, so I made it smaller. I used code for a GUI knob from Dan Schiffman to make my arc rotate when the user drags it. I defined a stopAngle (which was 2/3*PI) where the color should change and where the arc would return to its original position. I first got it working without the color changes.

Next, I started trying to create the logic for how the colors would change. I thought I could define it by when the mouse's angle and the slider's angle had passed the stopAngle and when the mouse wasn't being dragged. This seemed to make sense in my mind, but it created a sweet spot where the colors would perpetually cycle. This is where my boolean value changeCol was always true when I didn't mean for it to be.

I realized I needed to use boolean values to figure out when the slider's angle had reached the stop angle and also when the arc would change colors. The boolean value changeCol should only change to true when it passed the stopAngle. I updated the code to reflect that.

That fixed my problem and now the color slider works as I intended!