The interface, built with p5.js, functions as a rhythmic clock. The outer rings represent the static base track, while the inner rings undergo 'Phase Shifting'.
The Synchronization Challenge: The Synchronization Challenge: Running UI drawing processes (p5.js) and audio processes (Web Audio API) on the same JavaScript thread introduces latency. This was resolved by pre-scheduling Tone.js MIDI events into the buffer with a calculated offset, ensuring that the p5.js visual sweep aligns perfectly with audio transients at a millisecond level (latency compensation). offset calculado, asegurando que el barrido visual de p5.js coincida exactamente con los transitorios del audio a nivel de milisegundo (compensación de retardo).