Design with p5.js and Tone.js
Close

Project Description

A short series of artistic studies that I made in 2023 to explore audio-visual design using the p5.js and Tone.js libraries for javascript.

I wanted to stylise these studies with the visual constraint of using only simple shapes and colour, and I wanted to explore a range of sonic pairings with this visual aesthetic: from peaceful to playful to silent.

Ultimately, this was a really fun exercise in realising some simple interactions made possible by these libraries. Challenges did arise however through the limitations of designing for the browser and all of the inherent variety that entails. Currently the interactions are all designed with a mouse in mind, compatibility with mobile devices is not yet consistent.

All of the repositories and the source code for these studies are available on my GitHub.

The Studies

Orb Garden

A slow interaction that can be built up by placing (click + hold) orbs around the screen. I wanted to play with the joint audio visual expression of proximity between the mouse and the orbs.

Wobbly Blob

A fun attempt at a simple intuitive synth using the x-y position of the mouse to control a FM Synth. I really enjoy the simplicity of the click and drag mechanic and the satisfying wobble of the visuals.

Constellations

Inspired by the perpetual motion of classic screen savers, another study in trying to create a satisfying visuals with only simple shapes, audio files and colour.

Paint Splats

This is the only silent study in this series, but I found that for me the silence played well with the surprising visual noise that is triggered by the mouse movement.
A click changes the colours.