Step animation following point

Animation • Generative Art Codes • Paper.js
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paper.js</title>
<link rel="stylesheet" href="./../PaperJSEngine/style.css" />
<script type="text/javascript" src="./../PaperJSEngine/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">

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

var max = 10
var radiusOfRedCircles = 20
var radiusOfCursorCircles = 10
var distanceFromCenter = 20

var array = []
for (var i = 0; i < max; i++) {
    var circle = new Path.Circle({
        radius: 10 + radiusOfRedCircles * (Math.random() * 10),
        strokeColor: 'red',
        strokeWidth: 0.1,
        center: view.center / 2 + [Math.random() * view.center.x + distanceFromCenter, Math.random() * view.center.y + distanceFromCenter]
    })

    array.push(circle)
}

function onFrame(event) {
    pointerGroup.rotate(1, view.center)

    array.map(function(object, i) {
        var circleCloser = new Path.Circle({
            radius: radiusOfCursorCircles,
            fillColor: 'blue',
            position: view.center,
            applyMatrix: false
        })
        circleCloser.fillColor.hue += 20 * i


        circleCloser.tweenTo({
            'scaling': 2,
            'fillColor.hue': 40
        }, {
            duration: 200,
            easing: 'easeInCubic'
        })

        var nearestPoint = object.getNearestPoint(pointerGroup.position);
        circleCloser.position = nearestPoint;
        circleCloser.onFrame = function(event) {
            this.fillColor.hue += 7
            circleCloser.fillColor.hue += 10
        }

        setTimeout(function() {
            circleCloser.remove()
        }, 400)


    })

}

var pointerGroup = new Group()
var pointer = new Path.Circle({
    radius: 5,
    fillColor: 'yellow',
    center: view.center,
    parent: pointerGroup,
    opacity: 0.2
})
pointerGroup.position.x += 200

</script>
</head>
<body>
<canvas hidpi="true" id="canvas" resize style="background: black;"></canvas>
</body>
</html>