Code Sketch

cleari

val cb = canvasBounds
val width = cb.width
val height = cb.height
def size = 40
def angleBetweenCircles = 20
def windowRadius = 140
def distanceMovedAfterEveryCycle = (360 / angleBetweenCircles)
def totalCircles =
    (
        (size + windowRadius).toDouble / distanceMovedAfterEveryCycle
    ).ceil.toInt * distanceMovedAfterEveryCycle
def repeatingFrameCount = 
    (
        size.toDouble/distanceMovedAfterEveryCycle
    ).floor.toInt * distanceMovedAfterEveryCycle

animateWithState(0.0)(animationFrame)

def animationFrame(frameIndex: Double) = {

    erasePictures()

    val images = for {
        count <- 0 to totalCircles
        angle = count * angleBetweenCircles
        radius = count + (frameIndex % repeatingFrameCount)
    } yield {
        Picture.circle(size)
            .thatsTranslated(radius, 0)
            .thatsRotated(angle)
            .thatsFilledWith(red.spin(angle))
            .thatsStrokeColored(black)
            .thatsStrokeSized(5)
    }

    picStack(images).draw
    val gradient = cm.radialMultipleGradient(
        width / 2, height / 2,
        width,
        Seq(0, (windowRadius-1).toDouble / (width), windowRadius.toDouble / (width)),
        Seq(noColor, noColor, black),
        false)

    Picture.rect(height, width)
        .thatsTranslated(-width / 2, -height / 2)
        .thatsFilledWith(gradient)
        .draw

    frameIndex + 1
}