Homework 4 - Interactive Devices¶
Generative Art¶
A physical device that rotates a virtual cat using capacitance touch, inspired by the OIAA spinning cat meme.
Images¶
An inside view of the device
Side angle view of the device
Video¶
Process¶
For this project, I wanted to create a funny project while also learning about hardware and software interaction. I was inspired by the OIIA cat spinning meme — a looping video of a cat rotating in place to a soundtrack that has been trending on the internet for some time. So, I created a 3D-printed enclosure housing an ESP32 TTGO T-Display with three capacitive touch pads, connected via Web Serial to a Three.js visualization of a spinning 3D cat model in the browser.
The physical design was an important part of making this feel like a real artifact rather than just a breadboard/ESP32 with wires. I modeled and printed an enclosure that housed the ESP32 and added three touch-sensitive copper pads on the surface. Then, I printed a physical 3D print of a cat to place on top of the enclosure. The physical interaction is simple. There are three touch pads: two pads are used as increase/decrease buttons. The middle pad toggles between spin control and background color selection. The increase/decrease buttons will control the cat's spin speed when in mode #1, and cycle through the background color selection when in mode #2.
As a primarily software focused engineer, experimenting with hardware and physical devices introduced me to a new type of problem solving. For the enclosure, I worked on accurately measuring and modeling, but unlike software, a fix isn't just one recompile away, and instead requires a 6 hour reprint. Learning about working with a much slower feedback loop was new to me and showed me the importance of testing with small versions of the enclosure initially to save time in the long run.
The main technical challenge was the reliability of the capacitive touch. I was facing an issue where pressing one pad could trigger an adjacent one due to physical proximity on the PCB, causing the mode to switch unexpectedly. I got around this issue by making sure the button is pressed for at least 50ms, and that the threshold has to stay below this amount for the whole 50ms. I also made sure the threshold was significant enough to prevent these ghost taps.
On the software side, the browser visualization uses Three.js to load and render a GLB cat model, with Web Serial connecting the hardware and the software. Once connected, the physical device can be used to control the cat on the screen.