Introducing SAGE, the Inclusive Audio-Haptic Matrix

In the world of synthesis, music has traditionally been divided into rigid silos.  You either tweak knobs on a physical Eurorack panel, or you stare at a grid of tiny digital blocks of screen.  However, what if an instrument wasn’t defined by physical keys?  What if an instrument could transform the empty space of your browser into a responsive, living canvas of sound and sight?

Meet SAGE: The Spatial Audio Gesture Engine

Housed in a sleek, virtual walnut chassis inspired by legendary 1970s synthesizers, SAGE is a self contained, interactive web synth built entirely out of raw HTML, CSS, and JavaScript.

What is SAGE?

At its core, SAGE is a 2D vector signal space.  It replaces the traditional piano keyboard with a continuous kinetic grid.  By tracking the precise movements of a mouse or trackpad, it translates spatial coordinates into real-time audio modulation via the browser’s built-in Web Audio API.

Instead of playing static notes, you play shapes, speeds and distances.

How it Works:  The Math Behind the Magic

SAGE relies on a synthesis technique called Frequency Modulation (FM) alongside complex coordinate mapping.  When you initialize the engine, two audio oscillators are fired up simultaneously: a Carrier (a smooth sine wave that you directly hear) and a Modulator (a jagged sawtooth wave that alters the carrier).

Your cursor acts as the master control node across a beautifully balanced system:

• The X-Axis (Horizontal):  Controls the base Carrier Frequency (scaling smoothly from a deep 120 Hz Bass to a piercing 880 Hz treble) while simultaneously moving the Stereo Panning from left to right.

• The Y-Axis (Vertical):  Maps exponentially to Volume (Amplitude).  The bottom of the interface is total silence, moving upward swells the volume into a rich, full bodied drone.

• The Center Delta (Timbre/Texture):  SAGE calculates the cursor’s exact mathematical distance from the dead center of the screen.  In the center, the sound is a pure, clean tone.  As you pull outward toward the edges of corners, the Modulator violently distorts the Carrier, introducing harsh, metallic FM textures.

Designing for All:  Sensory Bridging & Inclusivity

While SAGE is an absolute blast for experimental musicians, its truest, deepest intention is to act as an inclusive bridge for artists of varying abilities.  Specifically those who are deaf, hard of hearing, blind, or visually impaired.

Traditional digital audio software (DAWs) are notorious for dense, microscopic visual menus which completely lock out visually impaired creators.  Conversely, music is often entirely inaccessible to the deaf community.  SAGE was intentionally engineered to dismantle these barriers by providing a completely cross sensory, unified playground.

The SAGE Philosophy:  A deaf artist can compose by mastering visual geometry, a blind artist can navigate by listening to the boundaries of the sonar.

For Deaf and Hard of Hearing Artists:  Sound Made Visual

For creators who cannot hear the frequency modulation, SAGE translates the invisible physics of sound into mesmerizing, real time geometry.

• The Dynamic Poly-Ring Visualizer:  The center cursor doesn’t just sit there, it radiates glowing, neon-green concentric waves.

• Visual Timbre:  The visualizer’s ripples directly mirror the audio state.  When the cursor is near the center (producing a pure sound), the rings are smoothly circular.  As you move outward and the audio distorts, the visual rings warp into chaotic, jagged geometric starbursts, giving an exact visual representation of the audio’s harshness and energy.

For Blind and Sight Impaired Artists:  Space Made Audible

For creators who cannot see the screen, SAGE transforms the layout of the digital page into a rich, audible radar map using a secondary Boundary Sonar Engine.

• The Proximity Sonar:  Visually impaired users don’t need to guess where their cursor is relative to the borders.  If the cursor drifts too close to the edge of the playable matrix, a localized background pinging sounds off.

• The Boundary Pings:  The closer the cursor gets to a wall, the faster and higher pitched the pings become.  By listening to the speed and stereo pan of the pings, an artist can build a perfect mental map of exactly where they are in the vector space, using spatial audio as a navigation tool.

A Playground Open to Everyone

By marrying visual geometry with auditory radar, SAGE ensures that exploration is never gated by a single sense.  A deaf artist can compose complex electronic textures by mastering the visual geometry of the ripples, a blind artist can navigate sweeping, cinematic soundscapes by feeling the boundaries of the sonar engine.

SAGE proves with a few hundred lines of creative code, the internet can become a place where sight and sound are not separate experiences, but two sides of the exact same coin.

Ready to perform?  Check out SAGE here.