Alexander Deplov

Draw vector curves, find closer path

Draw vector curves, find closer path

Code

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

var startCircle, endCircle;
var circleRadius = 12;
var circleGroup = new Group();
var cursor = new Path.Circle({
   radius: 12,
    point: [0,0],
    strokeColor: 'white',
    strokeWidth: 2,
    opacity: 0.8
});


var path = new Path({
    strokeColor: 'blue',
    strokeWidth: 20,
    strokeCap: 'round'
});

function createPath(point){
    path.add(point);
    path.smooth({ type: 'continuous' });
    
    path.strokeColor.hue += Math.random() * 360;
    var tween = path.tweenTo(
    { strokeColor: 'blue' },
    {
        duration: 200,
        easing: 'easeInCubic'
    });
}

function createCircle(x,y){
    var circle = new Path.Circle({
       center: [x,y],
        radius: circleRadius,
        fillColor: 'orange',
        applyMatrix: false,
        parent: circleGroup,
        onMouseEnter: function(){
            this.scale(3);
            this.fillColor = 'yellow';
            view.element.style.setProperty('cursor', 'pointer');
        },
        onMouseLeave: function(){
            this.scale(1/3);
            this.fillColor = 'orange';
            view.element.style.setProperty('cursor', null);
        }
    });
    circleGroup.bringToFront();
    var tween = circle.tweenTo(
    { scaling: 0.25 },
    {
        duration: 60,
        easing: 'easeInCubic'
    });
}

function onMouseUp(event){
    if (startCircle === undefined){
        startCircle = event.point;
    }
        createCircle(event.point.x, event.point.y);
        endCircle = event.point;    
        createPath(event.point);
}

function onMouseMove(event){
    cursor.position = event.point;
    var nearestPoint = path.getNearestPoint(event.point);
    cursor.position = nearestPoint;
    cursor.bringToFront();
}