Solar Symphonic
Interactive IV Professor Mike Minerva
p5.js
Tone.js
GLSL
Illustrator
Procreate
Audacity
important links
about the project
Solar Symphonic is a tiny, tactile music toy where you're presented with a colorful solar system to poke, prod, and play with. Each planet orbiting the sun has a voice, and when they pass a certain point in their orbit, they sing a note. Solar Symphonic is not meant to be a series music composition tool, but rather a playful sequencer with elements of randomness and tactile play.
my role
- Conducting competitive analysis and product research
- Art direction and design
- Producing visual assets and illustrations
- Developing a functional game in JavaScript
- Designing pleasant and playful sounds
goals
Make an interactive music toy that encourages play and exploration
Create fun and tactile interactions
Craft a playful aesthetic through code
process
inspiration
I drew inspiration from both actual music tools like the Dato DUO and the Playtronica Orbita, as well as from games and interactive experiences like Oddada, Heliopedia, and GNOG. All of these tools and games are built around engaging tactile interactions, learning, and exploring. Oddada, the Dato DUO, and the Orbita are specifically designed to make music creation more accessible and more playful. They all informed my library of interactions and metaphors.
visual design
Because I had a pretty good idea of what I wanted to make and because of the challenge of programming a functional version in four weeks, I jumped into the development pretty quickly. But first, I created some visual tests to try to find a style. The first was created in Illustrator, but I was dissasified by the flat vector feel of it. I moved to Procreate to create a visual direction that ended up being much closer to the final product
programming
I built Solar Symphonic in p5.js, a JavaScript library for easy Canvas API drawing and creative coding. I also brought in Tone.js to handle sounds, and in particular the sampler class, which made playing sounds at specific pitches much easier.
I challenged myself to use WebGL shaders to create a more visually striking design, which helped me to learn about p5.js's graphics buffers, the web implementation of GLSL, and furthered my understanding of vertex shaders. The line boil effect on the planets and the chromatic abberation were the result of my experimentation
conclusion
Working on Solar Symphonic had its challenges, but it was generally a lot of fun to create. I enjoyed having the opportunity to work on a project I had been looking for an excuse to start for a long time. There were a couple of goals for the project that I was unable to accomplish in the time I had though. While I am happy with the random planet creation, I had initially planned to allow players to create planets by smashing together elements to create a planet with a unique sound. All of the interactions were meant to be extremely tactile and not rely on traditional UI interaction patterns. The button for creating planets was a compromise for the time I had. Lastly, I wanted to allow players to record a video of their solar system. While the code is in place, it was finicky and prone to massive performance dips in a game that was already poorly optimized due to time constraints.
