vivian lim ⭐

okay this submission scope crept wildly out of control from what i first intended (which was to make a song normally using a tracker or fl studio)

but then I wondered: would it be possible to collect performance timing info from a running cohost page and transmute that into bleeps and bloops

12 hours later here we are. the attached mp3 is some snippets from a live session which I then applied some effects in an attempt to make it a little more interesting. i feel like it could be ...more but I already spent way way longer than I wanted to on this.

here's a recording i took of that session: https://www.youtube.com/watch?v=OYWbECB1FRQ
partway through I scroll around to cause more network requests to happen to be included in the set of notes each loop.

the code's over here if you're curious. if you want to try it yourself (it should work on any website!) there are instructions there too.

at a high level here's what this is doing:

1. collect performance entries from the current page via window.performance.getEntries() and get their timings
2. divide a measure into a number of 'buckets' (i don't know music theory)
3. define the set of buckets; the number of measures * the number of buckets per measure
4. try to fit the perf entries into a bucket. if they go past the end, they wrap around until they fit into a bucket (modulo)
5. depending on which measure a bucket is in, drop some of its items randomly ('sample factor')
6. stitch together a composition based on a specified ordering of measures. for example [0,1,0,2,0,1,0,3] will repeat the first measure 4 times, the second measure 2 times, and the third and fourth measures will play once
7. go through the measures in order and transform the perf entries into notes:
   a. group entries in a bucket by content type.
   b. the content type map defines some properties that the note will have, like the shape of the wave and some multipliers
   c. multiply the transfer size of the entry (e.g. if downloading a png, how big it was), and come up with a frequency using the mapping sizePitchFactor and pitchCap
   d. map that pitch to the nearest note by using the tonal library (many of the following operations will also use tonal)
   e. map that note into the nearest note that is in the current key's scale
   f. emit a note
   g. if there were other entries with the same content type at the same time, try to find a matching chord in the key
   h. take n notes from that chord where n is the number of other entries
8. play them in order until reaching the end of a loop. then the process repeats if 'play' is checked.

I should have expected that this would take a lot of effort since it's my first attempt at procedurally generated music and i have no idea what i'm doing, but... welp. it feels appropriate though