The how & why of A Beautifully Discordant Metronome

First off: If you haven't already, you should go look at A Beautifully Discordant Metronome.. And ideally, when the consent prompt comes up, you choose audio.

It's OK. You don't have to keep listening, you can close it after a few seconds.. Especially if you hit it during a particularly bad time for my heart.

You're not supposed to enjoy it in most cases. It is - at best - a little boring, and - at worst - highly visually, verbally and tonally disturbing.

A Beautifully Discordant Metronome is a creative coding art piece I conceived years ago; The original idea was to create an abstract visual rendering of my current heart rate. As someone who lives with chronic pain, my heart rate can vary wildly depending on activity, and I can't tell you how many times it has spiked into the "a professional healthcare worker would tell you to lie down now" territory.

Lately it has gotten better; I've finally learned the art of meditation, and can frequently keep my heart rate below 100 BPM at least if I try.

That doesn't make this project any less interesting, though, because to use two of my favorite words.. shit gets fucked sometimes. That's sort of why the working title for the piece was The Deathwatch Project; While it didn't actually track whether I was alive, the fact that my heart rate spikes so hard sometimes is clearly a bad thing.

Anyway, let's talk about the technical details.. But first: This project took a lot of time to craft and is not something that is going to be monetized in any rational means, so please consider sending a tip my way.

How "A Beautifully Discordant Metronome" works

The broad strokes is this: I coded a website that would query the Fitbit user API endpoint for my own heart rate every 10 minutes, and store it in a database. Then, any time anybody visited A Beautifully Discordant Metronome, it would query the database for the latest heart rate value, and use that to render the page with visual, textual and auditory content. If you kept the page open, every minute it would re-check the database for a new value and re-load the experience.

Here's what changes with the heart rate (and how I built it with accessibility in mind, with a caveat):

The first aspect I coded in was the background colors: It starts out at a nice, cool green, and as the heart rate creeps up it shifts to hues of yellow, orange, and then.. Red. Red is bad, in case you weren't aware. This is also not a pre-set range; It's literally calculating a hue value based on my BPM.

Next, it also loads a short phrase from a library of phrases I've written to reflect what my heart rate is. In this case, I did a series of phrases that get picked based on ranges; every 10 BPM increase results in a different phrase being rendered, selecting from a variety of options.

This phrase - as well as the background - pulse at a rate based on my current BPM. There's also some.. Additional animation that may occur if my heart rate is high enough.

Now, in addition to all this, we have the optional auditory experience. This too is controlled by the heart rate in two ways: First, the tempo is directly tied to the heart rate. Beyond that, though, we have 3 "tiers" of auditory experiences based on my heart rate.. At the lowest BPM range it's a relatively calm, soothing sound. A nice, simple, slow-paced metronome.

As my heart rate increases, though, we end up into territory most folks will experience: A somewhat disturbing drone in the background accompanies a more insistant piano that is not so much tapping out the beat as it is hammering it.. slightly. It's audio engineering has also shifted, and the tone captured of the piano itself is less musical, and more percussive.

If you get into the higher tiers of heart rates? Well, let's just say it's not an experience most folks will enjoy; Only the fans of glitchcore and industrial will find the discordant tones uniquely beautiful, while the rest will want the sound to stop in relatively short order.

The tech and limitations of A Beautifully Discordant Metronome

While I'm incredibly happy with how this project turned out, it isn't without it's limitations.

First off: Fitbit only updates it's own data every 10 minutes, which means that the data displayed could be outdated by nearly 20 minutes depending on the reliability of my own queries to the API being done every 10 minutes.

Next: It was an absolute pain in the ass to develop the auditory portion. While audioContext - the JS functionality I used to handle queuing up all the various pieces of audio - is a beautiful thing, it's also somewhat complex to work with from the perspective of someone who's used to old-school audio sequencers like MOD Tracker.

Oh, and of course, Apple has shat the bed with audioContext at multiple occasions. While the latest iOS versions seem to work fine with it, my old test iPhone running iOS 15 does not.. And it's not like audioContext is new or anything, it's just Apple not giving a brushed metal shit about actual web standards, and the fact that they are still allowed to lock users' into using Safari's web rendering engine on iOS no matter what browser a user has is absolute bullshit (relevant: buy my fuck American corporatocracy morale patch).

As far as the rest of the tech stack goes, this is just bog-standard PHP, MySQL and Javascript with SCSS for the CSS pre-processor. I like to keep things simple, and it just plain fucking works.

Future plans for A Beautifully Discordant Metronome

Besides reducing how hard I hammer the Fitbit API, I'm storing results in a database so I can later provide an "experience selector"; I'll note significant dates/times in my life and make it so folks can queue those up to see just how things went for me. Additionally, I may provide the ability to shuffle through my "worst days", for those who want to see just how often those get captured.

I'm not sure when that feature will be developed, but it will probably be closer to the end of the project itself.

So, that's it. That's the breakdown of "A Beautifully Discordant Metronome".

Let's hope I'm alive long enough to collect a lot of interesting data.