Alexander Deplov

Animated circles from the center to outside v2

Animated circles from the center to outside v2

Code

var bg = new Path.Rectangle({
    size: view.bounds,
    fillColor: 'black',
    position: view.center
})
var rootGroup = new Group()
for (var i = 1; i < 10; i++) {
    createCircles(5 * i + 10, 20 * i + 100)
}

function createCircles(max, distanceFromCenter) {
    var angle = 360 / max
    var group = new Group()
    for (var i = 0; i < max; i++) {
        var circle = new Path.Rectangle({
            size: [10, 10],
            fillColor: 'blue',
            center: [view.size.width / 2, view.size.height / 2 + distanceFromCenter],
            parent: group,
            applyMatrix: false,
            radius: 10,
        })
        circle.onFrame = function(event) {
            var scaleAnim = (2.5 + Math.sin(i + event.count * 0.02 - i * 20)) / 2.5
            this.scaling = scaleAnim
            this.fillColor.hue += Math.cos(i + event.count * 0.02 - i * 30)
            this.position.y += Math.sin(i * 30 + event.count * 0.02 - i * 40)
            this.scaling = Math.sin(i + event.count * 0.05 - i * 40) * 2.5
            this.fillColor.lightness = scaleAnim / i * 20
            group.position.y = view.center.y + Math.cos(i + event.count * 0.04 - i * 40)
        }
        group.onFrame = function(event) {
            var scaleAnim = (2.5 + Math.sin(i + event.count * 0.02 - i * 20)) / 2.5
            this.rotate(0.1 * scaleAnim)
        }
        circle.rotate(angle * i, view.center + new Point(50, 0))
    }
    rootGroup.addChild(group)
}
rootGroup.position = view.center