Alexander Deplov

Animated circles from the center to outside

Animated circles from the center to outside

Code

var bg = new Path.Rectangle({
    size: view.bounds,
    fillColor: 'black',
    position: view.center
})
var clones = 30
var amountOfRows = 10
var radiusInPeak = 8
var radiusMultiplierOnTheEnd = amountOfRows / clones // 0.33
var innerRadius = 50
var rootGroup = new Group()
for (var i = 1; i < 7; i++) {
    createCircles(5 * i, 40 * i)
}

function createCircles(max, distanceFromCenter) {
    var angle = 360 / max
    var group = new Group()
    group.applyMatrix = false
    for (var i = 0; i < max; i++) {
        var circle1 = new Path.Circle({
            radius: 10,
            fillColor: '#00ffff',
            center: [view.size.width / 2, view.size.height / 2 + distanceFromCenter],
            parent: group,
            applyMatrix: false
        })
        var circle = new Group()
        circle.addChild(circle1)
        circle.applyMatrix = false
        circle.onFrame = function(event) {
            var scaleAnim = (1.5 + Math.sin(i + event.count * 0.02 - i * 10)) / 2
            this.scaling = scaleAnim
            this.fillColor.hue += Math.sin(i + event.count * 0.02 - i * 120) * 3
            this.opacity += Math.sin(i + event.count * 0.1 - i * 1.5)
            this.opacity += Math.sin(Math.sin(i + event.count * 0.2)) * 0.1
        }
        circle.rotate(angle * i, view.center)
        group.onFrame = function(event) {}
    }
    rootGroup.addChild(group)
}

function onFrame(event) {
    for (var i = 0; i < rootGroup.children.length; i++) {
        var rows = rootGroup.children[i]
    }
}