How to round and resize two rectangles and four circles creating a square shape in Kotlin?

Question

I am learning Kotlin and I am facing a challenge here:

How can I round and resize two rectangles and four circles creating a square shape in Kotlin using canvas, until it gets a ball or a perfect square?

We have this code already:

    import pt.isel.canvas.*

private fun Canvas.drawSquare(r: RoundSquare) {
    erase()
    val f = (r.side/2 * r.round/100f).toInt()
    val pos = Position(r.center.x,r.center.y)

    val square =
    drawRect(pos.x-150, pos.y-100,r.side+100,r.side, r.color)
    drawRect(pos.x-100, pos.y-150, r.side, r.side+100, r.color)
    drawCircle(pos.x-100, pos.y-100, f, r.color)
    drawCircle(pos.x+100, pos.y-100, f, r.color)
    drawCircle(pos.x-100, pos.y+100, f, r.color)
    drawCircle(pos.x+100, pos.y+100, f, r.color)

   return square
}

fun main () {

    onStart {

        val cv = Canvas(600, 400, WHITE)
        var roundSquare = RoundSquare(Position(300, 200), 200, 50, GREEN)
        cv.drawSquare(roundSquare)
        cv.drawText(10,400,"center=(${roundSquare.center.x},${roundSquare.center.y}) side=${roundSquare.side} round=${roundSquare.round}% color=0x${roundSquare.color.toString(16).padStart(6, '0').toUpperCase()}",BLACK,15)
        cv.onMouseDown {
            roundSquare = roundSquare.copy(center = Position(it.x, it.y))
            cv.drawSquare(roundSquare)
            return@onMouseDown cv.drawText(10,390,"center=(${roundSquare.center.x},${roundSquare.center.y}) side=${roundSquare.side} round=${roundSquare.round}% color=0x${roundSquare.color.toString(16).padStart(6, '0').toUpperCase()}",BLACK,15)
        }
        cv.onKeyPressed {
            roundSquare = roundSquare.processKey(it.char)
            cv.drawSquare(roundSquare)
            return@onKeyPressed cv.drawText(10,400,"center=(${roundSquare.center.x},${roundSquare.center.y}) side=${roundSquare.side} round=${roundSquare.round}% color=0x${roundSquare.color.toString(16).padStart(6, '0').toUpperCase()}",BLACK,15)
        }

            onFinish { println("Bye") }

        }

    }

import pt.isel.canvas.BLACK
import pt.isel.canvas.WHITE

data class Position (val x:Int, val y:Int)
data class RoundSquare (val center:Position, val side:Int, val round:Int, val color:Int)

val RANGE_SIZE = 10..400
val ROUND = 0..100
val RANDOM_COLOR = BLACK..WHITE


fun RoundSquare.processKey(key: Char) = when {
        key=='r' && round > ROUND.first -> copy(round = round - 1, side = side -1)
        key=='R' && round < ROUND.last -> copy(round = round + 1, side = side + 1)
        key=='s' && side > RANGE_SIZE.first -> copy(side = side - 1, round = round - 1)
        key=='S' && side < RANGE_SIZE.last -> copy(side = side + 1, round = round + 1)

        key == 'c' -> copy(color = RANDOM_COLOR.random())
        else -> this
}

But it doesn't give me the output I need. This is the output:

Which can be resized till it shows a perfect ball or perfect square, by resizing sides and rounding circles.

If anyone could help me, I would really appreciate it.

Thanks in advance,

Answer 1

Let rounded shape center is (cx, cy), halfsize is hs.

Left x-coordinate is lx = cx - hs
Top y-coordinate is ty = cy - hs
Right x-coordinate is rx = cx + hs
Bottom y-coordinate is by = cy + hs

We want to change parameter t from 0 to 1 (or from 0 to 100%) to make needed roundness.

Circles radius is (round to integer if needed)

R = hs * t

Circle centers coordinates:

lx + R, ty + R
rx - R, ty + R
rx - R, by - R
lx + R, by - R

Two corners of rectangles:

(lx + R, ty) - (rx - R, by) 
(lx, ty + R) - (rx, by - R)