Alexander Deplov

Rainbow infinity sign animation

Rainbow infinity sign animation

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
    }
}