Alexander Deplov

Animated circles grid

Animated circles grid

Code

var bg = new Path.Rectangle({
    size: view.bounds,
    fillColor: 'black',
    position: view.center
})
var rootGroup = new Group()
var cloneGroup = new Group()
for (var x = 0; x < 12; x++) {
    for (var y = 0; y < 12; y++) {
        var circle = new Path.Circle({
            radius: 10,
            fillColor: 'blue',
            center: [x * 30, y * 30],
            parent: rootGroup,
            applyMatrix: false
        })
        circle.fillColor.saturation = 0.2 + Math.random() * 0.5
        var clone = circle.clone()
    }
}

function onFrame(event) {
    var max = rootGroup.children.length
    for (var i = 0; i < max; i++) {
        var circle = rootGroup.children[i]
        var scaleAnim = (2 + Math.sin(i + event.count * 0.025 - i * 10)) * 0.5
        circle.scaling = scaleAnim
        circle.fillColor.hue = (event.count * 0.02 + i) * i + max
        circle.fillColor.lightness = 0.5 * Math.sin(event.count * 0.02 + i) + 0.2
    }
}
rootGroup.position = view.center