Hardware Serial + P5.js is extremely interesting. It opens the possibility of connecting a tangible interface to the web world, allowing us to create fascinating things. The basic principles of Serial communications allow us to take something basic to many different and unique places. What I mean by this, is that simply connecting two different pieces of hardware (an Arduino Uno and a computer in this case) we shine some light over the vast world of possibilities.
I thought hard about what could I create to explore this toolset. Constraining myself to a simple as possible tangible interface, I decided to create a web based Etch A Sketch.
This classic toy was always a joy to use, but I always felt that its monochromatic nature left many possible illustrations unrealized.
Design process
The classic Etch A Sketch is so successful because of its simple yet precise interface, so I really didn't to mess with its perfect recipe, rather augment it with two new features:
Color choices
Different point sizes
At first, I wanted as few controls possible to create a simple yet intuitive interface inspired by one of my favorite little gadgets – the Teenage Engineering Pocket Operator PO-12 Rhythm. This little thing allows you to create many weird music beats with only buttons and a couple of knobs, but by owning one myself, I have to admit that the interface is not always the most intuitive and clear one.
My initial concept relied on 2 knobs and 2 buttons. The knobs would control the x and y position of the cursor the same way that a classic Etch A Sketch does, and by holding the buttons in different ways and moving the knobs, you could access a whole range of settings for color and point size.
I realized by trying to do this that sometimes, the more you simplify an interface the more you complicate the interaction, so I decided to use 2 knobs and 5 buttons:
After some testing, the toggle paint on/off button seemed to make the whole experience a bit confusing, so the final controls are the following:
A knob to control X position
A knob to control Y position
Two buttons for increasing and decreasing the point size
Two buttons for cycling through the color options
Once designed, it was hardware time...
Once wired and tested for button debouncing, I dove into the P5.js side of things and ended up with a somewhat simple sketch of only 100 lines that connects all this magic together. You can see the full source of the project here.
Well, how is it?
Some illustrations created by me and a a friend
Issues and key learnings
Debouncing multiple HIGH state readings within the time it takes to actually press a physical push button can be confusing when having multiple inputs. I should consider using a OOP approach to this next time and create a Button object to manage this.
I struggled with finding a way of sending values bigger than 255 as a command, so I had to create my own parser and code commands within a 0-255 resolution. The issue is that the x and y position only have a ~110 resolution for each. Drawing details with a small point size was not possible because of this.
A noisy potentiometer can be a major pain to debug. At first, there was little precision in the posible positions, but by changing to another pair of them and increasing their resistance values, a very precise reading is obtained – also, averaging 60 measurements per command helps.
Comments