Rhythm Wheel

An easier way to visualize and represent rhythms
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Running
3. Usage
• Creating the rhythm
• Saving/loading on the cloud
• Generating a random rhythm
4. Features
5. In-depth analysis
• Architecture
• Polyrhytms
• Ring class
• Environmental noise RNG
• Main subroutines
6. License
7. Contact

About The Project

In this project we have developed a rhythm wheel, that is a drum machine that has a simpler way to represent the rhythm. In fact in standard notation, rhythm is indicated on a musical bar line. This thing most of the time can be hard to visualize and represent; in order to solve this problem we thought of a better way to do the same thing.

We had a simple idea: just as a clock can trace the linear passage of time, the flow of rhythm can be traced in a circle; in this way the rhythm is easier to visualize and it’s easier to represent its repetition through time.

Our main goal is to make the experience of describing a rhythm as effortless as possible! The user just needs to use the mouse and his creativity.
That’s why we have chosen to restyle the rhythm wheel. We don’t have dots, but steps, making the web app easier to use with a mouse.

(back to top)

Built With

• Vue.js
• Tone.js
• BootstrapVue
• Firestore

(back to top)

Getting Started

Running

1. Start with cloning this repo on your local machine:

   git clone https://github.com/mazamin7/rhythm_wheel.git

2. Go to the repository directory

   cd rhythm_wheel

3. ONLY FIRST BOOT - Install npm

   npm install

4. Start the server

   npm start

(back to top)

Usage

Creating the rhythm

In order to fill a step, you have to click once on the desired location.
There is also the possibility to give the accent to a specific step; in order to do this you have to click once again to mark the step as accented.
For remove the step you have simplt to click one more time and then it’s removed.
Another important thing is the fact that with the wheel of the mouse, in combination with the hover of the mouse, is possible to rotate the steps. This is particullary relevant in order to create some irregular rhythms.
In this brief gif animation you can see how all this process works.

Saving/loading on the cloud

The user can store and load his rhythmic patterns, because our application is connected to the cloud; this allows the user to generate a rhythm and then save it in the database, or upload a rhythm that he has created in the last session.
For doing this we use the Firebase technology, which allows us to make the connection from the application to a NoSql Database stored in the cloud. That makes of course the application stateful.
In this brief gif animation you can see how all this process works.

Generating a random rhythm

One of the functionalities of our app is that it can generate a random rhythm on-the-fly. For doing that the user is required to insert a list of 4 parameters that are used from the algorithm to generate the random polyrhythm. These 4 parameters are:

• The number of rings that have to be in the polyrhythm
• The step filling probability
• If the user wants or not to randomize the volume for each ring
• If the user wants or not to randomize the phase for each ring (so in practice the rotation of the ring).

We can notice that the probability goes from 0 to 1. In this brief gif animation you can see how it works.

(back to top)

Features

• [✓] Different number of beats/steps for each ring
  
• [✓] Support for accents (a step can be stressed or unstressed)
  
• [✓] Support for polyrhythms
  
• [✓] Ring color is customizable
  
• [✓] Instrument selectable by the user
  
  • [✓] Big collection of instrument samples
    
• [✓] Phase delay controller by the user (steer the ring).
  
• [✓] The RPM can be controlled by the user
  
• [✓] The volume can be controlled by the user
  
• [✓] Rhythmic patterns can be loaded and saved on the cloud
  
• [✓] Generation a random pattern
  
  • [✓] Generation of random numbers starting from environmental noise
    

In-depth analysis

Architecture

Polyrhytms

What is a polyrhythm? A polyrhythm is the simultaneous use of more rhythms that cannot be expressed simply within the same meter.
Why is our rhythm wheel compatible with polyrhythms? In our rhythm wheel, each wheel can have a different number of steps.
Why can't I place the steps freely? We didn't want to lose the train of pulses common to other rhythm notations. With our rhythm wheel, you can eat the cake and keep it!

Ring class

Our rhythm wheel is an array of rings.
Each ring is described by the following properties.
Rhythmic properties: -Number of steps -Rhythmic pattern -Phase Sound properties: -Instrument -Volume Graphic properties: -Color

Environmental noise RNG

Our RNG takes environmental noise as an input and, after some computations, it outputs a true random number.
It’s not about safety or privacy, we just wanted to create a connection between noise (random sounds pressure fluctuations) and music (meaningful sounds).

Main subroutines

Ring phase delay task:
-Choose the ring to be rotated with respect to the mouse position
-Increment the phase of the chosen ring according to the mouse wheel

Clock hand rotation task:
-Periodically increment degrees (modulo 2π)

Sound play task:
-For each ring
-Convert current degree to step number
-If the step is filled, play sound

Draw graphics task:
-Draw clock hand, rings and steps with Canvas

RNG task:
-When the pool is not full
-Record sound with microphone
-Manipulate samples to output a random number
-Put the random number in the pool

Database sync task:
-When the database content changes, update the model
-When the model changes, update the database

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Alberto Bollino - alberto.bollino@mail.polimi.it
Gerardo Cicalese - gerardo.cicalese@mail.polimi.it
Gennaro D'Imperio - gennaro.dimperio@mail.polimi.it
Giorgio Granello - giorgio.granello@mail.polimi.it

Project Link: https://github.com/mazamin7/rhythm_wheel

(back to top)

(back to top)