Code
var bg = new Path.Rectangle({
size: view.bounds,
fillColor: 'black',
position: view.center
})
var points = 75
var length = 7
var path = new Path()
var start = view.center / [10, 1];
for (var i = 0; i < points; i++) {
path.add(start + new Point(i * length, 0))
}
var circles = []
for (var i = 0; i < path.segments.length; i++) {
var circle = new Path.Circle({
center: path.segments[i].point,
radius: 40,
fillColor: 'red',
applyMatrix: false,
})
circles.push(circle)
}
var t = 0
function onFrame(event) {
t += 0.5
var slowerTime = t / 10
var circle1X = view.bounds.width / 2 + Math.sin(slowerTime / 2) * 350
var circle1Y = view.bounds.height / 2 + Math.sin(slowerTime) * 250 / 2
var point = new Point(circle1X, circle1Y)
path.firstSegment.point = point
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i]
var nextSegment = segment.next
var vector = segment.point - nextSegment.point
vector.length = length * 2
nextSegment.point = segment.point - vector
}
updateCirclesPosition(t)
}
var center = new Path.Circle({
radius: 40,
fillColor: 'lightGreen',
center: view.center,
applyMatrix: false
})
center.bringToFront()
center.fillColor = 'white'
var centerClone = center.clone()
centerClone.fillColor = 'lightGreen'
var centerClone1 = center.clone()
centerClone1.fillColor = 'lightGreen'
var halfSegments = path.segments.length - 1
function updateCirclesPosition(t) {
for (var i = 0; i < path.segments.length; i++) {
center.position = path.segments[path.segments.length - 1].point
centerClone.position = path.segments[0].point
centerClone1.position = path.segments[halfSegments / 2].point
circles[i].position = path.segments[i].point
circles[i].fillColor.hue = 20 + 36 * 3 / points * i
circles[i].fillColor.hue += 1690
circles[i].scaling = path.segments.length / i
circles[i].fillColor.hue += t
}
}