glc circles

glc_circles.js

function onGLC(glc) {
    glc.loop();
    glc.size(400, 400);
    glc.setDuration(2);
    glc.setFPS(60);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    
    var circleCount = 12
    var circleCountSquare = circleCount * circleCount
    var circleRadius = width / (circleCount + 1)
    
    var innerCircleIndex = 0
    
    for(var x = 0; x < circleCount; ++x) {
        for(var y = 0; y < circleCount; ++y) {
            var outerCircle = list.addCircle({
                x: (x + 1) * circleRadius,
                y: (y + 1) * circleRadius,
                radius: circleRadius,
                fill: false,
                stroke: true,
                strokeStyle: "#121212",
                rotation: [0, 360]
            })
            
            var phase = innerCircleIndex / (circleCount * 1.06125)
            
            var innerCircle = list.addCircle({
                x: circleRadius * Math.cos(phase * Math.PI * 2.0),
                y: circleRadius * Math.sin(phase * Math.PI * 2.0),
                radius: circleRadius * 0.1,
                fill: true,
                fillStyle: "#121212",
                parent: outerCircle
            })
            
            ++innerCircleIndex
        }
    }
}