Animate on specific Item' segment about animatepaper.js

[camille-hdl]

Glad it's helping!

[camille-hdl]

Not at this point.
Which property do you need to animate on a Segment ?

Content que ça serve :-)

[mvdt]

I'm trying to animate a graph smoothly. So i have got a Path wilt multiples Points, and i would like to access some specific segment in order to animate his y point value.

update: Whoops ! By my definition of segment is probably wrong.

[camille-hdl]

Hi,

sorry I don't have much time to work on this at the moment but I'll look into it soon (probably this weekend).

You could probably achieve what you want by working on Segment.point, but the lib doesn't provide a way to do it yet, since it assumes the object you're passing to .animate() is an instance of paper.Item or paper.Group.

[twentyfortysix]

I would be thankful for this feature as well.
What I need to do is exactly what you have mentioned, move segment points

something like:

path[i].segments[n].point.animate({
                  properties: {
                    position: {
                      x: new_x, 
                      y: new_y
                    }
                  },
                  settings: {
                    duration:300,
                    easing:"easeInBounce"
                  }
                });

[camille-hdl]

Hi,

I'm sorry I'm getting back to you so late but I finally had some time to look into the issue.
Could you try the latest version of the build in the repo (not in npm), available here.

You should be able to animate points coordinates directly using this

var square = new paper.Path.Rectangle(new paper.Point(150, 75), new paper.Size(50,50));
square.fillColor = "green";
animatePaper.animate(square.segments[0].point, {
        properties: {
              pointPosition: {
                x: "+200",
                y: 150
              }
          },
          settings: {
              duration:1500,
              easing:"easeInBounce",
              parentItem: square
          }
      });

This may not be the final API (it's pretty ugly) but I wanted to get something to work to see if it fixes your problem.

Cheers :)

[twentyfortysix]

niiiice ;)
I'll try it out and let you know

[twentyfortysix]

works nice, although there is something weird.

check this out

var item = new paper.Path.Rectangle(new paper.Point(150, 75), new paper.Size(50,50));
item.fillColor = "green";

function transformPoints() {
        var latest_x = 0;
        var latest_y = 0;

        for (n = 0; n < item.segments.length; n++){  
             // if we hit the 4th point set it to the same position as 3rd
            // that supposed to turn the square to triangle
            // just for test .)
             if(n == 3){
                var new_x = latest_x;
                var new_y = latest_y;
            }
           // set random values for x, y positions
           else{
                var new_x = (Math.random()*10);
                var new_y = (Math.random()*10);
               // save recent values out of "for" loop
                var latest_x = new_x;
                var latest_y = new_y;
            }
           // here we see 3rd & 4th point having same values 
           console.log(n + ': ' + new_x, new_y)

            animatePaper.animate(item.segments[n].point, {
                properties: {
                      pointPosition: {
                        x: '+' + new_x,
                        y: '+' + new_y
                      }
                  },
                  settings: {
                      duration:1000,
                      easing:"easeInOut",
                      parentItem: item
                  }
              });
        } 
}

// shoot in a function in a random manner, continuously
(function loop() {
    var rand = Math.round(Math.random() * (3000 - 500)) + 500;
    setTimeout(function() {
            transformPoints();
            loop();  
    }, rand);
}());

(There might by a mistakes, I just rewrote it here out of my project.)

So this small example represents a square whos points are animated with one peculiar exception. While the function iterates over the 4 points it sets the forth point to same coordinates as the 3rd point.... so you have to see basically a moving triangle... but that actually is not the case.. coz you see a deforming 4point polygon with 4 points visible. That is what is weird.. the animation doesn't seem to follow what is given.

I guess the animation is somehow unsynced, or the points are not caught as they should or I don't know..

(one more thing.. I do not understand why we should set the "parentItem" which is understood from the context.. as we change points on defined item which is naturally the parent of its points)

[camille-hdl]

So there were a few bugs in the latest build (they are fixed now, hopefully !) but the problem with your example is that you were simply moving the 4th point along with the 3rd (with the same "+x" and "+y" parameters).
To transform the square into a triangle, you should probably move the 4th point to the next position of the 3rd point using absolute values (the x: 200 form instead of the x: "+200" form).

I'm not sure if I'm explaining clearly so here's your example, modified:

var item = new paper.Path.Rectangle(new paper.Point(150, 75), new paper.Size(50,50));
item.fillColor = "green";

function completeCallback() {

    if (typeof completeCallback.count === "undefined") {
        completeCallback.count = 4;
        // Eartz: the callback must be called after each animation is complete
    }
    completeCallback.count -= 1;
    if (completeCallback.count <= 0) {
        completeCallback.count = 4; // reset
        transformPoints(); // loop
    }
}
function transformPoints() {
        var latest_x = 0;
        var latest_y = 0;
        var latest_x_move = 0;
        var latest_y_move = 0;

        for (n = 0; n < item.segments.length; n++){  
             // if we hit the 4th point set it to the same position as 3rd
            // that supposed to turn the square to triangle
            // just for test .)
            var mode = "relative";
            if(n == 3){
                // Eartz: we have to move the 4th point to the next position of the 3rd point.
                // So we move 4thPoint.x to (3rdPoint.x + 3rdPoint.Xmovement)
                var new_x = latest_x + latest_x_move;
                var new_y = latest_y + latest_y_move;
                mode = "absolute";
                console.log("point " + n + " will go to ", new_x, new_y);
            }
           // set random values for x, y positions
           else{
                var new_x = Math.floor(Math.random() * (10 - 1 +1)) + 1;
                var new_y = Math.floor(Math.random() * (10 - 1 +1)) + 1;
               // save recent values out of "for" loop
                latest_x = item.segments[n].point.x;
                latest_y = item.segments[n].point.y;
                latest_x_move = new_x;
                latest_y_move = new_y;
                console.log("coords of point " + n + " are ", item.segments[n].point);
            }



            if (mode === "relative") {
                // Eartz: we use relative mode for the 3 first points
                new_x = "+" + new_x;
                new_y = "+" + new_y;
            }
           // the 3 first point have relative values, but the 4th has an absolute value
           console.log(n + ': ' + new_x, new_y); 
            animatePaper.animate(item.segments[n].point, {
                properties: {
                      pointPosition: {
                        x: new_x,
                        y: new_y
                      }
                  },
                  settings: {
                      duration:1000,
                      easing:"easeInOut",
                      parentItem: item,
                      complete: completeCallback
                  }
              });
        } 
}

// start the loop
transformPoints();

The parentItem setting is needed because the Point class doesn't have the onFrame property that I use. I would use the parent implicitly if I could but AFAIK there is no documented way to get the parent of a Point object. I may be wrong though.

[twentyfortysix]

The example is an example ;) I do use non-relative values in my project ;) .. as I want to keep the points within the view.
I have downloaded the your most recent version and replaced the one I had.
Without touch of my code the animation works as expected. Square is a triangle ;D

re: parentItem .. I got it.

Thanks for your work. I'll rewrite what I have now with your now animation feature. it is more convenient than do my own easing and such.
Once more again, thanks a lot.