Step 1: Grab a bunch of panoramas off Google StreetView by writing a Chrome extension.
Timeline
A couple of days (Mid-2019-ish)
Technologies
Canvas API, Google StreetView, Python
A little experiment creating audio visualisations using landscape silhouettes.
(There was some broader context within a school project from aaaages ago which I don’t recall 🧠🚫)
Step 2: Take each panorama and…
Step 2.5: Isolate the sky in Photoshop (using an automation tool for efficiency).
Step 3: Write a Python script to convert the isolated sky images into an array of integers representing the offset from the “base” horizon. Use this array to generate a line on a webpage using the Canvas API.
(This was technically 2 steps, but I suppose it makes up for the decimal from earlier?)
Step 4: Take an audio file and overlay its realtime frequency graph, similar to a traditional audio visualisation. Bass on the left, treble on the right.
Step 5: Calculate the offset between the horizon and the frequency graph at each point, assigning an “average offset” to each panorama.
Step 6: Profit Every time interval (I use the BPM of the music for this), pick the horizon with the least offset relative to the current frequency graph.
I also added some logic to pick the second-least offset in case a horizon repeats, since it looks aesthetically off if the horizon doesn’t change for a beat.
Follow these steps perfectly and you, too, can create your own audio visualisations using horizons extracted from panorama images from Google StreetView. Or you can just use this one. I won’t judge.
I never judge.