prepared basketball game plans with music based timing

Posted on March 15, 2023

when training and executing prepared game plans in basketball, the synchronization of all players is important but difficult to achieve. friends and i had the idea to improve synchronization by augmenting prepared game plans with music pieces. i implemented a javascript library to visualize and sonify such augmented prepared game plans, which are specified via an embedded domain specific language. this EDSL input renders as this output for example.

notice that identifiers for players and arrows used in the EDSL input directly originate from the court svg file. the library is oblivious to the number of players and arrows, their identifiers, and their positions and shapes. so users can use any graphical svg editor like inkscape or adobe illustrator to modify the court svg file or create new ones as they need.

i started to implement a graphical user interface to specify prepared game plans to replace the textual embedded domain specific language. i used haskell and obelisk, based on ghcjs, Reflex-DOM, and functional reactive programming, for this.

click a player and an arrow to specify that the player should move along this arrow. timelines appear at the bottom. drag green sliders to specify the start of player moves. drag red sliders to specify the end of player moves.

notice once again that identifiers for players and arrows used in the generated output directly originate from the court svg file. the gui is oblivious to the number of players and arrows, their identifiers, and their positions and shapes. so users can use any graphical svg editor like inkscape or adobe illustrator to modify the court svg file or create new ones as they need.

i have not hooked this gui to specify a prepared game plan up with my earlier code to render a prepared game plan yet. please ignore the animate button in the gui.