HalfCircles.kt

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.StrokeJoin
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp
import com.adriano.compose.util.angleToRadians
import kotlinx.coroutines.delay
import kotlin.math.cos
import kotlin.math.sin

//https://twitter.com/beesandbombs/status/1327239927080345600?s=19
@Composable
fun ArcCircle() {

    val millisState = remember { mutableStateOf(0) }
    LaunchedEffect(subject = true) {
        while (true) {
            delay(1)
            millisState.value++
        }
    }

    val path = remember { Path() }

    Canvas(modifier = Modifier.fillMaxSize().background(color = Color.White)) {
        val radius = 100
        var startAngleOne = (50 + millisState.value)
        var endAngleOne = (130 + millisState.value)
        var startAngleTwo = (230 + millisState.value)
        var endAngleTwo = (310 + millisState.value)

        var startAngleOneTwo = (140 - millisState.value)
        var endAngleOneTwo = (220 - millisState.value)
        var startAngleTwoTwo = (320 - millisState.value)
        var endAngleTwoTwo = (400 - millisState.value)

        val startCenterX = size.width / 2
        val startCenterY = size.height / 2

        var nextCenterY: Float

        repeat(6) {

            nextCenterY = startCenterY + radius * 1.5f * it

            if (it % 2 == 0) {
                drawQuarterCircle(
                    radius,
                    path,
                    startAngleOne,
                    endAngleOne,
                    startCenterX,
                    nextCenterY
                )
                drawQuarterCircle(
                    radius,
                    path,
                    startAngleTwo,
                    endAngleTwo,
                    startCenterX,
                    nextCenterY
                )
            } else {
                drawQuarterCircle(
                    radius,
                    path,
                    startAngleOneTwo,
                    endAngleOneTwo,
                    startCenterX,
                    nextCenterY
                )
                drawQuarterCircle(
                    radius,
                    path,
                    startAngleTwoTwo,
                    endAngleTwoTwo,
                    startCenterX,
                    nextCenterY
                )
            }
        }
    }
}

private fun DrawScope.drawQuarterCircle(
    radius: Int,
    path: Path,
    startAngle: Int,
    endAngle: Int,
    centerX: Float,
    centerY: Float,
) {

    path.reset()

    for (angle in startAngle..endAngle step 1) {
        val rad = angleToRadians(angle.toFloat())
        val x = centerX + (radius * cos(rad))
        val y = centerY + (radius * sin(rad))
        if (angle == startAngle) path.moveTo(x, y)
        else path.lineTo(x, y)
    }

    drawPath(
        path = path,
        color = Color.Gray,
        style = Stroke(
            width = 4.dp.toPx(),
            join = StrokeJoin.Round,
        )
    )
}