Jazz.Computer is an interactive song that responds to the position and direction of your scrolling that is generated live in the browser.
Interaction
Jazz.Computer gives players the ability to participate in the music: change sections, chords, arrangements and timbres, by doing the thing that most of us are doing on our phones and computers most of the time: scrolling. The song and visuals are about scrolling and how it makes me feel. Sometimes up. Sometimes down.
Like two of our other projects, Scroll-O-Meter and Richer, Jazz.Computer recontextualizes the habits that our technology imposes on us.
Like two of our other projects, Scroll-O-Meter and Richer, Jazz.Computer recontextualizes the habits that our technology imposes on us.
Music
Creating an interactive song like Jazz.Computer is very different from other music production — sort of like patching together an elaborate modular synth and then letting listeners fiddle with the knobs. I don't have full control over what happens. I set up a structure with which users can improvise and explore. Jazz.Computer is a potentially endless song with infinite variation.
Instruments, effects, tempo, chords and sections respond to the distance and direction of your scrolling and your position on the page. More specifically, at the top of the page, the song is at 130 bpm and 65 bpm at the bottom. Correspondingly, the arrangement of the song also changes with the tempo. The sounds of instruments and effects are interpolated in a similar way, like keyframes or automation points.
The chord progression is handled differently in order to feel like the chords are always moving forward. A Markov Chain describes how chords transition from the current chord to the next (pictured below).
After you scroll a certain distance, the song will transition to the B Section where the chords are flipped and the top of the page uses the chords from the bottom.
To get a better sense of what's going on under the hood, check out http://jazz.computer/#GUI. A few instances of Dat.GUI will appear and give you control over a lot of the instruments and effects. It's not very well organized, but might be fun to mess around with.
Instruments, effects, tempo, chords and sections respond to the distance and direction of your scrolling and your position on the page. More specifically, at the top of the page, the song is at 130 bpm and 65 bpm at the bottom. Correspondingly, the arrangement of the song also changes with the tempo. The sounds of instruments and effects are interpolated in a similar way, like keyframes or automation points.
The chord progression is handled differently in order to feel like the chords are always moving forward. A Markov Chain describes how chords transition from the current chord to the next (pictured below).
After you scroll a certain distance, the song will transition to the B Section where the chords are flipped and the top of the page uses the chords from the bottom.
To get a better sense of what's going on under the hood, check out http://jazz.computer/#GUI. A few instances of Dat.GUI will appear and give you control over a lot of the instruments and effects. It's not very well organized, but might be fun to mess around with.
Technology
Everything in Jazz.Computer is synthesized and effected live. The only sample is the voice, which is pre-recorded but triggered and effected in real-time. This is made possible with a recent browser technology called the Web Audio API and a library built with this API called Tone.js.
I developed Tone.js in order to realize ambitious interactive songs like Jazz.Computer. Tone allows a developer to produce and arrange music entirely in the browser.
I developed Tone.js in order to realize ambitious interactive songs like Jazz.Computer. Tone allows a developer to produce and arrange music entirely in the browser.
Visuals
The visuals follow the music closely and apply a few of the same techniques. Each instrument has a corresponding visual element which is triggered along with that instrument. The colors, sizes and animation speeds are interpolated in a similar way to the sounds.
The visuals were created using a combination of generative graphics with three.js and stop motion animation. The color blending was created with a simple custom shader to create unique color combinations where shapes overlap.
The visuals were created using a combination of generative graphics with three.js and stop motion animation. The color blending was created with a simple custom shader to create unique color combinations where shapes overlap.