Overview
An interactive live musical composition built with p5.js, inspired by the theme of space exploration.

Tools
Ableton
OGS
p5.js
Procreate

Timeline
May 2022

Concept

The user is on a spaceship exploring space and interacting with an astronaut and aliens. This is also an interactive musical experience, as each button functions as a different musical piece.

Process

I used p5.js to create a musical board with a space theme. Clicking on different images (star, planet, astronaut, etc.) will build different drum beats or rhythms. The fun part is that the audience won’t know which sound will come out for each image since it isn’t obvious like the piano keys. There will also be two sliders to control the BPM and the volume of the overall performance.

Each image will also correspond to a visual change, along with the addition or removal of sound. For instance, if I press the planet, the drum beat will begin, and the aurora will appear in the background. 

I decided to get the visual part done first, so I created a canvas with various images on it. I also created twinkling stars in the background by using the ‘random’ element on p5.js as shown below.

Then, I designed the canvas further by adding my drawing of an inside view of a spaceship so that it feels like the user is riding it. I then developed JavaScript so that images change in size and move to different places according to what the user presses. Below is a portion of the code.

Finally, I connected the program to Ableton for the audio.