SCROLLHOLE

Title
Website screenshot
Website screenshot
Website screenshot

Inspiration

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

Eric knew a little p5, but both of us came to love this JavaScript library. And neither of us knew Tone.js, which is super feature-rich! We also learned how difficult it is to generate novel things using machine learning. To incorporate our original idea of sound morphing, for example, would have required a lot more data acquisition and cleansing.

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.