Introducing Musical Circle
TL;DR Musical Circle makes it easy to play chords in different styles, by grouping and highlighting all the related chords in a circle with colors: green, blue and red. Most songs are played using a combination of these related chords, i.e. with green, blue and sparingly some red color chords.
Musical Circle 🎵 is an interactive and playable circle of fifths.What is a circle of fifths? Here's the Wikipedia definition:
"The circle of fifths organizes pitches in a sequence of perfect fifths, generally shown as a circle with the pitches (and their corresponding keys) in a clockwise progression. Musicians and composers often use the circle of fifths to describe the musical relationships between pitches. Its design is helpful in composing and harmonizing melodies, building chords, and modulating to different keys within a composition."
Listen to the sound of all the pitches in the circle of fifths:
I was first introduced to a circle of fifths a while back when I was taking my piano lessons. I found it so useful. I used it to learn about different chord progressions, how they are related and how I could transpose them. I had created a big circle of fifths on a paper, that I used most of the time. I then decided to create an app for it. I wanted interactions and sounds so that I can try out how the chords sound instantly in different scales. That was when Musical Circle was born.
Why do we need such an interactive circle of fifths? There are a couple of reasons. It helps identify the chords in the current fifth scale by highlighting and numbering chords. It can be rotated to a desired fifth so it would be easier to figure out all the related chords within that fifth. It can also play chords in various instruments with different settings and styles. So whether you are learning about the circle of fifths, trying to identify the chords in a song, experimenting with your musical ideas, or improvising with chords, Musical Circle makes it fun and easy.
Design
Let's talk a little bit about the design of the Musical Circle. It has 3 different circular arcs to separate different kinds of pitches. The outermost arc has the major fifth pitches. The middle arc has the relative minor fifths pitches and the innermost arc has the relative diminished fifths pitches.
It uses 3 different colors to separate different types of chords. The green color is used for major chords like major triad, major seventh, etc. The blue color is used for relative minor chords like minor triad, minor seventh, etc. And finally, red color is used for diminished chords. All the related chords within the current fifth are highlighted with respective colors. If you rotate the circle, the highlight will be changed to the next fifth.
Here's one trick. If you want to play good-sounding music, choose a mix of green (major), blue (minor) and sparingly some red (diminished). It usually sounds good.
Let's take an example song, "Stand By Me" by Ben E. King. If we take the song key as G. The chords would be "G Em C D". This is one of the famous chord progressions "I vi IV V", or 1, 6, 4, 5. Here're the opening chords of the song.
Rotate the circle to G (the little orange triangle is in on G), and see that all the chords within that scale are highlighted. You can see that the chords above are together. You can also rotate the circle to any scale of your choice and play the song on that scale. Originally, the song is in the key of A. So the chords would be "A F#m D E".
A little preview of Musical Circle features. Try it out yourself here
Features
Rotate to a desired fifth
You can rotate Musical Circle to a desired fifth. All the related chords within that fifth will be highlighted with colors. For e.g by default, the current fifth of the circle is at C. So the major chords C, F and G will be green. The minor chords Dm, Am and Em will be blue and the diminished chord Bdim will be red. And when you rotate the circle to the next fifth G, the highlights will be changed to their related chords.
You can even glide on the circle instead of rotating. So the sounds will be played when you glide through the circle.
Play sounds
Music theory without the sounds is dull. In Musical Circle, you can play sounds of chords, individual notes, arpeggio and scales, in various settings and understand the relationship between different chords. It has 3 different instruments sound. By default, a web audio synth is used. You can also select a Piano or a Guitar.
Try playing the progression below on the circle, with a Piano instrument. Rotate the circle to the "G" pitch.
Styles / Modes
You can play the sounds in different styles like chords, notes, arpeggio and scales. You can even choose the type of chords, arpeggio or scales. For e.g, if you select the chord type as "Seventh", the circle will change to 7th chords.
Example of an arpeggio you can play on the circle:
Settings
You can choose various settings like "Time Signature", "BPM", "Base octave" and "No. of octaves" to play various styles of chords or scales. For e.g to play a major scale spanning 2 octaves, you can select "Scale" on Mode and put "2" on Num. octaves in the settings sidebar. Then you will be able to play scales with 2 octaves when clicking each pitch.
Musical Circle is still in its early phase. It only has an Ionian mode (Major Scale chord progression) and only has simple chords like major, minor and diminished triads and a few 7th chords. I plan to refine this as I continue working on it. And finally, I hope it will help you in your journey of learning music theory.