A visualization tool for Vega trades. Part audio, part visual. Could be described as an art project...
The purpose of this project is to creatively visualize and hear trades that are taking place on Vega. Using GraphQL, the Vega API, Svelte and Tone.js, we visualize blocks being mined with block sizes shown illustratively on the page. We also have an audio feature that attributes musical notes to the size of each block. Initially we set the frequency of the notes based entirely on the block size. That was painful on our ear. Instead, we have predefined notes that can be used. These are the same notes as used in the Imperial March theme tune, from Star Wars.
How it's made
We used GraphQL, the Vega API, Svelte and Tone.js. We were mainly thinking about the audio, but tried to make it look slick too. Tone.js is a Web Audio framework for creating interactive music in the browser. We combined this framework with GraphQL and the Vega API. Every block created houses trades in it. The number of trades determines the frequency of the sounds generated by Tone. Purely tying frequency to block size sounded.... awful. So we limited the notes available to those that are in the composition from the Imperial March theme tune, from Star Wars.Technologies used