Skip to content
A galaxy of bubbles creating tones.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Bubble Galaxy

Bubble Galaxy is a generative sound experience. In Bubble Galaxy, each Bubble (which can take the form of ellipses, rectangles, and triangles) is on a mission to separate itself from most of the other Bubbles. At the same time, Bubbles are seeking out a subset of other Bubbles (controlled by you!).

Bubbles make sounds when they get within a predefined distance relative to the size of your web browser. This means that each moment of Bubble Galaxy is likely a completely unique sound experience.

How to Play

In general, you don't need to do much here, which admittedly may not very fun. This was designed more as a passive music-generation experience. Still, there are a few things you can do:

  • Adjust the tone slider. This will change the sound that Bubbles make when they get too close.
  • Toggle what Bubbles each Bubble seeks. The option here are:
    • Color: Bubbles seek out other Bubbles set to the same intervals from their key's root tone (see more info below).
    • Shape: Bubbles within the same key.
    • Unlike: Bubbles that share neither shape or color.
    • None: Bubbles don't seek anything.
  • Change the size of your browser (if you can). This will affect the space Bubbles have to move, the distance required for Bubbles to play sound, and potentially the size of the Bubble itself.

Audio Notes

Tone Assignment

Each Bubble is assigned a tone across four different keys, all based on the root tone (controlled by the tone slider).

Each key increases in frequency in the following manner:

  • Key 1: Root tone
  • Key 2: Fifth above root
  • Key 3: One octave above root
  • Key 4: Fourth above octave of root

Each key features the same set of intervals: root, third, fourth, fifth, octave.


If you're using headphones or a quality hifi system, you should notice that the placement of the audio output within the stereo field changes with each tone. The amount of panning to the left or right is dependent on the position of the Bubble.


This project couldn't have been done without Daniel Shiffman's excellent (Nature of Code book)[], and his course I took on Kadenze.

You can’t perform that action at this time.