Alexander Deplov

Colored lines goes around v4

Colored lines goes around v4

Code

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

var amount = 12
var innerCircle = 200
var outerCircle = 200
var strokeWidth = 10
var animationSpeed = 0.01
var animationDistanceX = 200
var animationDistanceY = 200

var arrayInner = []
var arrayOuter = []
var array = []

function createPoints(amount, distanceFromCenter, arrayToFeed){
    
    for (var i = 0; i < amount; i++){
     
        var innerPoints = new Path.Circle({
            radius: 2,
            fillColor: 'yellow',
            position: view.center + [distanceFromCenter, 0],
            opacity: 0
        })
     
        innerPoints.rotate(360/amount * i, view.center)
        arrayToFeed.push(innerPoints.position)
    
    }


}

 
function createLine(){
    for (var i = 0; i < amount; i++){
    
        var path = new Path.Line({
            from: arrayInner[i],
            to: arrayOuter[i],
            strokeColor: 'blue',
            strokeWidth: strokeWidth,
            strokeCap: 'round',
            blendMode: 'screen'
        })  
        path.rotate(360 / amount * i); // Orient stars
        
        var distance = path.getPointAt(path.length/10)
        path.insert(1, distance)
        
        path.strokeColor.hue = 360 / amount * i

        path.onFrame = function(event){
            this.strokeColor.hue -= 1
            
            this.segments[0].point.x = view.center.x + Math.sin(animationSpeed * event.count + i * animationDistanceX) * animationDistanceY * 1.5
            this.segments[0].point.y = view.center.y + Math.cos(animationSpeed * event.count + i * animationDistanceX) * animationDistanceY * 1.5
        
            this.segments[1].point.x = view.center.x + Math.sin(animationSpeed * event.count + i * animationDistanceX) * animationDistanceY 
            this.segments[1].point.y = view.center.y + Math.cos(animationSpeed * event.count + i * animationDistanceX) * animationDistanceY
            this.smooth()
        }   
        array.push(path)
        
    }
    
}



createPoints(amount, innerCircle, arrayInner)
createPoints(amount, outerCircle, arrayOuter)
createLine()