Pulse is an open-source generative music app built in Javascript. Its purpose is to help musicians and artists to come up with new musical ideas and patterns, in the most straight forward way possible, maintaining a minimalist design and being easily accessible within the browser of choice. Pulse runs using Tone.js for maintaining its audio engine and P5.js for building the user interface and visuals. The haul concept behind its development has been inspired by Bloom, a generative music app for iPhone developed by Brian Eno, which responses to user interaction by playing notes and drawing geometrical figures onto screen. Pulse is a free and open-source web app and its repository is available to everyone on GitHub to enjoy, change, fix, add and play. Pulse has also been a great opportunity and an exercise that allowed me to get more familiar with software design and development of audio applications.
Pulse’s main window loads up with a canvas and a few ball objects that move around on screen, with different colours and sizes, that bounce back when touching the corners of the window. Scrolling the mouse increases the size of the ball objects within a given range from the cursor’s position. Clicking with the mouse triggers a note and draws a randomly generated shape chosen from circles, triangles, squares and pentagons. Both sound and animation are looped together so to generate a musical pattern and a nicely looking minimalist visual effect.
Here is a comprehensive explanation of the technical structure of Pulse’s backend: When Pulse loads up for the first time, a canvas is drawn onto screen, containing shapes of coloured balls with different sizes that react with the underlying environment. The ball objects have settings for motion and direction (these get randomised within a given range at start-up), and bounce when touching the corners of the window. The colour in the background changes continuously, linearly interpolating between a pre-given array of RGB values. Moving around the mouse on canvas increases the size of the ball objects within a given distance from the cursor. The balls then fall back again to their original size after leaving the cursor's distance. Click interaction triggers a note and draws a geometrical figure on screen, picked randomly from a pre-existing set. User can click multiple times to create multiple notes that all together build a sequence. The updated sequence gets looped every bar, so to create a musical pattern. Moreover, while mouse click is being held down, a sequence of kick samples plays every quarter notes. The musical pattern, together with the visuals, provide the composer with a tool to get creative with a given scale of notes, rhythmically repeated over time. An ideal tool especially for minimalist and electronic music-based composers. Now, let’s get a bit more technical with how the actual algorithm and design behind the app work together, with a strong focus on areas that needed a bit more work than usual. One of the main difficulties encountered during the process of building Pulse was related to assigning the time-event of click with generating a note in the pattern. As explained earlier, Tone.js is the foundation over which Pulse builds its small but practical audio engine. All the sounds, notes and patterns are generated and handled by Tone’s functions and modules. More technically, Tone.Sequence is the main module that, when the app loads for the first time, generates a loop of sixteen sixteenth notes picked from an array of string data types (e.g. “C1” or “D3”), with a tempo of 120 bpm by default. This data gets then sent through Tone’s main virtual synthesiser module (Tone.Synth) in order to translate them into sounds. When user interacts with a click on the canvas, the program stores both the position of the cursor along the x-axis and the time of event in milliseconds since the app started. On the one hand, the position serves the shapes classes to know when to spawn when drawn onto screen. On the other hand, the time of click event needs to be translated into a note and a position in the notes sequence array. In order to accomplish that, the screen is divided equally in multiple areas of interaction, bounded by specific values on the x-axis. Each “column” of interaction has a specific note value that gets assigned to the click event. As for the time being, the notes are within the range of the pentatonic scale of D Minor, so those are the ones being played by Pulse, but an implementation is on its way to allow the use of other scales. Because the time of event is stored as a long integer value (in milliseconds), I needed to translate that into a integer from 0 to 15, which labels a spot available in the sequence. An equilibrate way to assign the click time with a spot in the sequence was by following this formula (here written in Matlab):
Where time is time-lapse of click in seconds, barTimeLength is the length of a bar in seconds (2 seconds if bpm is 120), barSubdivision is the the number of subdivisions in the sequence (in this case 16, having divided every bar in sixteenths). This way, the click time event is rounded so to fit appropriately in the nearest place available in the sequence. Notes can be erased and replaced by new ones by simply clicking again on screen at the moment of choice. As for the shapes, these are being casted and drawn on screen at the time of click-event with a different colour. Their opacity fades out on a specific time rate and go back to their original colour when timeTrack matches with the currentTime value. By doing so, the algorithm gives the impression of the figures being spawned again, whilst they’ve always actually been there, only changing their opacity and setting their value back again to normal every ‘sequence’ times.
Pulse’s design wants to obviously refer to Brian Eno’s iPhone App, “Bloom”, which has been a great inspiration for the visual representations. Pulse has taken Bloom as a starting point, built it, and then developed and drawn new ideas onto it. Also, Pulse has the chance of growing exponentially, with the help of other fellow designers that would like to spice it up with even more creative “injections”. There are still some bugs here and there, being quite a young application, but a haul lot of space for improvements. Different areas of development include a main menu, selectable on the top left corner of the screen, inclusive of different workable settings and toggles. These toggles could be interchangeable settings for colours, sizes, then selectable instruments and sounds, different kick sounds libraries and so on. The greatest positive attribute to Pulse is that it runs on browsers, which means that mostly any device having a browser installed has the capability of running it. It also does not require too much processing power. In fact, Javascript has been the language of choice especially because of its ever-lasting growth in the latest years, which inspires a huge community of developers because of its powerful flexibility to work within the browser and ever-growing development.
Pulse is open-source, free and available to public. It is already accessible to everyone who wants to try it, download it and contribute to it with their own creative ideas. I invite everyone to play with it, have some fun and contribute to its onward development.