For our week three homework, we were asked to create an algorithmic design with simple parameters that could be controlled with a rollover, button, or slider made from scratch. I was paired with Lindsey, and having code experience I decided that I was going to first try and code a slider from scratch from memory. I’m used to having slider code readily available from previous works and code examples, so I thought it might be good to flex those long dormant brain muscles.
Creating a slider means doing hit detection inside of the “knob” of the slider, and then adjusting the position of the knob while “dragging” it. Is my mouse clicking? Is my mouse inside of the box? If so, move the knob to the position of the mouse. Restrain its movement to the X axis, and prevent it from going outside the bounds of the slider.
Not so fast!
No matter what your level of coding skills, you can always forget something. Which, in turn, the computer never forgets to remind you of. The ultimate game of “Simon Says”. We take our lovely sliders for granted, don’t we? They feel nice and intuitive. But if you only code the logic to say, “…when clicked and inside…” and then you move the mouse outside of the slider knob it will stop moving. This makes you appreciate how fast you can move your mouse during average use, and how little your mouse is literally “on” the knob as opposed to briefly clicking it then taking off in a direction.
The solution is to explicitly set the state of the knob, assigning a “clicked” or “currently dragging” status. Then the logic will let you move the knob with the mouse, even if the mouse is technically outside of the knob’s graphical boundaries.
After doing this, I then decided to take a look at the example UI code for the slider. It seems that code is all based off of the mouseClicked() and mouseReleased() functions, as opposed to mine which is based off of the boolean “mouseIsPressed” p5js variable. Need to remember to ask in class about the pros vs. cons for each approach.
Meanwhile, Lindsey was beefing up her skills with functions and for loops. She wanted to stick with the cat and mouse theme she has been working on, so after she made a cat and a bunch of mice, I tied everything together with the slider code and polished things up a bit.
We had a concept, and plugged the slider code in to execute:
https://alpha.editor.p5js.org/projects/Bkb-Lb9p
We weren’t quite sure if this counted as truly algorithmic or not. I really wanted to randomly assign the colors of each mouse, but given the limits of the assignment and where we are in regards to the learning material, I was scratching my head in regards to finding an elegant solution.
I wound up adapting some of the GOTO10 code that had been posted by Dan Shiffman as inspiration. This gave us some fun animation and randomized mouse colors, but perhaps some other trade offs.
https://alpha.editor.p5js.org/projects/HyymhZqT
The code wound up being a bit hacky in the end; what Lindsey had made, my first attempts to modify it, implementing logic from the GOTO10 approach, further attempts to modify… but eventually we wound up achieving our vision (more or less).
It is a fun approach, but with certain limitations for sure. I have some questions about how the GOTO10 style can be refined, which I’ll be posting to the GitHub group.
Lindsey was a great team mate, and really grew her skills over the course of the week. It was an honor to be on the ever expanding, illustrious Cat and Mouse series.