Colored circles dance

Code

var bg = new Path.Rectangle({
    size: view.size,
    fillColor: "#200A52",
    position: view.center
})
bg.fillColor.saturation = 0.3
bg.fillColor.lightness = 0.12

var rootGroup = new Group()
var array = []
var colorsArray = ["#FC0062", "#FE4CD0",  "#FFCF02", "#672EF9"]

var amountX = 6
var amountY = 6

for (var x = 0; x < amountX; x++){
    for (var y = 0; y < amountY; y++){
        var group = createTriade()
        group.position.x = x * 80
        group.position.y = y * 80
        rootGroup.addChild(group)
    }
}



function createTriade(){
    var group = new Group()
    group.name = "triadeGroup"
    
    var triangle = new Path.RegularPolygon({
        center: view.center,
        sides: 4,
        radius: 40,
        strokeColor: colorsArray[1],
        strokeWidth: 0,
        parent: group
    })
    

    for (var i = 0; i < triangle.segments.length; i++){
        var circle = new Path.Circle({
            radius: 12, //7 + i * 0.5,
            fillColor: colorsArray[1],
            position: triangle.segments[i].point,
            parent: group,
            applyMatrix: false
        })
        
        if (i % 2 == 0){
            group.rotate(25)
            circle.fillColor.lightness = 0.5
        }
        circle.fillColor.lightness = 0.8

        circle.fillColor.hue += i * 10
        array.push(circle)

    }

    group.onFrame = function(event){
        group.rotate(0.5)
    }

  
    return group
}

function onFrame(event){
    

    for (var i = 0; i < array.length; i++){
        var object = array[i]
        var anim = Math.sin(event.count * 0.14 + i) / 7 //cool: 1
        
        object.fillColor.hue += anim * 20
        object.fillColor.lightness += (Math.sin(event.count * 0.02 - i/4) / array.length) / 2
        
    }

}


rootGroup.position = view.center