From 89fa598c3cd8a898103928f5d6a0d2d267771e14 Mon Sep 17 00:00:00 2001 From: Zsolt Kocsi Date: Sat, 30 Sep 2023 10:31:04 +0100 Subject: [PATCH 1/4] Update content description --- .../kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt index 852ecf91..0c2f0402 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt +++ b/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt @@ -151,7 +151,7 @@ class PuzzyxAppNode( ) { Icon( imageVector = if (isAutoPlayOn) Icons.Filled.Pause else Icons.Filled.PlayArrow, - contentDescription = "Toggle manual controls", + contentDescription = "Toggle auto-play", tint = MaterialTheme.colorScheme.onPrimaryContainer, modifier = Modifier.alpha(if (isAutoPlayOn) 0.035f else 1f), ) From 11be1fd81e6f2d95879a53698817dfd8fa23f8d2 Mon Sep 17 00:00:00 2001 From: Zsolt Kocsi Date: Tue, 3 Oct 2023 14:02:59 +0100 Subject: [PATCH 2/4] Automatically calculate target radius --- .../kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt | 8 -------- .../kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt | 8 +++++--- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt index 0c2f0402..17dba1d9 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt +++ b/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt @@ -23,8 +23,6 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape -import androidx.compose.ui.platform.LocalDensity -import androidx.compose.ui.unit.max import com.bumble.appyx.components.backstack.BackStack import com.bumble.appyx.components.backstack.BackStackModel import com.bumble.appyx.components.backstack.operation.replace @@ -192,18 +190,12 @@ private fun ClipShape(progress: Float): Shape { val (meshMin, meshMax) = 15 to 25 val meshSizeX = if (screenSize.widthDp > screenSize.heightDp) meshMax else meshMin val meshSizeY = if (screenSize.widthDp > screenSize.heightDp) meshMin else meshMax - val maxRadius = remember(screenSize) { - with(density) { - max(screenSize.widthDp, screenSize.heightDp).toPx() / meshMin * 1.5f - } - } val shape by remember(progress) { mutableStateOf( DottedMeshShape( meshSizeX, meshSizeY, - maxRadius, progress ) ) diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt index 0318a464..93927681 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt +++ b/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt @@ -13,6 +13,7 @@ import com.bumble.appyx.interactions.core.annotations.FloatRange import com.bumble.appyx.interactions.core.ui.math.clamp import com.bumble.appyx.interactions.core.ui.math.lerpFloat import com.bumble.puzzyx.math.mapValueRange +import java.lang.Integer.max import kotlin.math.abs import kotlin.math.sqrt @@ -23,7 +24,7 @@ import kotlin.math.sqrt * Expecting a [progress] value that represents the state of the animation in the [0f..1f] range, * each circle's radius will be calculated for the current frame such that: * - the starting value for radius is 0 - * - the maximum radius is [maxRadius] + * - the maximum radius is determined automatically based on mesh size * - the radius animation for a given circle is delayed based on its position in the mesh, * center ones starting first, gradually followed by ones closer to the edges * @@ -33,7 +34,6 @@ import kotlin.math.sqrt class DottedMeshShape( private val meshSizeX: Int, private val meshSizeY: Int, - private val maxRadius: Float, @FloatRange(from = 0.0, to = 1.0) private val progress: Float = 0f ) : Shape { @@ -44,6 +44,7 @@ class DottedMeshShape( ): Outline { val (width, height) = size val progressDelayed = lerpFloat(-1.0f, 1f, progress) + val targetRadius = size.maxDimension / max(meshSizeX, meshSizeY) val sheet = Path().apply { addRect(Rect(0f, 0f, width, height)) @@ -53,6 +54,7 @@ class DottedMeshShape( val halfMeshWidth = 0.5f * (width / appliedMeshSizeX) val halfMeshHeight = 0.5f * (height / appliedMeshSizeY) val clampRadius = sqrt(halfMeshWidth * halfMeshWidth + halfMeshHeight * halfMeshHeight) + val dots = Path().apply { for (y in 0 until meshSizeY) { for (x in 0 until meshSizeX) { @@ -72,7 +74,7 @@ class DottedMeshShape( fromRangeMin = 0f, fromRangeMax = 2f, destRangeMin = 0f, - destRangeMax = maxRadius + destRangeMax = targetRadius ), min = 0f, max = clampRadius, From c0abd609399c9d6d11ef75b78153bb1137ec651c Mon Sep 17 00:00:00 2001 From: Zsolt Kocsi Date: Tue, 3 Oct 2023 14:04:18 +0100 Subject: [PATCH 3/4] Max out value range at 0,1 instead of 0,2 --- .../kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt index 93927681..310861c0 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt +++ b/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt @@ -66,13 +66,15 @@ class DottedMeshShape( y = lerpFloat(0f, height, v) ) + val value = (progressDelayed + + (0.5f - abs(u - 0.5f)) + + (0.5f - abs(v - 0.5f))) + val radius = clamp( x = mapValueRange( - value = progressDelayed - + (0.5f - abs(u - 0.5f)) - + (0.5f - abs(v - 0.5f)), + value.coerceAtMost(1f), fromRangeMin = 0f, - fromRangeMax = 2f, + fromRangeMax = 1f, destRangeMin = 0f, destRangeMax = targetRadius ), From 43e30b76bae6f0841af29bd1b431549c1c9a50c4 Mon Sep 17 00:00:00 2001 From: Zsolt Kocsi Date: Tue, 3 Oct 2023 14:06:20 +0100 Subject: [PATCH 4/4] Update mesh size to 16:9 ratio --- .../kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt index 17dba1d9..be6445c9 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt +++ b/shared/src/commonMain/kotlin/com/bumble/puzzyx/node/app/PuzzyxAppNode.kt @@ -186,8 +186,7 @@ class PuzzyxAppNode( @Composable private fun ClipShape(progress: Float): Shape { val screenSize = LocalScreenSize.current - val density = LocalDensity.current - val (meshMin, meshMax) = 15 to 25 + val (meshMin, meshMax) = 14 to 25 val meshSizeX = if (screenSize.widthDp > screenSize.heightDp) meshMax else meshMin val meshSizeY = if (screenSize.widthDp > screenSize.heightDp) meshMin else meshMax