I should call this COVID Code, since I started playing with it during the lockdown. It’s a bunch of audio-related programs implemented in p5.js, the Web version of Processing built on top of Javascript. All these programs live in my account at p5js.org. They were developed to run on a laptop, so I have no expectation that they will be usable on mobile devices, at least yet. For esoteric Web Audio reasons, you’ll need to click the mouse on the window to fire up these programs once they load. Also, I developed them for Chrome, where they look great, but other browsers do funky things with the UI controls.

Grain Paint

Grain Paint – Uses granular synthesis, specifically a Granular class I built, to create 20-second computer music pieces by drawing a score with a paint-like interface. As you draw clouds of points using various Cloud Tools, you’ll hear the points as grains of sound in real time. You can play the piece at any time to hear how everything sounds all together, and you can record your masterpieces. At the grain level, you can manipulate several parameters, including the grain’s waveform, envelope, stereo pan and loudness. Some of the Cloud Tools and two of the Grain Parameters have a Velocity setting so that the parameter can sweep in real time as you draw. This interface might take a little time to feel comfortable with, but it provides time-varying parameters, which is a must have for non-trivial pieces. Finally, you can save and reload a score. You might need to go full screen on this if scroll bars appear. Give it a whirl!


The following sonifications of fractal and chaotic systems, which also use my granular synthesis class, started as programs I presented in my Friday Forum Fractal Fun session for the DEAR program.

  • Perlin Smokies – Very simple use of Perlin noise to continually render fractal mountain silhouettes like all those panoramic shots of the Great Smoky Mountains. Uses four Granular streams that follow the four contours to produce a ghostly wind sound.
  • Gumkowski-Mira Fractal – A chaotic system from two nuclear physicists at CERN that generates a wealth of interesting orbits you can explore by tweaking one of its parameters. I slowed this version down from the one on the DEAR page so that the audio is less frantic. For more, check out this paper from Christian Mira himself, who seems rather chagrined at the attention given to his work…
  • Lorenz Attractor – This famous chaotic system uses 3 variables and is best visualized in 3D, but I’ve picked 2 variables for the horizontal and vertical dimensions and faked depth for the third dimension, as you’ll see. For more on this system, which started as a simple model for convection, check out its Wikipedia page.
  • Mackey-Glass Attractor – Another 3-variable chaotic system rendered in 2D with depth. This one has a tau parameter, which generates more exotic and chaotic orbits as it increases. For more, check its Wikipedia page.
  • Logistic Map – Another famous chaotic system, this one in one dimension with likely the simplest formula imaginable: xt+1 = rxt(1-xt). The program runs in two phases: first rendering the “interesting” region of the map, as illustrated below, and then sonifying vertical slices beginning at the left edge, with r under the control of arrow keys and/or the mouse. For more on this system, check out its Wikipedia page.
Logistic Map over its “interesting” range
  • Flocking Oscillators – Standard Boid flocking, a la Craig Reynolds, shamelessly stolen from the example on the p5js.org Examples page and modified so that each Boid drives an oscillator controlled by its current location. I reduced the size of the flock and slowed things down to make it sound less intense, and I lowered the alignment weight to make it more random over time.

Synthesis Demos

  • Frequency Modulation – Simple FM synthesis demo using sine waves for both the carrier and modulator. Mouse drags control the modulating frequency (horizontal dimension) and modulating amplitude (vertical dimension). A slider controls the carrier frequency. Displays real-time spectrum and waveform of the resulting wave as it plays. The level is set relatively low, but you may want to ride the volume control on your computer if your ears complain. For more on FM synthesis, check out its Wikipedia page.
  • Amplitude Modulation – Generates way simpler spectrum than FM, which is why AM synthesis is not very common, but it’s easy to see the two sidebands per peak in the demo. I used a triangle wave for the carrier to get more peaks to play with. Same UI as the FM demo. For more on amplitude modulation, check out its Wikipedia page.
  • Ring Modulation – Variation of amplitude modulation that eliminates the center frequency, leaving only two sidebands per peak. Commonly used as an effect instead of a synthesis method, so I’ve used a sound file for the carrier, specifically my daughter Christine singing Home on the Range when she was 4 (significant awww factor, especially with her personalized lyric at the end). Same UI as the AM Demo. For more on ring modulation, check out its Wikipedia page.

Back Home

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s