Code of Music

Timbre

Textured Harmony

Idea

I love pulse music - just repeat chords at me over and over, and I’ll be totally happy. The most famous examples of this might be some of Steve Reich’s pieces (e.g. the first movements of Music for 18 Musicians and Electric Counterpoint). One piece, I really love for super fast pulses is Sufjan Stevens’ The Human Plague.

So, my idea was that I could use a tremolo with a large depth to automatically create pulses. The user might be able to control parameters to them like volume or tremolo depth with simple mouse control.

Finally, I needed to pick chords to pulse. Since this week’s topic is timbre (rather than harmony), I didn’t implement anything too crazy and instead just transferred the first line of unique chords in Debussy’s ‘Sarabande’ into Javascript list form.

Implementation

I went again with a largely single-input mode of interaction. Holding the mouse down activates the instrument. Moving the mouse up and down changes numerous musical parameters. Like the past assignments, I experimented with how I implemented each of the objects.

One parameter that seems to come up constantly is whether the interface is active or inactive. This determines whether sounds are playing, objects are animating, colors are changing, etc. But, elements should not just immediately switch between states, rather they should fade. I think I came up with a pretty clean solution. At the global level, I declare a variable active and set it to false. This variable gets gets passed into any relevant functions/objects that depend on it. Then, each variable that changes according to activation is set to an object, rather than a value, with three parameters:

Finally, using the p5’s awesome linear interpolation function lerp() and passing in the global active state, variables will fade gradually between states.

For example, in sketch.js:

let active = false;

...

function mousePressed() {
    active = true;
}

function mouseReleased() {
    active = false;
}

...

function draw() {
    cursor.update(active);
    cursor.show(active);
}

Then, in Cursor.js:

function Cursor() {
    this.height = {
        curr: 2,
        false: 2,
        true: 48
    };

    ...

    this.updateSize = function(active=false) {
        this.height.curr = lerp(this.height.curr, this.height[active], 0.1);

    }

}

Challenges

I struggled a lot to get the pulses sound like separate events like in the recordings I was inspired by. Using reverb created a more pleasant tone to me, but it of course obscures the sharpness of each pulse.

I was also really hoping to find a way to hide the mouse in the canvas. In Processing, there is a function called noCursor(), but there did not seem to be an equivalent in p5.

Play it. (Supported by Chrome.)

View Source in Github.

A blog for displaying Willie Payne’s progress in the NYU ITP Course “The Code of Music.”