I recently worked on a project that I call a “challenge” where I give myself some kind of constraints in order to facilitate my learning process. I wanted to come up with a physical interface that uses just a potentiometer and a button in just a week. In addition to these constaints, I had a goal of having a web browser app that was controllable using this custom interface. I’ve a history of working on audio-visual apps for the web, so naturally, I made something that generates music and can be controlled by this input device.

The end result is available to use immediately in the browser. In order to use the controller interface, the parts are fairly common and the design and code is also available online, with ample documentation. In all, I think this was a fairly successful exploration of these ideas and has led me to start connecting with more people and communities online. There’s a lot of notes I now have that I plan to release in a series of posts both here and in my other javascript-centric blog.

Here are some highlights from my devlogs from the project:

  • The interesting thing about dynamic interfaces, is how much is accomplished with math, and not super complex math either.

  • Prototype software and design for pico in wokwi.

  • Very easy to take the design and code from wokwi and duplicate it over to the actual board and a breadboard.

  • Using the code I wrote for my serial web study enabled a very quick build on the browser-side of the controller implementation.

  • Definitely feel like there needs to be a better way to add variety to the sound, I feel like the random switches between notes and beats and occasional high notes aren’t really consistent.

  • Some tone.js performance hints here are super useful.

  • Drawing the circles - new technique, draw until overlapping a point, then move towards the next point, looks much more interesting (but that could also be because I’m using different sized circles).

  • Getting more and more ideas for improvements and extra features.

  • This is the final [circuit] design, basically just extends the voltage divider to react to button input.

  • Considering using Tau * 1000 (tausend) - 6283, to represent potentiometer value.

  • Need to also build the physical controllers, protoboarding is super unergonomic!

  • Building stuff in electronics can be slow, and has a whole host of dangers to keep in mind.

  • Definitely changes the experience to use the controller with the app rather than with a keyboard.

  • Different colors can make a lot of difference to an interface. The new color scheme I feel match more closely matches the ambience of the app.