The inspiration came from desiring a simplicity in user interaction to produce sound and visuals. We chose the interaction of scrolling, where the speed of scrolling controls certain parameters of both audio and visual.
What it does
SCROLLHOLE is a tunnel-like UI where scrolling forwards plays audio samples forward and progresses forward through a "score", and scrolling backwards does the opposite. Scroll long enough, and you'll encounter new "regions" of the audio and visual design.
How I built it
Gina designed the sounds and audio playback, as well as the general concept for the project, and Eric designed the visual animations and handled event sequencing. The visuals are almost entirely produced with p5.js, and the sounds are all generated with Tone.js.
Challenges I ran into
We ran into many challenges! Fortunately, none of them ultimately compromised the vision. Getting the radial background to show up and change, for example, required clearing the draw() method first so that old shapes were not still on the screen. Figuring out the bounds of Tone's GrainPlayer was also important to not overload the audio processing.
Accomplishments that I'm proud of
We think it's an innovative, fun, and somewhat addictive interface! We're proud as heck of that.
What I learned
What's next for SCROLLHOLE
We'd like to hook up Magenta.js to generate drum accompaniments to SCROLLHOLE, and use Tone.js to make a sequencer from clicking on shapes, representing on/off MIDI notes in a sequence.