Screenshot 2017 03 11 14 23 25

I have been imagining a sort of outer space audio physics interactive art environment and have tried to create it for this final project. I was inspired by an outer-space spray paint art project I did growing up at camp.

The environment does not work in the safari browser because of audio input issues. It works well in Chrome. You can try it out and see a video of the environment below.

Nature of Code 2017 Final Documentation p5 Interactive Audio Constellation Environment from Daniel Silber-Baker on Vimeo.

A description of the moving parts

Here is a legend diagramming all the interactive elements of the environment

Nocfinal legend

Enlarge Image

The outer space physics interactive art environment is made up of

speakerBox: reading in the amplitude of the song being played and is mapping it to properties of an ellipse element

Orbiters: system of boids following physics set in the program. New ones can be generated by the user by pressing the button in the top left hand corner

Particles: created using particles js. Their behavior is set to be onClick = create new particles and onHover = repel.

Celestial Mist: The project posted on the web is currently using the fft input of the song being played. In the version seen in the videos the mist is reading in the ftt from the computers microphone and mapping it to a set of ellipses which are set to have low opacity values using RGBA and colors being mapped to the input as well.

The program is set up to be dynamic and able to create different paintings each time based on user interaction and randomization programmed into the code. Also trying to create an interaction where improvisation is possible between computer and human. The program changes the velocity of the objects moving through space over time, which gives the environment the ability to continue changing over time.

Here is a video from the beginning stages of the environments, and this one highlights the particles, which you can interact with. See the mouse interaction at the bottom of the screen.

Particles Demo

begCycle particleInteraction from Daniel Silber-Baker on Vimeo.

Here is another video of the environment as it first begins to run. This video highlights the orbiters, which users can make more of by pressing the button in the top left corner

Orbiters Demo

begCycle oribters from Daniel Silber-Baker on Vimeo.

Here is a video of the environment after letting it run for a couple minutes

endCycle from Daniel Silber-Baker on Vimeo.

And here it is after a few more minutes running

lettingItRun from Daniel Silber-Baker on Vimeo.

Some Alternate Universes

In the ‘final’ version of this project I gave the p5 canvas no background color which reveals all of the particles in the background, and creates the color streaks left by the elements paths. There is however an alternate universe in which their is a background to the canvas, and that one is fun to explore as well

nature of code p5 constellation with canvas background from Daniel Silber-Baker on Vimeo.

* In some of the videos you may notice a little trick with the button in the left hand corner. I have made the button element content editable in the html so that I can live edit what the button text is. This has a couple interesting possibilities, one of them that I am trying here, is to add a layer of improvisational documentation, by typing what the button is doing while pressing the button. Very meta.

Breakdown of the code