Turn your browser into a synthesizer with Flora Drift

British designer Luke Twyman's latest project uses procedural generation to create music and visuals on the fly.

Designer Luke Twyman likes to create new and exciting things for the web. And his latest venture is no exception. Making use of the Web Audio API, Flora Drift procedurally generates music and visuals, effectively turning your browser into a real-time sythesizer.

"Flora Drift originally started as a 48 hour challenge I set myself, to come up with some kind of web-based generative project. I'd been keen to do another music-based project and had been meaning to get to know the Web Audio API. The freedom to create synth audio right in the browser really appeals to me."

Flora Drift procedurally generates music and visuals

After the 48-hour period, Twyman had something he wanted to continue working on. "It took about two weeks to get it to the stage I wanted," he says. "There was a lot of tweaking to the generation of both the music and the visuals to try and get what felt like the right balance between random variation and aesthetics.

"The mood of it was important to me, I wanted to create a still remoteness but make the plants feel alive, I spent a lot of time working on the desaturated colour palettes and synth sounds to create the right ambient feel. I wanted to make the interaction feel rewarding without it dominating the mood or experience.

I spent a lot of time working on the colour palettes and synth sounds to create the right ambient feel

"Creating a good balance between all the sounds was a challenge, and as there are sometimes so many sounds happening at once I often found I was meeting the limits of the Web Audio. I had to put a lot of thought into managing the oscillators and make sure they're being removed as soon as they've finished playing."


Kerrie Hughes is associate editor at Creative Bloq. Her employment at Future Publishing began in January 2010 as staff writer for 3D World magazine. Since then, she's written regularly for other publications, including ImagineFX and Computer Arts magazines.