Overview of Phase, Waves, & Perception
This simulation implements real-time spatial and temporal manipulations to demonstrate the fundamental properties of wave physics, coordinate phase offsets, and auditory sonification. A phase shift represents a displacement of a periodic wave along its propagation path relative to a fixed baseline reference. By applying mathematical transformations to visual scanlines, we convert static or streaming imagery into active dynamic wave representations.
In physical environments, phase properties are central to wave mechanics, optics, acoustics, and signal processing. In biological sensory systems, visual processing relies heavily on motion detection cells tuned to spatial and temporal phase shifts. Through high-speed visual translations and integrated sonification, this simulator bridges the gap between mechanical wave equations and multi-sensory human perception.
Operational Guide & Controls
Configure the simulation using the custom parameter inputs and real-time interaction nodes:
- Phase Shift Slider: Sets the initial shift (from 0 to 360 degrees) of the sine wave function. Moving this slider dynamically offsets the wave sequence up or down, visually demonstrating standard phase progression.
- Wave Amplitude Slider: Alters the maximum displacement of each visual row. Increasing this value creates larger horizontal offsets, distorting the active test grid or live video feed.
- Wave Frequency Slider: Adjusts the spatial frequency of the wave cycle. Higher settings increase the number of complete sine oscillations per vertical screen block.
- Motion Blur / Decay Slider: Employs temporal frame blending by layering semi-transparent filters between rendering cycles. A high value creates long, trailing visual pathways.
- Enable Webcam Button: Transitions the background source from the animated geometric test grid to your live front-facing camera.
- Interactive Canvas: Click, tap, or drag anywhere within the viewport to spawn an visual ripple at that point. If audio is turned on, a synthesized wave is generated with frequency and panning mapped directly to the coordinates of your interaction.
Technical Architecture & Math
The application is built entirely using vanilla JavaScript, HTML5 Canvas, and the Web Audio API, optimizing performance and eliminating heavy rendering framework dependencies.
Visual Scanline Displacement: Rather than performing intensive pixel-by-pixel updates across the entire image buffer, the simulation divides the frame into horizontal blocks of size dh. For every block along the Y-axis, an offset value is calculated according to the formula:
X_offset = sin( (y / height * 2 * π) * frequency * 100 + run_time + phase_shift ) * amplitude
These horizontal slices are copied from an offscreen processing buffer directly onto the main visualizer viewport, yielding real-time performance on a wide range of devices.
Real-time Audio Synthesis: The Web Audio engine relies on an OscillatorNode combined with an exponential amplitude envelope mapped to a GainNode. When a coordinates click is received:
- Pitch Mapping: The vertical Y-coordinate modulates the fundamental frequency of a hybrid Sine-Triangle oscillator, generating high-register tones at the top and resonant low-register hums at the bottom.
- Stereo Panning: The horizontal X-coordinate maps directly to a
StereoPannerNode, shifting the auditory balance between left and right outputs to coordinate with the cursor's spatial location.
Future Directions & Innovations
While the present application focuses on real-time CPU-based spatial scanline manipulation and standard coordinate audio feedback, upcoming development tracks plan to introduce higher complexity modules:
- GPU-Accelerated Shaders: Moving coordinate wave displacement routines to WebGL vertex and fragment shaders. This transition will facilitate complex, multi-directional wave patterns, real-time chromatic aberrations, and spatial edge detections.
- Biometric Data Mapping: Linking average visual velocity or pixel luminance changes directly to synthesizer parameters, transforming the sonification workspace into an active bio-acoustic feedback loop.
- Temporal Frame Delay Buffering: Storing sequential video frames inside a cyclic array. By rendering different rows from different historical frames, the simulator can demonstrate authentic temporal phase shifting, creating realistic physical models of rolling shutter distortions.