Typographic Hourglass is an interactive installation that captures spoken input and turns it into something physical. Using a microphone, words are pulled into a p5 environment where letters fall, collide, and collect like sand in an hourglass. Displayed on an iPad, the piece responds to movement. Flip the device, and the system resets, sending everything back the other way. Built with p5 and matter.js and shown in a group exhibition, the project explores the idea of language as something with weight and duration.
Research and Development
I started by getting my letters, or NaN error codes as they started out as, to fall from the top of the canvas and have collision with one another. This was done by referencing the matter.js libraries. I fixed the NaN error and then had real letters colliding. The next step was to add the hourglass shape bounding box to the physics scenario. The final step was to implement voice input to drop spoken words into the scene.
The final project operated mostly how it was outlined in initial sketches, with added user interface elements for better user experience. The start button confirmed orientation permissions, entered full screen mode, and disappeared after pressing. The begin listening/end listening button informed users of when the device was listening for input.
