Add toggle for dispersion in playground app

app/src/main/java/com/kyant/glass/playground/ConfigurationBottomSheet.kt

@@ -167,13 +167,19 @@ fun ConfigurationBottomSheet(
                             providerState,
                             Modifier.fillMaxWidth()
                         )
-                        SliderChip(
-                            state.dispersionHeight,
-                            stringResource(R.string.dispersion_height),
-                            { Icon(painterResource(R.drawable.star_shine_24px)) },
-                            providerState,
-                            Modifier.fillMaxWidth()
-                        )
+                        Button(
+                            { state.isDispersionEnabled = !state.isDispersionEnabled },
+                            Modifier.liquidGlass(providerState, GlassStyle(CornerShape.full)),
+                            colors = ButtonColors.filled(
+                                containerColor = primary.copy(alpha = 0.85f)
+                            )
+                        ) {
+                            Text(
+                                if (state.isDispersionEnabled) stringResource(R.string.disable_dispersion)
+                                else stringResource(R.string.enable_dispersion),
+                                Modifier.animateContentSize(MotionScheme.fastSpatial())
+                            )
+                        }
                     }
 
                     null -> {}

app/src/main/java/com/kyant/glass/playground/Preview.kt

@@ -153,6 +153,7 @@ fun Preview() {
                     shape = RoundedRectangle(state.cornerRadius.value)
                 }
                 .graphicsLayer { // dispersion effect
+                    if (!state.isDispersionEnabled) return@graphicsLayer
                     renderEffect = RenderEffect.createRuntimeShaderEffect(
                         RuntimeShader(
                             """
@@ -160,7 +161,9 @@ fun Preview() {
     
     uniform float2 size;
     uniform float cornerRadius;
+    
     uniform float dispersionHeight;
+    uniform float dispersionAmount;
     
     float lerp(float a, float b, float t) {
         return a + (b - a) * t;
@@ -206,20 +209,19 @@ fun Preview() {
             float2 normal = gradSdRoundedRectangle(centeredCoord, halfSize, cornerRadius);
             float2 tangent = normalToTangent(normal);
             
-            float dispersionFraction = 1.0 - -sd / dispersionHeight;
-            float dispersionWidth = dispersionHeight * circleMap(dispersionFraction);
-            if (dispersionWidth < 2.0) {
+            float dispersionDistance = circleMap(1.0 - -sd / dispersionHeight) * dispersionAmount;
+            if (dispersionDistance < 2.0) {
                 half4 color = image.eval(coord);
                 return color;
             }
             
             half4 dispersedColor = half4(0.0);
             half4 weight = half4(0.0);
-            float maxI = min(dispersionWidth, 20.0);
+            float maxI = min(dispersionDistance, 20.0);
             for (float i = 0.0; i < 20.0; i++) {
                 float t = i / maxI;
                 if (t > 1.0) break;
-                half4 color = image.eval(coord + tangent * float2(t - 0.5) * dispersionWidth);
+                half4 color = image.eval(coord + tangent * float2(t - 0.5) * dispersionDistance);
                 half rMask = step(0.5, t);
                 half gMask = step(0.25, t) * step(t, 0.75);
                 half bMask = step(t, 0.5);
@@ -242,7 +244,9 @@ fun Preview() {
 
                             setFloatUniform("size", size.width, size.height)
                             setFloatUniform("cornerRadius", cornerRadius)
+
                             setFloatUniform("dispersionHeight", state.refractionHeight.value.toPx())
+                            setFloatUniform("dispersionAmount", -state.refractionAmount.value.toPx())
                         },
                         "image"
                     ).asComposeRenderEffect()

app/src/main/java/com/kyant/glass/playground/PreviewState.kt

@@ -107,13 +107,7 @@ class PreviewState {
             typeConverter = Float.VectorConverter,
             valueLabel = { "%.2f".format(it) }
         )
-    val dispersionHeight: LiquidGlassParamValue<Dp> =
-        LiquidGlassParamValue(
-            initialValue = 0.dp,
-            valueRange = { 0.dp..cornerRadius.value },
-            typeConverter = Dp.VectorConverter,
-            valueLabel = { "${it.value.fastRoundToInt()} dp" }
-        )
+    var isDispersionEnabled: Boolean by mutableStateOf(false)
 
     val bleedAmount: LiquidGlassParamValue<Dp> =
         LiquidGlassParamValue(
@@ -181,7 +175,7 @@ class PreviewState {
             launch { refractionHeight.reset() }
             launch { refractionAmount.reset() }
             launch { eccentricFactor.reset() }
-            launch { dispersionHeight.reset() }
+            isDispersionEnabled = false
 
             launch { bleedAmount.reset() }
             launch { bleedBlurRadius.reset() }

app/src/main/res/values-zh-rCN/strings.xml

@@ -12,9 +12,11 @@
     <string name="colors">颜色</string>
     <string name="contrast">对比度</string>
     <string name="corner_radius">圆角半径</string>
+    <string name="disable_dispersion">禁用色散</string>
     <string name="disable_unsafe_mode">禁用不安全值</string>
     <string name="dispersion_height">色散高度</string>
     <string name="eccentric_factor">离心系数</string>
+    <string name="enable_dispersion">启用色散</string>
     <string name="enable_unsafe_mode">启用不安全值</string>
     <string name="height">高度</string>
     <string name="hide_controls">隐藏控件</string>

app/src/main/res/values/strings.xml

@@ -12,9 +12,11 @@
     <string name="colors">Colors</string>
     <string name="contrast">Contrast</string>
     <string name="corner_radius">Corner radius</string>
+    <string name="disable_dispersion">Disable dispersion</string>
     <string name="disable_unsafe_mode">Disable unsafe values</string>
     <string name="dispersion_height">Dispersion height</string>
     <string name="eccentric_factor">Eccentric factor</string>
+    <string name="enable_dispersion">Enable dispersion</string>
     <string name="enable_unsafe_mode">Enable unsafe values</string>
     <string name="height">Height</string>
     <string name="hide_controls">Hide controls</string>