Overview of Spatial Phase Dynamics
This workspace presents a visual and sensory physical simulator designed to explore the wave mechanics of coordinate phase translations, scanline temporal transformations, and real-time auditory sonification. A mathematical phase shift ($\phi$) characterizes any displacement of a repeating periodic waveform along its propagation path relative to a fixed baseline starting position. By shifting coordinate matrices across discrete horizontal scanlines, we can transform static arrays or video frames into dynamic, moving waves.
The core visual mathematics of this system are modeled on a general periodic function:
$$y(t) = A \sin(\omega t + \phi)$$
where $A$ represents the wave amplitude, $\omega$ is the spatial frequency coefficient, $t$ is the elapsed system time, and $\phi$ is the phase shift. When coordinate positions across sequential scanlines are mapped directly to this offset formula, it produces complex spatial ripples, illustrating how phase shifts interfere with human edge detection and image coherence.
In biological systems, the human visual pathway decodes the spatial world using specialized receptive fields tuned to distinct spatial frequencies and phase offsets. Cortical cells in the primary visual cortex ($V1$), modeled computationally via Gabor filters, analyze visual inputs using phase-sensitive components. Through interactive coordinate translations and audio synthesis, this platform demonstrates the physical relationship between visual scanline distortions and sensory perception.
Operational Guide & Controls
Manipulate the coordinate waves and audio responses using the real-time control system:
- Phase Offset Slider: Sets the starting phase displacement ($\phi$) from $0^\circ$ to $360^\circ$. Moving this control shifts the wave pattern vertically across the viewport, demonstrating standard phase displacement.
- Wave Amplitude Slider: Alters the maximum horizontal translation of each visual scanline slice. High settings increase horizontal distortion, splitting the camera or test grid into wider paths.
- Wave Frequency Slider: Adjusts the spatial frequency ($\omega$) of the sine wave generator. High values increase the total number of complete wave cycles rendered within the vertical boundaries.
- Temporal Decay Slider: Controls the opacity level of each sequential render frame. Increasing this parameter produces long, trailing visual pathways and soft motion blur effects.
- Enable Webcam Feed: Requests access to your device's video capture stream to use your live webcam feed as the visualizer's input source.
- Interactive Rippling: Click, tap, or drag on the visualizer canvas to generate coordinates-based sensory ripples. If audio is enabled, this triggers synthesized audio waves that track your inputs.
Technical Architecture & Math
The application is built using vanilla Web APIs, combining high-speed HTML5 Canvas double-buffering with coordinate audio synthesis via the Web Audio API.
To achieve high rendering speeds without GPU shader overhead, the rendering engine splits incoming frames into horizontal blocks of size $dh$. For each block along the Y-axis, a horizontal offset is calculated using the following equation:
$$X_{offset} = \sin\left(\left(\frac{y}{H} \cdot 2\pi\right) \cdot \omega \cdot 100 + t_{global} + \phi\right) \cdot A$$
These horizontal slices are copied from an offscreen processing buffer directly onto the main visualizer canvas. High-DPI displays are supported by dynamically scaling the backing buffer to the physical pixel density via the device pixel ratio ($DPR$), preventing pixelation on high-resolution screens.
Temporal motion blur is achieved through a temporal recursive filtering equation:
$$I_{onscreen}(t) = (1 - \alpha) \cdot I_{offscreen}(t) + \alpha \cdot I_{onscreen}(t - 1)$$
where $\alpha$ represents the decay coefficient mapped to the Temporal Decay slider.
For sound synthesis, the Web Audio engine uses an OscillatorNode configured with a clean triangle waveform, routed through a GainNode and a StereoPannerNode. Panning ($p$) is mapped linearly across the horizontal X-axis ($p \in [-1, 1]$), while frequency ($f$) is calculated log-linearly based on the vertical Y-axis:
$$f = f_{min} + \left(1 - \frac{y}{H}\right)(f_{max} - f_{min})$$
where $f_{min} = 200\text{Hz}$ and $f_{max} = 1100\text{Hz}$. Exponential gain ramp envelopes are applied to eliminate audible clicks on attack and release.
Future Directions & Innovations
Upcoming updates to the webcam phase and visual sonification pipeline are focused on migrating coordinate transformations and audio generation to parallel processing environments:
- WebGL Fragment Shaders: Moving the visual coordinate wave translations directly to GPU fragment shaders. This will enable complex multi-directional waves, chromatic aberration filters, and real-time edge-detection processes.
- Biometric Audio Modulation: Mapping real-time average pixel luminance or motion vector fields to synthesizer nodes, turning the workspace into an active bio-acoustic feedback loop.
- Rolling Shutter Emulation: Buffering historical video frames inside a cyclic array. By rendering sequential scanlines from progressively older frames, the simulator can model physical rolling shutter distortions and time-delayed visual patterns.