by: Henry Ocansey and William Fish
Beat Machine is a sequencer and visualizer which enhances users’ experience of sounds with attractive visualizations. The app imitates the famous Roland TR- 909 Rhythm Composer, and it is aimed at novice producers and music enthusiasts.
It has nine components which the user can adjust and interact with, generating a unique sound each time. After selecting different key combinations, this creates a personalized sound. The output of that sound is then generated on the visualizer. Beat machine is designed purely with the user in mind and how each different person would create their own unique tune.
The idea to develop Beat Machine came to us when we were thinking about creating an interactive application with a huge focus on the user. We wanted to create something which would mainly involve user interaction with sounds. Immediately the Roland TR- 909 came to mind. It’s an analogue rhythm composer whereby musicians can mix sounds as well as save entire songs with multiple sections, as opposed to simply storing patterns. Instead of designing just a sequencer, we decided to include three visualizers which can be swapped through by pressing the corresponding keys (A, S, D). The actual Roland TR- 909 is not the simplest machine to use. They require some knowledge of the system and they are mostly used by professionals. We instead wanted Beat Machine to be a partially simpler rhythm composer, easily used by music enthusiasts, novice producers and maybe even professionals. Our research involved looking at various sequencers, similar programs, visualizers and of course interacting with the Roland TR- 909. We looked at visualizers created by programmers on GitHub and watching tutorials from coders such as Daniel Shiffman. This proved useful in helping us to understand the techniques used to code visualizers and working with audio on p5Js. Weekly lab exercises in the audio-visual module taught us how to use oscillators and envelope followers which was important for us to develop our program.
I studied the work of Ben Farahmand, a programmer who developed an audio visualizer using Processing and the Minim library. His visualizer contains shapes which turns a spectrum of sound into beautifully symmetric rotating and spinning circles. This resulted in unpredictable movement but at the same time a satisfying visual. I was very fond of how he coded his visualizer, inspiring me to code my own to a higher level. The variatation in his visuals inspired me to be more creative during the design process and code many visual variations for Beat Machine which we could later filter through the ones we liked best for the final build.
I also looked at online versions of the Roland TR- 909 and similar sequencers, but sadly most were taken down or no longer running. This means there was a definite space our program would be filling, and with a visualiser in addition it would really set itself aside.
Part of the charm of Beat Machine comes from the sixteen step sequencer – the sixteen buttons along the bottom of the interface correspond to sixteen distinct audio samples. For example, punching in all sixteen buttons compared to 2 buttons would create a fast rhythmic and sometimes chaotic sequence which can be further increased by raising the tempo, a feature we included. While the sequencer is running, a light runs from step one to sixteen. The tempo feature enables us to give the musician more power and control of how they wanted their sequence to sound. When a human uses a drum kit, the sound and speed of the beat would fundamentally depend on the velocity at which the drummer hits a given part of the kit. A human drummer can emphasize certain notes by playing them louder or quicker, and the tempo parameter provides a means for our users to boost a particular step.
Here is a video of our first attempt at coding a visualizer.
After the first stage of research, we began coding Beat Machine working separately during the week considering we were focusing on different halves of our project, however we would meet at least once during each week to collaborate and critique each other’s progress. This allowed for a smooth and effective creative process, we could work quickly and efficiently whilst minimizing design issues. Initially, the idea was to have the sequence and visualizer on separate canvases which meant a user would have to switch between windows on the application. After some careful thought, we decided that would be a design flaw making it an intrusive application. Instead we kept both the Rhythm composer and Visualizers on the same canvas. However, this proved to be quite problematic at first because the composer would need to be on the bottom half of the canvas whilst the visuals would be displayed above. At this stage, we combined codes and collaborated, carefully translating and rotating objects on the canvas for everything to align perfectly whilst reducing bugs in the program. We also wanted to include a particle system in beat Machine. This would display on the screen depending on the amplitude level of the sounds. After implementing this feature within the program, we noticed it would cause severe lag on the screen sometimes even resulting in the programming crashing. We later scrapped this feature and instead included a tempo slider which the user could interact with to increase the tempo of the sounds generated. Increasing the slider also changed one of the visuals, making it distort unpredictably from a low to high tempo. We were very pleased with the outcome of this feature as it added further functionality to our program.
Roland TR- 909 Rhythm Composer
Allowing friends and colleagues to test our program during the early stages provided a lot of valuable information on what worked well and what didn’t. The particular features our testers found pleasurable to interact with and the ones they found unexciting. Most importantly it gave us a sense of how user friendly the program really was, allowing us to further implement more features such as a random button. The idea behind this was simple. A few of our testers were unable to produce pleasant sounds using the composer as well as others so adding a random button allowed for a user to be able to generate a random selection of beats on the composer which would play automatically without them having to select individual keys. This functionality was also useful to us whilst designing because it was an easy way to generate sounds quickly whilst we tested and tweaked the program.
Developing Beat Machine was a pleasant experience. The research carried out and the knowledge gained over the weeks was valuable and we gained so many skills over the course of the project. We are very pleased with the final build of Beat Machine and content with the positive feedback from testers and friends. The idea to develop our program was primarily inspired by the Roland TR- 909 Rhythm Composer and the level of interaction it provides its users. The goal was to create a similar composer but with visuals for entry level musicians and music enthusiasts. Our interface is simple and clear with additional help text showing instructions on how to use the program.
We still feel that there are improvements we could make to the program given a little more time. We wanted to include a slider to the canvas which would lerp colours on the visuals but it caused some lag on the program because there was a lot on the canvas already however with some more time, implementing this feature would have been possible while keeping the program running smoothly.
- Daniel Schiffman, "Loading and Playing" , https://www.youtube.com/watch?v=Pn1g1wjxl_
- Ben Farahmand, "Audio Visaulizer with Processing and Minim" , http://www.benfarahmand.com/2013/10/source-code-audio-visualizer-with.html