Alexander Deplov

Drag to update animation

Drag to update animation

Code

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

var randGroup = new Group()

function createPoints(){
    randGroup.clear()
    for (var i = 0; i < 50; i++){
        var object = new Path.Circle(new Point(Math.random() * view.size.width, Math.random() * view.size.height), Math.random() * 15)

        object.strokeColor = 'blue'
        object.strokeColor.hue += Math.random() * 200
        object.applyMatrix = false
        randGroup.addChild(object)


        var clone = object.clone()
        clone.fillColor = clone.strokeColor
        clone.applyMatrix = false
        clone.onFrame = function(event){
            this.position.y += Math.sin(event.count * Math.random() * 100) * Math.random() * 4
            this.position.x += Math.sin(event.count * Math.random() * 100) * Math.random() * 4
        }

        var tweenClone = clone.tweenTo(
            { opacity: 0 },
            { duration: Math.random() * 40000 + 500, start: true }
        )

        var tween = object.tweenTo(
            { opacity: 0 },
            { duration: Math.random() * 1000 + 500, start: true }
        )
    }
}

createPoints()

var red = 'red'
var group = new Group()

var cursor = new Path.Circle(view.center, 25)
cursor.fillColor = 'white'
cursor.strokeWidth = 1
cursor.strokeColor = 'red'
group.addChild(cursor)

var point = new Path.Circle(view.center, 4)
point.fillColor = red
group.addChild(point)


group.onMouseEnter = function(event){
    cursor.strokeWidth = 2
}

group.onMouseLeave = function(event){
    cursor.strokeWidth = 0
}

group.onMouseDrag = function(event){
    this.position += event.delta
    randGroup.position.x = this.position.x + event.point.x 

    randGroup.children.map(function(object, i){
        if (object.position.x > view.size.width || object.position.x < 0){
            object.remove()
            createPoints()
        }
    })

}