dhmit / sonification

15 stars 5 forks source link

Spatial instrument #66

Closed vedadehhc closed 2 years ago

vedadehhc commented 2 years ago

This PR adds a spatial instrument to the frontend for interacting with multiple sound samples. The spatial instrument works by having various "sound points" in a 2D space, where each sound point represents a single sound sample in a specific location. The sound that the user hears is based on the location of the mouse pointer relative to each of these sound points. That is, the audible sound is a combination of all the sound points, where sound points closer to the mouse pointer sound louder, and those further away sound less loud.

The PR adds the function SoundPoint to represent sound point objects, and to help ensure that correctly formatted inputs are given to the spatial instrument components. Each SoundPoint has three properties: x, y, and sample.

The PR adds two main components:

SpatialInstrumentInternal allows the user to specify a list of SoundPoints, along with certain display options. This component renders as an svg, with points representing each of the sound points, and a field around the mouse representing the audible ranges.

SpatialInstrument is a wrapper component for SpatialInstrumentInternal which only takes a list of samples. It then automatically places the samples in a circle of sound points in the 2D space.

image

In the image of the spatial instrument, each black point is a sound point, and the size of each point is proportional to how loud that sample is currently being played. The blue disks represent the audible ranges around the current mouse position (mouse not shown). The outer disk represents the limit beyond which sound points are not audible at all. The inner disk represents the distance at which sound points are 50% audible.