좌표값 계산

저번 포스트에서는 좌표값을 sin,cos을 이용해서 다음과 같이 일일이 계산해서 그려줬었다.

val path = Path()
val width = size.width
val height = size.height
val centerX = width / 2f
val centerY = height / 2f
val cos18 = cos(Math.toRadians(18.0).toFloat())
val sin18 = sin(Math.toRadians(18.0).toFloat())

val starLength =
    minOf(width / (2 * (sin18 + 1)), height / (2 * cos18 * (1 + sin18)))
val lenSin18 = starLength * sin18
val lenCos18 = starLength * cos18

val starWidth = 2 * (starLength + lenSin18)

val startY = centerY - starWidth / 2

path.apply {
    moveTo(centerX, startY)
    lineTo(centerX + lenSin18, startY + lenCos18)
    lineTo(centerX + lenSin18 + starLength, startY + lenCos18)
    lineTo(
        centerX + (starLength + lenSin18 * 2) * sin18,
        startY + (starLength + lenSin18 * 2) * cos18
    )
    lineTo(centerX + 2 * (starLength + lenSin18) * sin18, startY + starWidth)

    lineTo(centerX, startY + starWidth - starLength * cos(Math.toRadians(36.0).toFloat()))

    lineTo(centerX - 2 * (starLength + lenSin18) * sin18, startY + starWidth)
    lineTo(
        centerX - (starLength + lenSin18 * 2) * sin18,
        startY + (starLength + lenSin18 * 2) * cos18
    )
    lineTo(centerX - lenSin18 - starLength, startY + lenCos18)
    lineTo(centerX - lenSin18, startY + lenCos18)
    lineTo(centerX, startY)

    close()
}

각도 계산

그러나 별은 사실 돌아가면서 동일하게 그리는 거라 각도로도 계산해서 그릴 수 있다.

val path = Path()
val centerX = size.width / 2
val centerY = size.height / 2
val outerRadius = minOf(centerX, centerY)
val innerRadius = outerRadius / 2.5f
val numPoints = 5
val angle = 2.0 * PI / (numPoints * 2)

path.moveTo(
	centerX + (outerRadius * sin(0.0)).toFloat(),
	centerY - (outerRadius * cos(0.0)).toFloat()
)

for (i in 1 until numPoints * 2) {
    val r = if (i % 2 == 0) outerRadius else innerRadius
    val x = centerX + (r * sin(i * angle)).toFloat()
    val y = centerY - (r * cos(i * angle)).toFloat()
    path.lineTo(x, y)
}

path.close()

angle 만큼 돌아가면서 outerRadius, innerRadius를 번갈아가며 그린다.

그림으로 그린다면 이렇게 그리게 된다.

별 모양 변경하기

통통한 정도

innerRadius가 outerRadius에 가까워질수록 별을 통통하게 그려질 것이고. 0에 가까워질수록 뾰족해질 것이다.

이를 slider를 통해서 조절할 수 있게 해보았다.

꼭짓점 개수

for문의 횟수만 변경해주면 꼭짓점이 여러개인 별 모양을 만들 수 있다.