Alexander Deplov

Purple rect grid circles animation wave

Purple rect grid circles animation wave

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