"See Scales" is a web app that allows users to visualize and explore musical scales. The notes of each scale are visualized as nodes of a circle, with the intervals between them highlighted. To accommodate different learning and visual preferences, there are 3 types of interval visualizations and a keyboard view that shows how the scale would look on a piano.

Building a 3D UI

Under the hood, much of the UI for this project is 3D. For example, each scale sits on a carousel that rotates when the user presses the next/previous buttons. Because there are so many scales, the carousel is large and the effect appears to be in 2D (i.e., scales slide from the right to the left), but in reality, this is a rotation of the carousel around the Y axis.

Each note in the scale is represented by a ring that rotates when the user hovers over it. This, too, is a 3D effect. Since it relies on the user hovering over the note, it was necessary to implement raycasting to determine when the mouse intersects the note.

Incorporating subtle 3D effects in web interfaces can make them more engaging. 3D rendering is a much closer approximation to how we live in the world, and it unlocks new types of interactions. At the same time, it's important not to lose the simplicity, familiarity, and function that a good 2D UI brings to the table.

Hope you enjoy seeing some scales.