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