Jumping lines v2

Code

var bg = new Path.Rectangle({
    size: view.size,
    fillColor: 'black'
})

var rectSize = [7, 40]
var amount = 20
var waveLength = 10
var animationSpeed = 0.05
var padding = 20
var verticalGap = -40
var yScaling = 1.1
var colorWidth = 10

var array = []
var rootGroup = new Group()

function createPath(delay){
    var group = new Group()
    var path = new Path.Rectangle({
        size: rectSize,
        fillColor: 'blue',
        position: view.center,
        parent: group,
        radius: rectSize[0]/2,
        applyMatrix: false,
    })

    var path2 = path.clone()

    path2.position.y += 40
    path2.sendToBack()

    path.fillColor.hue += colorWidth * delay
    path2.fillColor.hue += colorWidth * delay

    path.onFrame = function(event){
        this.fillColor.hue += -0.2
    }

    path2.onFrame = function(event){
        this.position.y = view.center.y + Math.sin(animationSpeed * event.count + delay) * waveLength + verticalGap
        this.position.y += Math.sin(animationSpeed * event.count * 2) * 8
        this.scaling = [1, yScaling]
        this.fillColor.hue += -0.2
    }

    

    return group
}

for (var i = 0; i < amount; i++){
    var path = createPath(i)
    array.push(path)
    rootGroup.addChild(path)
    path.position.x += i * padding
}


rootGroup.position = view.center