background tweaks

app/src/main/java/com/geode/launcher/main/Background.kt

@@ -16,10 +16,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.max
+import androidx.compose.ui.unit.min
 import androidx.compose.ui.zIndex
-import kotlin.math.ceil
+import kotlin.math.sin
+import kotlin.random.Random
 
 val BACKGROUND_INITIAL = Color(0xff_4b_31_68)
 val BACKGROUND_BOTTOM = Color(0xff_19_10_23)
@@ -41,46 +45,57 @@ fun WithWave(modifier: Modifier = Modifier, contents: @Composable () -> Unit) {
     ) {
         contents()
 
+        val configuration = LocalConfiguration.current
+        val screenHeight = configuration.screenHeightDp.dp
+
         WaveBackground(
             color = WAVE_COLOR_1,
             period = 500.dp,
-            amplitude = 20.dp,
+            periodMod = 200.dp,
+            amplitude = 30.dp,
+            amplitudeMod = 20.dp,
             baseHeight = 170.dp,
-            animationTimeMs = 5_000,
+            animationTimeMs = 20_000,
             modifier = Modifier.fillMaxSize().zIndex(-4.0f)
         )
 
         WaveBackground(
             color = WAVE_COLOR_2,
             period = 600.dp,
+            periodMod = 200.dp,
             amplitude = 20.dp,
+            amplitudeMod = 20.dp,
             baseHeight = 130.dp,
-            animationTimeMs = 6_000,
+            animationTimeMs = 24_000,
             modifier = Modifier.fillMaxSize().zIndex(-3.0f)
         )
 
         WaveBackground(
             color = WAVE_COLOR_3,
             period = 800.dp,
+            periodMod = 200.dp,
             amplitude = 20.dp,
+            amplitudeMod = 15.dp,
             baseHeight = 80.dp,
-            animationTimeMs = 8_000,
+            animationTimeMs = 27_000,
             modifier = Modifier.fillMaxSize().zIndex(-2.0f)
         )
 
         WaveBackground(
             color = WAVE_COLOR_4,
-            period = 1000.dp,
+            period = 900.dp,
-            amplitude = 20.dp,
+            periodMod = 200.dp,
+            amplitude = 30.dp,
+            amplitudeMod = 20.dp,
             baseHeight = 50.dp,
-            animationTimeMs = 10_000,
+            animationTimeMs = 30_000,
             modifier = Modifier.fillMaxSize().zIndex(-1.0f)
         )
     }
 }
 
 @Composable
-fun WaveBackground(color: Color, period: Dp, amplitude: Dp, baseHeight: Dp, animationTimeMs: Int, modifier: Modifier = Modifier) {
+fun WaveBackground(color: Color, period: Dp, periodMod: Dp, amplitude: Dp, amplitudeMod: Dp, baseHeight: Dp, animationTimeMs: Int, modifier: Modifier = Modifier) {
     val infiniteTransition = rememberInfiniteTransition(label = "Wave Animation Container")
     val offset by infiniteTransition.animateFloat(
         initialValue = 0.0f,
@@ -91,37 +106,56 @@ fun WaveBackground(color: Color, period: Dp, amplitude: Dp, baseHeight: Dp, anim
         label = "Wave Animation"
     )
 
+    val seed = remember { Random.Default.nextInt() }
+
     val path = remember { Path() }
 
     Canvas(modifier = modifier) {
         val baseHeightPx = baseHeight.toPx()
         val periodPx = period.toPx()
         val amplitudePx = amplitude.toPx()
+        val periodModPx = periodMod.toPx()
+        val amplitudeModPx = amplitudeMod.toPx()
 
         val halfPeriod = periodPx / 2
-        val quarterPeriod = periodPx / 4
 
         drawPath(path, color = color)
         path.reset()
 
-        val startOffset = (offset / 360.0f) * periodPx
+        val radOffset = Math.toRadians(offset.toDouble()).toFloat()
 
-        path.moveTo(-startOffset, size.height - baseHeightPx)
+        path.moveTo(0.0f, size.height - baseHeightPx)
+
+        var peakIdx = 0.0f
+        var currentX = 0.0f
+        val maxX = size.width
+
+        while (currentX < maxX) {
+            // using sin is weird because it causes the animation to slow towards the ends
+            // that being said, it is a really cheap way of getting a repeating value between 0 and 1
+
+            val dxFactor = sin(peakIdx + radOffset) * periodModPx
+            val dx = halfPeriod + dxFactor
+
+            val dyFactor = sin(peakIdx + radOffset) * amplitudeModPx
+            val dy = amplitudePx + dyFactor
+            peakIdx += seed
 
-        repeat(ceil((size.width + startOffset) / periodPx).toInt()) {
             path.relativeQuadraticBezierTo(
-                dx1 = quarterPeriod,
+                dx / 2,
-                dy1 = -2 * amplitudePx,
+                -dy,
-                dx2 = halfPeriod,
+                dx,
-                dy2 = 0f,
+                0.0f
             )
 
             path.relativeQuadraticBezierTo(
-                dx1 = quarterPeriod,
+                dx / 2,
-                dy1 = 2 * amplitudePx,
+                dy,
-                dx2 = halfPeriod,
+                dx,
-                dy2 = 0f,
+                0.0f
             )
+
+            currentX += dx * 2
         }
 
         path.lineTo(size.width, size.height)