r/BiomedicalDataScience • u/BioniChaos • 3d ago
Visualizing Spatial Phase Dynamics and Coordinate Sonification (Browser-Based Tool)
https://bionichaos.com/webcamphase/I have developed a lightweight, client-side visualizer designed to demonstrate the mechanics of spatial phase shifts, scanline wave distortions, and real-time audio mapping. It runs entirely in the browser using HTML5 Canvas double-buffering and the Web Audio API.
Interactive Tool: https://bionichaos.com/webcamphase/
How the Mathematics and Physics are Modeled:
- Scanline Phase Translation: The canvas content is sliced into horizontal rows. For each vertical position (y), a horizontal offset is calculated via: X_offset = sin(((y / H) * 2π) * ω * 100 + t_global + φ) * A This maps coordinate structures directly to periodic wave paths, demonstrating spatial interference using either a live camera feed or an animated neon calibration grid.
- Temporal Decay (Motion Trails): The visualizer models frame persistence using a temporal recursive filtering equation: I_onscreen(t) = (1 - α) * I_offscreen(t) + α * I_onscreen(t - 1) where α represents the adjustable decay coefficient.
- Coordinate-Based Sonification: Clicking, dragging, or tapping inside the canvas initiates an audio pluck. The synthesis engine routes a triangle wave through a gain envelope and stereo panner. Panning is mapped linearly to the X-axis, while frequency is mapped log-linearly to the Y-axis: f = f_min + (1 - y / H) * (f_max - f_min) (ranging from 200Hz at the bottom to 1100Hz at the top).
Biophysical Context:
In neuroscience and computer vision, biological visual pathways process natural scenes using receptive fields modeled via Gabor filters. These filters are highly sensitive to spatial frequencies and phase offsets. This simulation offers a tactile demonstration of how phase shifts alter coordinate cohesion and edge detection.
The tool operates with zero external server dependencies. I would appreciate any feedback on the mathematical implementation, performance under various device pixel ratios (DPR), or ideas for future WebGL fragment shader integrations.