Search code examples
javascriptjqueryanimationpaperjs

paper.js animate point on graph

I'm trying to build an animated graph with paper.js that can react to different input. So I want to smoothly animate one point vertically to a different point.

I've looked at different examples and the closest ones to mine is this one:

paper.tool.onMouseDown = function(event) {
x = event.event.offsetX;
y = event.event.offsetY;
paper.view.attach('frame', moveSeg);
}

var x;
var y;
function moveSeg(event) {
    event.count = 1;
    if(event.count <= 100) {
        myPath.firstSegment.point._x += (x / 100);
        myPath.firstSegment.point._y += (y / 100);
        for (var i = 0; i < points - 1; i++) {
            var segment = myPath.segments[i];
            var nextSegment = segment.next;
            var vector = new paper.Point(segment.point.x - nextSegment.point.x,segment.point.y - nextSegment.point.y);
            vector.length = length;
            nextSegment.point = new paper.Point(segment.point.x - vector.x,segment.point.y - vector.y);
        }
    myPath.smooth();
   }
}

This Code animates one Point to the click position, but I couldn't change it to my needs.

What I need is:

var aim = [120, 100];

var target = aim;

// how many frames does it take to reach a target
var steps = 200;

// Segment I want to move
myPath.segments[3].point.x

And then I dont know how to write the loop that will produce a smooth animation.

example of the graph: enter image description here

Solution

  • I worked out the answer. The following steps in paperscript:

    • Generate Path
    • Set aim for the point
    • OnFrame Event that does the moving (eased)

    for further animations just change the currentAim variable.

    var myPath = new Path({
segments: [[0,100],[50,100],[100,100]]});

// styling
myPath.strokeColor = '#c4c4c4'; // red
myPath.strokeWidth = 8;
myPath.strokeJoin = 'round';
myPath.smooth();

// where the middle dot should go
var currentAim = [100,100];

// Speed
var steps = 10;

//Animation

function onFrame(event) {

dX1 = (currentAim[0] - myPath.segments[1].point.x )/steps;
dY1 = (currentAim[1] - myPath.segments[1].point.y )/steps;
myPath.segments[1].point.x += dX1;
myPath.segments[1].point.y += dY1;
}