Sound-reactive environment
OKLCH gradient
open full size ↗This is a visualization of OKLCH, one of the best perceptually accurate and computationally performant color models. Hue runs 0° to 360° left to right; lightness runs 0 to 1 bottom to top. At each cell the chroma is set to the largest value that keeps the color inside the sRGB gamut.
2D sound-reactive color mapping
open full size ↗Seven fill modes, each mapping sound data to OKLCH coordinates across the screen. Hue, lightness, and chroma are computed from FFT magnitudes, waveform phase, and spectral history — the gamut boundary determines maximum chroma at every point automatically.
Mode index
Twelve cosine plane waves at equal angular intervals, with the \(x\)-axis compressed by \(0.4\times\) before computing dot products. The compression concentrates fringes horizontally and stretches them vertically — the same mechanism as a diffraction grating producing elongated spectra. Hue is assigned by \(H = x \cdot 0.8 + I\pi\), so a left-to-right color sweep is modulated by the interference value at each pixel.
等角度間隔で配置された12個の余弦平面波で、内積を計算する前に\(x\)軸を\(0.4\times\)に圧縮しています。この圧縮によって縞模様が水平方向に集まり、垂直方向に伸びます。回折格子が引き伸ばされたスペクトルを生み出すのと同じ仕組みです。色相は\(H = x \cdot 0.8 + I\pi\)で割り当てられ、左から右への色の変化が各ピクセルの干渉値によって変調されます。
32 waveform samples are plotted as \((w(t),\, w(t + \tau))\) where \(\tau\) cycles through four lag values \(\pm 0.07\) and \(\pm 0.18\). A Gaussian density kernel accumulates over all points, so regions the signal visits often are brighter. Sustained tones trace closed ellipses; percussive transients produce short jagged bursts. Color shifts from cool to warm along the time axis of the trajectory.
32個の波形サンプルが\((w(t),\, w(t + \tau))\)としてプロットされ、\(\tau\)は\(\pm 0.07\)と\(\pm 0.18\)という4つの遅延値を巡回します。ガウス密度カーネルが全点にわたって積み重なるため、信号が頻繁に訪れる領域ほど明るくなります。持続音は閉じた楕円を描き、打楽器的な過渡音は短くギザギザした軌跡を作ります。色は軌跡の時間軸に沿って寒色から暖色へと変化します。
Seven heptagonal waves each receive an independent phase offset \(\phi_k(t) = (k+1) \cdot 0.73 \cdot t\) rather than a shared time term. Since every drift rate is an integer multiple of the same base rate, the pattern is exactly periodic — it repeats roughly every 8.6 seconds, but slowly enough that the cycle isn't obvious. The interference sum is passed through \(\frac{1}{2} + \frac{1}{2}\cos(I \cdot 3\pi)\), re-introducing three bands of high-contrast structure within the slowly morphing field.
7つの七角形の波それぞれが、共通の時間項ではなく独立した位相オフセット\(\phi_k(t) = (k+1) \cdot 0.73 \cdot t\)を持ちます。すべてのドリフト速度が同じ基準の整数倍であるため、パターンは厳密に周期的で、約8.6秒ごとに繰り返します。ただしその周期はゆっくりしているため、はっきりとは分かりません。干渉の総和は\(\frac{1}{2} + \frac{1}{2}\cos(I \cdot 3\pi)\)を通過し、ゆっくりと変形する場の中に3本のコントラストの強いバンドを再導入します。
The 256 FFT bins are arranged left to right (bass to treble); 256 frames of history scroll upward at 60 fps, covering roughly 4 seconds. Hue maps from warm red at the bass end to cool cyan at the treble end. Amplitude sets both lightness and chroma, so silence is black and a full-amplitude bin reaches maximum gamut chroma.
256個のFFTビンが左から右(低音から高音)へ並び、256フレーム分の履歴が60fpsで上方向にスクロールします(およそ4秒分に相当します)。色相は低音側の暖かい赤から高音側の冷たいシアンへマッピングされます。振幅が明度と彩度の両方を決めるため、無音時は黒く、振幅が最大のビンはガマットの彩度限界に達します。
The spectrogram is mirrored left and right about the centre column. Vertical position encodes frequency — bass at the top and bottom, treble near the vertical middle — and the bottom and top halves carry the L and R channels respectively. Distance from the centre column encodes time: the centre holds the current frame, and history fans out toward the left and right edges. Hue rotates through a full cycle every ten seconds.
スペクトログラムが中央の列を軸に左右対称に配置されます。縦位置は周波数を表します(上下端が低音、垂直方向の中央付近が高音)。下半分と上半分はそれぞれLチャンネルとRチャンネルに対応します。中央列からの距離は時間を表し、中央が現在のフレーム、履歴は左右の端に向かって扇状に広がります。色相は10秒ごとに一周します。
128 FFT bins appear as vertical frequency bands, mirrored symmetrically left and right. Bass concentrates at the centre; treble fans out to the left and right edges. Each band's hue encodes its amplitude — cool blue when quiet, warm orange when loud.
128個のFFTビンが垂直な周波数帯として現れ、左右対称に配置されます。低音は中央に集まり、高音は左右の端へ広がります。各帯の色相はその振幅を表し、静かなときは寒色の青、大きいときは暖色のオレンジになります。
Like Spectral hue, but lightness also tracks amplitude — quiet bands are dim and cool-tinted, loud bands are bright and warm. Frequencies that surge in the mix glow visibly against the darker surrounding bands.
Spectral hueと似ていますが、明度も振幅に応じて変化します。静かな帯域は暗く寒色がかり、大きい帯域は明るく暖色になります。ミックスの中で急激に高まる周波数は、周囲の暗い帯域の中で目立って輝いて見えます。
Environmental mapping
open full size ↗The 2D color fill is rendered to a texture and wrapped around the scene as an equirectangular environment map. Each surface point samples the map at its normal direction, so the color pattern painted by the audio becomes the light source for the 3D shape.