Code
var bg = new Path.Rectangle({
size: view.bounds,
fillColor: 'black',
position: view.center
})
var rootGroup = new Group()
var array = []
for (var x = 0; x < 10; x++) {
for (var y = 0; y < 4; y++) {
var group = createTriade()
group.position.x = x * 80
group.position.y = y * 80
rootGroup.addChild(group)
}
}
function createTriade() {
var group = new Group()
var triangle = new Path.RegularPolygon({
center: view.center,
sides: 6,
radius: 30,
strokeColor: 'purple',
parent: group
})
for (var i = 0; i < triangle.segments.length; i++) {
var circle = new Path.Circle({
radius: 7,
fillColor: 'purple',
position: triangle.segments[i].point,
parent: group,
applyMatrix: false
})
if (i % 2 == 0) {
group.rotate(25)
circle.fillColor.lightness = 0.5
}
circle.fillColor.hue += i * 10
array.push(circle)
}
group.onFrame = function(event) {
group.rotate(0.2)
}
return group
}
function onFrame(event) {
for (var i = 0; i < array.length; i++) {
var object = array[i]
var anim = Math.sin(event.count * 0.02 * 7 + i) / 7
object.position.y += anim
object.scaling = Math.sin(i * 2 + event.count * 0.04 + i) * 2
object.fillColor.hue += anim * 20
object.fillColor.lightness += (Math.sin(event.count * 0.02 - i / 4) / array.length) / 2
}
}
rootGroup.position = view.center