Circle Of Fifth

Interactive Circle of Fifths

An elegant, interactive visualization of the Circle of Fifths, designed to help musicians explore musical relationships and harmonies.

Features

- Interactive Circle Visualization: Click on any note to see its relationships with other notes.

- Multiple Relationship Types: Visualize different musical relationships:

  - Perfect Fifths

  - Major Thirds

  - Minor Thirds

  - Major Seconds/Whole Tones

  - Minor Seconds/Half Steps

  - Tritone

- Color-Coded Patterns: Each relationship type is represented with a distinct color for easy visual identification.

- Note Details Panel: Shows comprehensive information about the selected note:

  - Key signature

  - Related notes by relationship type

  - Major and minor chord notes

  - Common chords in the key

- Camelot Notation: Toggle between standard music notation and Camelot notation (popular with DJs for harmonic mixing).

How to Use

1. Select a Note: Click on any note in the circle to set it as the root.

2. Choose Relationships: Use the buttons in the header to toggle different musical relationships on/off.

3. View Connections: Related notes are highlighted and connected with lines color-coded by relationship type.

4. See Details: The side panel displays detailed information about the selected note and its relationships.

5. Switch Notation: Toggle the Camelot switch to view notes in Camelot notation instead of standard notation.

Visual Guide

- Line Colors:

  - Perfect Fifths: Blue

  - Major Thirds: Green

  - Minor Thirds: Purple

  - Major Seconds: Amber

  - Minor Seconds: Pink

  - Tritone: Red