Code
var bg = new Path.Rectangle({
size: view.bounds,
fillColor: 'black',
position: view.center
})
var points = 75 //def: 75, 125, 5
var length = 8 //def: 8, 50
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'
})
circles.push(circle)
}
var t = 0
function onFrame(event) {
t += 1
var slowerTime = t / 10
var circle1X = view.bounds.width / 2 + Math.sin(slowerTime / 2) * 350 // * Math.cos(slowerTime)
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
nextSegment.point = segment.point - vector //- event.delta / 3
}
updateCirclesPosition(t)
}
function updateCirclesPosition(t) {
for (var i = 0; i < path.segments.length; i++) {
circles[i].position = path.segments[i].point
circles[i].fillColor.hue = 20 + 36 * 3 / points * i
circles[i].fillColor.hue += view.size.width
}
}