Summer break is almost over! Hard to believe. I went to Eyeo 2014 in Minneapolis in June, visited Yellowstone and the Grand Tetons, and since then, have been hanging out in California teaching myself JavaScript.

I have also been working on a music visualization project with Jason Sigal inspired by star trail photography. The visualization uses p5.js, a JavaScript animation library being developed by Lauren McCarthy and based on Processing, and a sound library Jason is developing for p5 based on the Web Audio API.

Progress on the music visualization has been tediously slow as I have been teaching myself JavaScript in parallel to developing the project. I have been learning JavaScript through a mix of online readings, Lynda videos, and JavaScript workshops held by Girl Develop It San Francisco.

Thankfully, the visualization is finally starting to have a musical quality! The small size of these screenshots dosen’t quite do justice to all the beautiful details of the music visualization. Each ring of circles represents one frequency wave being analyzed via FFT. The size of the circles and color transparency is mapped to the volume of the song. The rings of circles are built over the course of the song, “painting” musically in a sense.

I like the ripply distortion affected to the ring of circles by the changes in the music. For next steps, I want to have the visuals change to beat detection as well as volume, will finesse the colors, and work on emphasizing the distortion to the visuals, and think about more patterns to create beyond radial.

An earlier screenshot of the visualization when it looked more like actual star trail photography (but was boring to watch as fairly static). Used background CSS gradients which faded out with jQuery (DOM manipulation JavaScript library):

Goal is to have this project finished and online by the end of August!