Alexander Deplov

Rainbow circles follows cursor

Rainbow circles follows cursor

Code

var points = 20
var length = 20
var path = new Path()
var start = view.center / [1, 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: 20,
        fillColor: 'red',
        strokeColor: "red",
        strokeWidth: 0
    })

    circle.sendToBack()
    circles.push(circle)    
    circle.scale(3 * i)
}

for (var i = 0; i < points; i++){
    circles[i].fillColor.hue = 20 + 36 * 4 / points * i + 300
}


function onMouseMove(event) {
    path.firstSegment.point = event.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
    }
    
    for (var i = 0; i < path.segments.length; i++) {
        circles[i].position = path.segments[i].point
    }
}