Ratio Lattice Visualizer

Overview

An interactive React and Three.js visualization that represents musical ratios as points in a spatial lattice. Each ratio is positioned according to its prime-factor structure, making it possible to compare intervals, chords, and harmonic regions visually.

Role

Designer and developer responsible for the ratio logic, 3D rendering, interaction controls, lattice modes, and explanatory framing.

Context

In just intonation, musical intervals can be understood as frequency ratios, and those ratios can be decomposed into prime factors. A lattice makes those relationships spatial: moving in one direction can correspond to powers of 3, another to powers of 5, another to powers of 7, and so on.

Problem

Prime-factor relationships are central to many theories of just intonation, but they are difficult to compare when they appear only as fractions or cents values. The project needed a way to make those relationships visible, navigable, and adjustable in real time.

Outcome

The tool provides an exploratory model of harmonic space where just-intonation ratios can be compared as both numerical relationships and spatial structures.

Approach

1. 01 Built a React interface for exploring ratio sets in an interactive 3D environment.
2. 02 Used Three.js to render ratios as points in a spatial lattice with adjustable scale, rotation, and layout.
3. 03 Mapped ratios to coordinates through prime-factor decomposition, allowing harmonic relationships to appear as spatial relationships.
4. 04 Added multiple lattice modes for moving between focused local views and broader harmonic regions.
5. 05 Created controls for changing the visual layout without separating the diagram from the underlying theoretical model.