AudioLinkUI V3

AudioLinkUI.shader

Shader "AudioLink/AudioLinkUI"
{
    Properties
    {
        _Gain("Gain", Range(0, 2)) = 1.0
        [ToggleUI] _Autogain("Autogain", Float) = 0.0

        _Threshold0("Low Threshold", Range(0, 1)) = 0.5
        _Threshold1("Low Mid Threshold", Range(0, 1)) = 0.5
        _Threshold2("High Mid Threshold", Range(0, 1)) = 0.5
        _Threshold3("High Threshold", Range(0, 1)) = 0.5

        _X0("Crossover X0", Range(0.0, 0.168)) = 0.0
        _X1("Crossover X1", Range(0.242, 0.387)) = 0.25
        _X2("Crossover X2", Range(0.461, 0.628)) = 0.5
        _X3("Crossover X3", Range(0.704, 0.953)) = 0.75
        
        _HitFade("Hit Fade", Range(0, 1)) = 0.5
        _ExpFalloff("Exp Falloff", Range(0, 1)) = 0.5

        [ToggleUI] _ThemeColorMode ("Use Custom Colors", Int) = 0
        _SelectedColor("Selected Color", Range(0, 3)) = 0
        _Hue("(HSV) Hue", Range(0, 1)) = 0.5
        _Saturation("(HSV) Saturation", Range(0, 1)) = 0.5
        _Value("(HSV) Value", Range(0, 1)) = 0.5

        _CustomColor0 ("Custom Color 0", Color) = (1.0, 0.0, 0.0, 1.0)
        _CustomColor1 ("Custom Color 1", Color) = (0.0, 1.0, 0.0, 1.0)
        _CustomColor2 ("Custom Color 2", Color) = (0.0, 0.0, 1.0, 1.0)
        _CustomColor3 ("Custom Color 3", Color) = (1.0, 1.0, 0.0, 1.0)
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            #include "Packages/com.llealloo.audiolink/Runtime/Shaders/AudioLink.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            // Uniforms
            float _Gain;
            float _Autogain;
            float _Threshold0;
            float _Threshold1;
            float _Threshold2;
            float _Threshold3;
            float _X0;
            float _X1;
            float _X2;
            float _X3;
            float _HitFade;
            float _ExpFalloff;
            int _ThemeColorMode;
            int _SelectedColor;
            float _Hue;
            float _Saturation;
            float _Value;
            float3 _CustomColor0;
            float3 _CustomColor1;
            float3 _CustomColor2;
            float3 _CustomColor3;

            // Colors
            const static float3 BACKGROUND_COLOR = 0.033;
            const static float3 FOREGROUND_COLOR = 0.075;
            const static float3 INACTIVE_COLOR = 0.13;
            const static float3 ACTIVE_COLOR = 0.8;
            const static float3 BASS_COLOR_BG = pow(float3(44.0/255.0, 12.0/255.0, 43.0/255.0), 2.2);
            const static float3 BASS_COLOR_MG = pow(float3(103.0/255.0, 27.0/255.0, 100.0/255.0), 2.2);
            const static float3 BASS_COLOR_FG = pow(float3(147.0/255.0, 39.0/255.0, 143.0/255.0), 2.2);
            const static float3 LOWMID_COLOR_BG = pow(float3(76.0/255.0, 53.0/255.0, 18.0/255.0), 2.2);
            const static float3 HIGHMID_COLOR_BG = pow(float3(42.0/255.0, 60.0/255.0, 19.0/255.0), 2.2);
            const static float3 HIGH_COLOR_BG = pow(float3(12.0/255.0, 52.0/255.0, 68.0/255.0), 2.2);
            const static float3 HIGH_COLOR_FG = pow(float3(41.0/255.0, 171.0/255.0, 226.0/255.0), 2.2);

            // Spacing
            const static float CORNER_RADIUS = 0.03;
            const static float FRAME_MARGIN = 0.035;
            const static float AA_FACTOR = 0.002;
            const static float HANDLE_RADIUS = 0.007;
            const static float OUTLINE_WIDTH = 0.002;

            #define remap(value, low1, high1, low2, high2) ((low2) + ((value) - (low1)) * ((high2) - (low2)) / ((high1) - (low1)))

            float3 selectColor(uint i, float3 a, float3 b, float3 c, float3 d)
            {
                return float4x4(
                    float4(a, 0.0),
                    float4(b, 0.0),
                    float4(c, 0.0),
                    float4(d, 0.0)
                )[i % 4];
            }

            float3 selectColorLerp(float i, float3 a, float3 b, float3 c, float3 d)
            {
                i = max(i - 1, 0);
                int me = floor(i);
                int top = ceil(i);
                float3 meColor = selectColor(me, a, b, c, d);
                float3 topColor = selectColor(top, a, b, c, d);
                return lerp(meColor, topColor, smoothstep(frac(i), 0.0, AA_FACTOR));
            }

            float3 getBandColor(uint i) { return selectColor(i, BASS_COLOR_BG, LOWMID_COLOR_BG, HIGHMID_COLOR_BG, HIGH_COLOR_BG); }
            float3 getBandColorLerp(float i) { return selectColorLerp(i, BASS_COLOR_BG, LOWMID_COLOR_BG, HIGHMID_COLOR_BG, HIGH_COLOR_BG); }

            float3 getBandAmplitudeLerp(float i, float delay)
            {
                i = max(i - 1, 0);
                int me = floor(i);
                int top = ceil(i);
                float meStrength = _AudioTexture[uint2(delay, me)].r;
                float topStrength = _AudioTexture[uint2(delay, top)].r;
                return lerp(meStrength, topStrength, smoothstep(frac(i), 0.0, AA_FACTOR));
            }

            float2x2 rotationMatrix(float angle)
            {
                return float2x2(
                    float2(cos(angle), -sin(angle)),
                    float2(sin(angle), cos(angle))
                );
            }

            float2 translate(float2 p, float2 offset)
            {
                return p - offset;
            }

            float2 rotate(float2 p, float angle)
            {
                return mul(rotationMatrix(angle), p);
            }

            float shell(float d, float thickness)
            {
                return abs(d) - thickness;
            }

            float inflate(float d, float thickness)
            {
                return d - thickness;
            }
            
            void addElement(inout float3 existing, float3 elementColor, float elementDist)
            {
                existing = lerp(elementColor, existing, smoothstep(0, AA_FACTOR, elementDist));
            }

            float sdRoundedBoxCentered(float2 p, float2 b, float4 r)
            {
                r.xy = (p.x>0.0)?r.xy : r.zw;
                r.x  = (p.y>0.0)?r.x  : r.y;
                float2 q = abs(p)-b*0.5+r.x;
                return min(max(q.x,q.y),0.0) + length(max(q,0.0)) - r.x;
            }

            float sdRoundedBoxTopLeft(float2 p, float2 b, float4 r)
            {
                return sdRoundedBoxCentered(translate(p, b*0.5), b, r);
            }

            float sdRoundedBoxBottomRight(float2 p, float2 b, float4 r)
            {
                return sdRoundedBoxCentered(translate(p, float2(b.x,-b.y)*0.5), b, r);
            }

            float sdSphere(float2 p, float r)
            {
                return length(p) - r;
            }

            float sdTriangleIsosceles(float2 p, float2 q)
            {
                p.x = abs(p.x);
                float2 a = p - q*clamp( dot(p,q)/dot(q,q), 0.0, 1.0 );
                float2 b = p - q*float2( clamp( p.x/q.x, 0.0, 1.0 ), 1.0 );
                float s = -sign( q.y );
                float2 d = min( float2( dot(a,a), s*(p.x*q.y-p.y*q.x) ),
                            float2( dot(b,b), s*(p.y-q.y)  ));
                return -sqrt(d.x)*sign(d.y);
            }

            float sdTriangleRight(float2 p, float halfWidth, float halfHeight)
            {
                float2 end = float2(halfWidth, -halfHeight);
                float2 d = p - end * clamp(dot(p, end) / dot(end, end), -1.0, 1.0);
                if (max(d.x, d.y) > 0.0) {
                return length(d);
                }
                p += float2(halfWidth, halfHeight);
                if (max(p.x, p.y) > 0.0) {
                    return -min(length(d), min(p.x, p.y));
                }
                return length(p);
            }

            float sdSegment(float2 p, float2 a, float2 b)
            {
                float2 pa = p-a, ba = b-a;
                float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
                return length( pa - ba*h );
            }

            float3 drawTopArea(float2 uv)
            {
                float3 color = FOREGROUND_COLOR;

                float areaWidth = 1.0 - FRAME_MARGIN * 2;
                float areaHeight = 0.35;
                float boxWidth = areaWidth / 4.0;
                
                float threshold[4] = { _Threshold0, _Threshold1, _Threshold2, _Threshold3 };
                float crossover[4] = { _X0 * areaWidth, _X1 * areaWidth, _X2 * areaWidth, _X3 * areaWidth };

                // waveform calculation
                uint totalBins = AUDIOLINK_EXPBINS * AUDIOLINK_EXPOCT;
                uint noteno = AudioLinkRemap(uv.x, 0., 1., AUDIOLINK_4BAND_FREQFLOOR * totalBins, AUDIOLINK_4BAND_FREQCEILING * totalBins);
                float notenof = AudioLinkRemap(uv.x, 0., 1., AUDIOLINK_4BAND_FREQFLOOR * totalBins, AUDIOLINK_4BAND_FREQCEILING * totalBins);
                float4 specLow = AudioLinkData(float2(fmod(noteno, 128), (noteno/128)+4.0));
                float4 specHigh = AudioLinkData(float2(fmod(noteno+1, 128), ((noteno+1)/128)+4.0));
                float4 intensity = lerp(specLow, specHigh, frac(notenof)) * _Gain;
                uint bandIndex = AudioLinkRemap(uv.x, 0., areaWidth, 0, 4);
                float bandIntensity = AudioLinkData(float2(0., bandIndex));
                float funcY = areaHeight - (intensity.g * areaHeight);
                float waveformDist = smoothstep(0.003+AA_FACTOR, 0.003, funcY - uv.y);
                float waveformDistAbs = abs(smoothstep(0.003+AA_FACTOR, 0.003, abs(funcY - uv.y)));

                // background waveform
                color = lerp(color, color * 2, waveformDist);
                color = lerp(color, color * 2, waveformDistAbs);

                float boxOffset = crossover[0];
                for (uint i = 0; i < 4; i++)
                {
                    float boxHeight = threshold[i] * areaHeight;
                    float boxWidth = 0.0f;
                    if (i == 3) // The last box should just stretch to fill
                        boxWidth = areaWidth - boxOffset;
                    else
                        boxWidth = crossover[i + 1] - crossover[i];

                    float leftCornerRadius = i == 0 ? CORNER_RADIUS : 0.0;
                    float rightCornerRadius = i == 3 ? CORNER_RADIUS : 0.0;
                    float boxDist = sdRoundedBoxBottomRight(
                        translate(uv, float2(boxOffset, areaHeight)),
                        float2(boxWidth, boxHeight),
                        float4(rightCornerRadius, CORNER_RADIUS, leftCornerRadius, CORNER_RADIUS)
                    );

                    // colored inner portion
                    float3 innerColor = getBandColor(i);
                    innerColor = lerp(innerColor, innerColor * 3, waveformDist);
                    innerColor = lerp(innerColor, lerp(innerColor * 3, 1.0, bandIntensity > threshold[i]), waveformDistAbs);
                    addElement(color, innerColor, boxDist+OUTLINE_WIDTH);

                    // outer shell
                    float shellDist = shell(boxDist, OUTLINE_WIDTH);
                    addElement(color, ACTIVE_COLOR, shellDist);

                    // Top pivot
                    float handleDist = sdSphere(
                        translate(uv, float2(boxWidth * 0.5 + boxOffset, areaHeight-boxHeight)),
                        HANDLE_RADIUS
                    );
                    addElement(color, 1.0, handleDist);

                    // Side pivot
                    handleDist = sdRoundedBoxCentered(
                        translate(uv, float2(boxOffset, areaHeight - boxHeight * 0.5)),
                        float2(0.015 * areaWidth, 0.35 * boxHeight),
                        HANDLE_RADIUS
                    );
                    addElement(color, 1.0, handleDist);

                    // Keep track of current offset
                    boxOffset += boxWidth;
                }

                return color;
            }

            float3 drawSlider(float2 uv, float2 size, float3 inactiveColor, float3 activeColor, float t)
            {
                float3 color = FOREGROUND_COLOR;

                const float sliderOffset = 0.02;

                // Background fill
                float maxTriangleWidth = size.x - sliderOffset * 2.0;
                float bgTriangleDist = inflate(sdTriangleIsosceles(
                    rotate(translate(uv, float2(sliderOffset, size.y * 0.5)), UNITY_PI*0.5), 
                    float2(size.y*0.3, maxTriangleWidth)
                ), 0.002);
                addElement(color, inactiveColor, bgTriangleDist);

                // Current active area
                float currentTriangleWidth = maxTriangleWidth * t;
                float currentTriangleDist = max(bgTriangleDist, uv.x - currentTriangleWidth - sliderOffset);
                addElement(color, activeColor, currentTriangleDist);

                // Slider handle
                float handleDist = sdSphere(
                    translate(uv, float2(currentTriangleWidth + sliderOffset, size.y * 0.5)),
                    HANDLE_RADIUS
                );
                addElement(color, ACTIVE_COLOR, handleDist);

                // Slider vertical grip
                float gripDist = abs(uv.x - currentTriangleWidth - sliderOffset) - OUTLINE_WIDTH;
                addElement(color, ACTIVE_COLOR, gripDist);

                return color;
            }

            float drawAutoGainButton(float2 uv, float2 size)
            {
                float3 color = FOREGROUND_COLOR;

                // TODO: The real icon
                float bgTriangleDist = inflate(sdTriangleIsosceles(
                    rotate(translate(uv, float2(0.02, size.y * 0.5)), UNITY_PI*0.5), 
                    float2(size.y*0.3, size.x*0.7)
                ), 0.002);
                addElement(color, lerp(INACTIVE_COLOR, ACTIVE_COLOR, _Autogain), bgTriangleDist);

                return color;
            }
            
            float3 drawHitFadeArea(float2 uv, float2 size)
            {
                float3 color = FOREGROUND_COLOR;

                // Background fill
                float2 triUV = -(uv - float2(size.x / 2, size.y / 2));

                float halfWidth = 0.45 * size.x;
                float halfHeight = 0.37 * size.y;
                float fullWidth = halfWidth * 2;
                float fullHeight = halfHeight * 2;
                float bgTriangleDist = inflate(sdTriangleRight(triUV, halfWidth, halfHeight), 0.002);
                addElement(color, INACTIVE_COLOR, bgTriangleDist);

                // Current active area
                float remainingWidth = size.x - fullWidth;
                float remainingHeight = size.y - fullHeight;
                float marginX = remainingWidth / 2;
                float marginY = remainingHeight / 2;

                triUV.x += halfWidth * _HitFade;
                float fgTriangleDist = inflate(sdTriangleRight(triUV, halfWidth * (1.0 - _HitFade), halfHeight), 0.002);
                addElement(color, ACTIVE_COLOR, fgTriangleDist);

                // Slider handle
                float handleDist = sdSphere(
                    translate(uv, float2(_HitFade * fullWidth + marginX, size.y * 0.5)),
                    HANDLE_RADIUS
                );
                addElement(color, ACTIVE_COLOR, handleDist);

                // Slider vertical grip
                float gripDist = abs(uv.x - _HitFade * halfWidth * 2 - marginX) - OUTLINE_WIDTH;
                addElement(color, ACTIVE_COLOR, gripDist);

                return color;
            }

            float3 drawExpFalloffArea(float2 uv, float2 size)
            {
                float3 color = FOREGROUND_COLOR;

                // Background fill
                float2 triUV = -(uv - float2(size.x / 2, size.y / 2));

                float halfWidth = 0.45 * size.x;
                float halfHeight = 0.37 * size.y;
                float fullWidth = halfWidth * 2;
                float fullHeight = halfHeight * 2;
                float bgTriangleDist = inflate(sdTriangleRight(triUV, halfWidth, halfHeight), 0.002);
                addElement(color, INACTIVE_COLOR, bgTriangleDist);

                // Current active area
                float remainingWidth = size.x - fullWidth;
                float remainingHeight = size.y - fullHeight;
                float marginX = remainingWidth / 2;
                float marginY = remainingHeight / 2;
                float triUVx = remap(uv.x, marginX, size.x-marginX, 0, 1);
                float triUVy = remap(uv.y, marginY, size.y-marginY, 0, 1);
    
                float expFalloffY = (1.0 + (pow(triUVx, 4.0) * _ExpFalloff) - _ExpFalloff) * triUVx;
                float fgDist = inflate((1.0 - triUVy) - expFalloffY, 0.02);
                addElement(color, ACTIVE_COLOR, max(bgTriangleDist, fgDist));

                // Slider handle
                float handleDist = sdSphere(
                    translate(uv, float2(_ExpFalloff * fullWidth + marginX, size.y * 0.5)),
                    HANDLE_RADIUS
                );
                addElement(color, ACTIVE_COLOR, handleDist);

                // Slider vertical grip
                float gripDist = abs(uv.x - _ExpFalloff * halfWidth * 2 - marginX) - OUTLINE_WIDTH;
                addElement(color, ACTIVE_COLOR, gripDist);

                return color;
            }

            float3 drawFourBandArea(float2 uv, float2 size)
            {
                float3 color = FOREGROUND_COLOR;

                float2 sliceSize = float2(size.x, size.y / 4.0);
                float strength = getBandAmplitudeLerp((1.0 - uv.y / size.y) * 4.0, uv.x / size.x * 32.0);
                float3 sliceColor = getBandColorLerp(uv.y / sliceSize.y);
                sliceColor = lerp(sliceColor, sliceColor * 10, pow(strength, 2.0));

                return sliceColor;
            }

            float3 drawHueArea(float2 uv, float2 size)
            {
                float hue = uv.x / size.x;
                float3 color = AudioLinkHSVtoRGB(float3(hue, 1.0, 1.0));

                float sliderOffset = size.x * _Hue;
                float handleDist = sdSphere(
                    translate(uv, float2(sliderOffset, size.y * 0.5)),
                    HANDLE_RADIUS
                );
                addElement(color, ACTIVE_COLOR, handleDist);

                float gripDist = abs(uv.x - sliderOffset) - OUTLINE_WIDTH;
                addElement(color, ACTIVE_COLOR, gripDist);

                return color;
            }

            float3 drawSaturationValueArea(float2 uv, float2 size)
            {
                float2 scaledUV = uv / size;
                float3 color = AudioLinkHSVtoRGB(float3(_Hue, scaledUV.x, 1.0 - scaledUV.y));

                float handleDist = shell(sdSphere(
                    translate(uv, float2(_Saturation, _Value) * size),
                    HANDLE_RADIUS
                ), 0.001);
                addElement(color, ACTIVE_COLOR, handleDist);

                return color;
            }

            float3 drawColorChordToggle(float2 uv, float2 size)
            {
                float colorIndex = uv.x / size.x * 3.97;
                float3 a = AudioLinkData(ALPASS_THEME_COLOR0 + uint2(0, 0));
                float3 b = AudioLinkData(ALPASS_THEME_COLOR0 + uint2(1, 0));
                float3 c = AudioLinkData(ALPASS_THEME_COLOR0 + uint2(2, 0));
                float3 d = AudioLinkData(ALPASS_THEME_COLOR0 + uint2(3, 0));
                
                // If no music is playing, let's just show theme colors so it isn't black
                if (!any(a) && !any(b) && !any(c) && !any(d))
                {
                    a = _CustomColor0;
                    b = _CustomColor1;
                    c = _CustomColor2;
                    d = _CustomColor3;
                }

                return selectColorLerp(colorIndex, a, b, c, d);
            }

            float3 drawUI(float2 uv)
            {
                float3 color = BACKGROUND_COLOR;

                const float margin = 0.03;
                float currentY = 0;

                // Top area
                float2 topAreaOrigin = translate(uv, FRAME_MARGIN);
                float2 topAreaSize = float2(1.0 - FRAME_MARGIN * 2, 0.35);
                float topAreaDist = sdRoundedBoxTopLeft(topAreaOrigin, topAreaSize, CORNER_RADIUS);
                addElement(color, drawTopArea(topAreaOrigin), topAreaDist);
                currentY += topAreaSize.y + margin;

                const float gainSliderHeight = 0.17;
                const float gainSliderWidth = topAreaSize.x - gainSliderHeight - margin;

                // Gain slider
                float2 gainSliderOrigin = translate(uv, FRAME_MARGIN + float2(0, currentY));
                float2 gainSliderSize = float2(gainSliderWidth, gainSliderHeight);
                float gainSliderDist = sdRoundedBoxTopLeft(gainSliderOrigin, gainSliderSize, CORNER_RADIUS);
                addElement(color, drawSlider(gainSliderOrigin, gainSliderSize, INACTIVE_COLOR, ACTIVE_COLOR, _Gain / 2.0f), gainSliderDist);

                // Autogain button
                float2 autogainButtonOrigin = translate(uv, FRAME_MARGIN + float2(gainSliderWidth + margin, currentY));
                float2 autogainButtonSize = float2(gainSliderHeight, gainSliderHeight);
                float autogainButtonDist = sdRoundedBoxTopLeft(autogainButtonOrigin, autogainButtonSize, CORNER_RADIUS);
                addElement(color, drawAutoGainButton(autogainButtonOrigin, autogainButtonSize), autogainButtonDist);
                currentY += autogainButtonSize.y + margin;

                // Hit fade
                float2 hitFadeAreaOrigin = translate(uv, FRAME_MARGIN + float2(0, currentY));
                float2 hitFadeAreaSize = float2(topAreaSize.x * 0.5 - margin * 0.5, gainSliderHeight);
                float hitFadeAreaDist = sdRoundedBoxTopLeft(hitFadeAreaOrigin, hitFadeAreaSize, CORNER_RADIUS);
                addElement(color, drawHitFadeArea(hitFadeAreaOrigin, hitFadeAreaSize), hitFadeAreaDist);
                
                // Exp fallof
                float2 expFalloffAreaOrigin = translate(uv, FRAME_MARGIN + float2(hitFadeAreaSize.x + margin, currentY));
                float2 expFalloffAreaSize = float2(topAreaSize.x * 0.5 - margin * 0.5, gainSliderHeight);
                float expFalloffAreaDist = sdRoundedBoxTopLeft(expFalloffAreaOrigin, expFalloffAreaSize, CORNER_RADIUS);
                addElement(color, drawExpFalloffArea(expFalloffAreaOrigin, expFalloffAreaSize), expFalloffAreaDist);
                currentY += expFalloffAreaSize.y + margin;
                
                // 4-band
                float2 fourBandOrigin = translate(uv, FRAME_MARGIN + float2(0, currentY));
                float2 fourBandSize = float2(topAreaSize.x, 0.3);
                float fourBandDist = sdRoundedBoxTopLeft(fourBandOrigin, fourBandSize, CORNER_RADIUS);
                addElement(color, drawFourBandArea(fourBandOrigin, fourBandSize), fourBandDist);
                currentY += fourBandSize.y + margin;

                // Gray out irrelevant controls
                float themeColorMultiplier = lerp(0.2, 1.0, _ThemeColorMode);
                float colorChordMultiplier = lerp(1.0, 0.2, _ThemeColorMode);

                // Theme colors
                float2 colorSize = float2(topAreaSize.x * 0.25 - margin * 0.75, 0.15);
                uint colorIndex = uv.x * 4.0;
                float2 colorOrigin = translate(uv, FRAME_MARGIN + float2(0, currentY) + float2(colorIndex * (colorSize.x + margin), 0));
                float colorDist = sdRoundedBoxTopLeft(colorOrigin, colorSize, CORNER_RADIUS);
                float3 colors[4] = { _CustomColor0, _CustomColor1, _CustomColor2, _CustomColor3 };
                addElement(color, colors[colorIndex] * themeColorMultiplier, colorDist);
                if (colorIndex == _SelectedColor % 4)
                {
                    float shellDist = shell(colorDist, OUTLINE_WIDTH);
                    addElement(color, ACTIVE_COLOR * themeColorMultiplier, shellDist);
                }
                currentY += colorSize.y + margin;

                // Saturation / Value
                float2 satOrigin = translate(uv, FRAME_MARGIN + float2(0, currentY));
                float2 satSize = float2(colorSize.x, 0.2);
                float satDist = sdRoundedBoxTopLeft(satOrigin, satSize, CORNER_RADIUS);
                addElement(color, drawSaturationValueArea(satOrigin, satSize) * themeColorMultiplier, satDist);

                // Hue
                float2 hueOrigin = translate(uv, FRAME_MARGIN + float2(satSize.x + margin, currentY));
                float2 hueSize = float2(topAreaSize.x * 0.5 - margin * 0.5, 0.2);
                float hueDist = sdRoundedBoxTopLeft(hueOrigin, hueSize, CORNER_RADIUS);
                addElement(color, drawHueArea(hueOrigin, hueSize) * themeColorMultiplier, hueDist);

                // CC toggle
                float2 ccToggleOrigin = translate(uv, FRAME_MARGIN + float2(satSize.x + margin, currentY) + float2(hueSize.x + margin, 0));
                float2 ccToggleSize = float2(colorSize.x, 0.2);
                float ccToggleDist = sdRoundedBoxTopLeft(ccToggleOrigin, ccToggleSize, CORNER_RADIUS);
                addElement(color, drawColorChordToggle(ccToggleOrigin, ccToggleSize) * colorChordMultiplier, ccToggleDist);
                if (_ThemeColorMode == 0)
                {
                    float shellDist = shell(ccToggleDist, OUTLINE_WIDTH);
                    addElement(color, ACTIVE_COLOR, shellDist);
                }
                
                return color;
            }

            float4 frag (v2f i) : SV_Target
            {
                float2 uv = float2(i.uv.x, 1.0 - i.uv.y);
                uv.y *= 0.3398717 / 0.218; // aspect ratio
                if (uv.x < 0) discard;
                return float4(drawUI(uv), 1);
            }
            ENDCG
        }
    }
}