ARDUINO · CIRCUIT SCULPTURE · UX · UI

Phosphor: An exploration of sound & image

Phosphor is a personal Arduino-based project that brings together my interests in circuit sculptures, audio and visual design. Built around a uniquely tiny board, it combines a real-time audio visualizer along with additional modes for visual experiments. It works together with Duatone, a supportive script that I created to communicate with it.

Evolving the project became an exercise in designing a complete experience within very limited hardware, where the interface, graphics and code all needed to work closely together in an optimized yet intuitive way.

Where it started

This project grew out of a series of experiments with tiny circuit sculptures, each exploring a different aspect of electronics and interaction: a visual piece connected to internet APIs, sensor-based objects, and one using just an LED array as its entire interface. Until now these have been clones and adaptations of existing projects by others, so this time I wanted to create something completely from scratch.

Working with the board

The LilyGo T-QT Pro appealed to me because of its tiny thumb-sized form factor and the possibilities it offered:

A 128×128 pixel screen for audio visualization and graphics, with enough limitation to make every pixel count.
Two physical buttons that could support a complete interface through carefully assigned actions.
Wi-Fi connectivity (later to be used for receiving audio data wirelessly)
Available GPIO pins for extending the hardware with an external audio input or other components.

With only two physical buttons, navigation became a central part of the project. The controls needed to support switching modes, adjusting settings, and connecting to a wireless audio source without making the interface feel complicated.

I divided to give each button a consistent role:

Left button: moves through modes or menu items
Right button: changes a value or performs an action.

Short and long presses extend those controls, allowing the same two buttons to handle the different parts of the interface.

A keyboard, squeezed into two buttons

Connecting to Wi-Fi meant finding a way to choose a network and enter a password with just two buttons. The challenge was fitting that familiar process onto a tiny screen while keeping each step clear.

I split the network list into pages and built a miniature keyboard for the password, with letters, numbers, symbols, and controls for changing case, deleting, and confirming. The buttons keep their usual roles: one moves through the options, the other selects.

Entering a password takes patience, but for an occasional setup task, that felt like a reasonable compromise. Short status messages show how the connection is progressing, and a dedicated Wi-Fi page lets you check the network and manage the connection afterward.

To conserve power, wifi is automatically disconnected when the active mode is not wifi dependent.

A tiny visual language

On a 128×128 screen, the interface needed to stay readable, make navigation clear, and leave room for the visuals. Typography, wording, and contrast all had to work within that small space.

I chose TomThumb for its tiny, legible characters and pixel aesthetic that I felt suited the project. Short wording kept labels and values together, while uppercase labels, mixed-case values, and different shades created hierarchy.

Settings screens all share a consistent layout, with pagination for longer menus and separate drill-in screens for deeper options. The panel opens on top of the running visualization, keeping the user oriented, and changes are applied immediately. Each mode has its own defaults and controls to explore.

Example of settings screen with pagination and drill-in screen.

A reusable style for errors and status messages keeps feedback familiar throughout the interface. For screens that require some waiting (i.e. scanning and connecting), a small animation plays to ensure the user that nothing is stuck.

Unified status and error screens that are reusable across the UI.

Exploring sound through image

Visualizing sound meant balancing speed, detail, and readability. The image needed to feel connected to what you hear, while remaining useful across quiet and loud inputs. Each mode approaches that challenge differently, with defaults that provide a starting point and settings that invite experimentation.

OscilloscopeDraws the audio waveform through time, revealing its repeating shapes and sudden changes. Time and trigger controls let you stretch or steady the signal, while stereo layout and persistence change how the traces overlap and linger.

LissajousPlots one audio channel horizontally and the other vertically, turning their relationship into loops, knots, and shifting clouds. Dots or continuous trails reveal different textures, while persistence controls how much of the shape’s history remains visible.

Spectrum
Breaks sound into frequency bands, displayed as solid bars or a dotted grid. Linear or logarithmic spacing changes the emphasis across frequencies; update rate controls the visual pace, with adjustable peak decay in the bar version.

Rings
Wraps short snippets of the waveform around circular paths. As the drawing sweeps
around, it erases older traces to make room for new ones, creating a rolling window of sound. Rotation speed and fade behavior shape its rhythm and density.

FairlightAn homage to the original Fairlight’s waveform displays, stacking snapshots of sound into a scrolling landscape. History length, capture rate, and line density change its depth and pace, while smoothing shifts the movement from stepped to fluid.

MeshTransforms the waveform into a deforming surface, with a wire grid and dotted layers suggesting depth. Amplitude controls its height, axis rotation changes the direction of deformation, and bipolar motion lets sound pull the surface downward as well as upward.

Visuals: short loops of each mode, using the same sound where possible to reveal their different responses.

Small screen, different worlds

Beyond audio, I wanted to explore how much depth and movement this little display could produce. Each visual mode brings a different constraint: making geometry readable, giving dots a sense of volume, or letting simple rules produce unexpected patterns.

Game of LifeA cellular automaton where each cell lives or dies according to its neighbors. Different rules and starting patterns produce growing clusters, repeating structures, or unexpected stillness.

CubeA rotating geometric form built with additive RGB color: overlapping layers become brighter and create new colors. Resolution, spin, and phase shift it between a recognizable cube and more abstract patterns.

PlanetA miniature world rendered through raycasting, which calculates the visible surface and its shading. Dithering uses pixel patterns to suggest intermediate tones, giving the planet depth and texture at a tiny resolution.

WavesA field of dots animated by overlapping wave patterns creates the illusion of a moving surface. Tilt and amplitude reveal its depth, while ripples and chaos disrupt its regular motion.

Glyph
A field of small symbols forms shifting patterns with purple accents. Speed, light–dark balance, and lingering flashes shape its texture, with an option to respond to sound.

Hello.

Finally, every device deserves a cool splash screen. As a nod to my favorite low-res handheld, the original Game Boy, Phosphor’s animated “hello” drops in from the top of the screen, followed by a brief display of the current firmware version.

Phosphor is still in development as I continue to fine tune vis-modes and settings. Ultimately, the goal is to create a full circuit sculpture around the board with its own battery source and audio inputs. I maintain a full wiring diagram as well as a 3D model to plan for component placement.

roysherizly.

info