Cinder Forum ARCHIVE

Loading...

Copy code

Permalink

Please tell us why you want to mark the subject as inappropriate.
(Maximum 200 characters)

Private Message

Feedback

Private Message

Type the characters you see in the picture below.

Type the characters you see in the picture below.

Attach files

Desktop
Google Docs

Loading User Profile...

This is preview!

Sign In

You can also use the below options to login

- Login with Facebook
- Login with Google
- Login with Yahoo

- Recent Topics
- All Forums
- Search All
- Tags
- Author
- Advanced Search

Search

Move this topic

Hello,

I want to make an animation that follow a trajectory with multiple points.

Perhaps with timeline or spline ?

Thanks a lot

1

I just want to make animation opengl to follow path from svg !

The animation rotate automaticaly following angle !

An example with balloon :

Do you have experience with that ?

Leave a comment on colin.bou's reply

I didn't check my code ( so there may be mistakes ), but it should go something like this:

- class TweenOnPath
- {
- public:
- TweenOnPath();
- ~TweenOnPath();
- private:
- ci::Anim<float> mPathPos;
- Path2d mPath;
- };
- void TweenOnPath::setup()
- {
- // Set anim to represent begining of svg path
- mPathPos = 0.0f;
- // First open the svg file
- //...
- const svg::Node * myNode = svgDataSrcRef->findNode( "NodeName" );
- Shape2d pathShape = myNode->getShape();
- mPath = pathShape.getContour( 0 );
- }
- void TweenOnPath::keyDown( ci::app::KeyEvent event )
- {
- switch ( event.getCode() )
- {
- // Tween to end of path
- case KeyEvent::KEY_1: timeline().apply( &mPathPos, 1.0f, 2.0f ); break;
- // Tween to begining of path
- case KeyEvent::KEY_2: timeline().apply( &mPathPos, 0.0f, 2.0f ); break;
- }
- }
- void TweenOnPath::draw()
- {
- Vec2f objectPos = mPath.getPosition( mPathPos );
- gl::color( 1.0f, 0.0f, 0.0f );
- gl::drawSolidCircle( objectPos, 15.0f );
- }

Leave a comment on justinmaurer's reply

Side note: maybe a derivative function in Path2d (like in Polyline or BSpline) would be useful for preserving orientation while following a path?

Until then you could probably just make your own by copying the function PolyLine<T>::getDerivative( float t ).

Éric

Éric

Leave a comment on num3ric's reply

Hello,

I have a small lag animation with Circle. I don't know if it is mPath.getPosition or mPathPos or pathShape.getContour( 0) );

this is probably a problem of interpolation.

I have also a non-linear speed according to the curvature of the path

Do you have an idea ?.

Thanks a lot

Colin

Leave a comment on colin.bou's reply

Hello,

Now I have a speed linear but I have always a small lag sometimes !

mPath.getPosition interpolate well ?

What is its method of interpolation ?

Thanks

Hi Colin,

you may have noticed that I posted a reply here with a solution to do linear interpolation over a curve, but I withdrew it because I noticed it isn't compatible with Path2d. The getPosition(t) method has been implemented in a very naive way. A path consists of several segments. If it has 2 segments, for example, getPosition() uses the first segment if t < 0.5 and the second segment for t >= 0.5. It then scales t from 0 to 1 to find the position on the segment. Each segment therefor has a different "speed" and linear interpolation over the path is not possible.

I'd recommend using the BSpline class, which has a properly implemented getTime(float length) method which will enable you to do linear interpolation.

If performance is an issue, and the path itself doesn't change often, probably the best thing you can do is calculating the time at several lengths upfront and then use curve fitting to find a curve through the samples. A rather scientific explanation can be found here (see: "Approximating the reparameterization curve"), just remember that most of what you need is already available in Cinder (e.g. the BSplineFit class).

-Paul

Leave a comment on colin.bou's reply

Bad news !

My problem is that svg work with bezier.I'm looking for to convert bezier to bspline.

I find this :

Puisque seules les courbes de Bézier sont présentes en SVG, il est nécessaire de savoir passer d'une B-Spline à une courbe de Bézier. La B-spline de points de contrôle P_{1}, P_{2}, P_{3} et P_{4} est en fait la courbe de Bézier dont les points de contrôle P'_{1}, P'_{2}, P'_{3} et P'_{4} sont calculés de la manière suivante. Si les coordonnées des points P_{1}, P_{2}, P_{3} et P_{4} sont (x_{1}, y_{1}), (x_{2}, y_{2}), (x_{3}, y_{3}) et (x_{4}, y_{4}), les coordonnées (x'_{1}, y'_{1}), (x'_{2}, y'_{2}), (x'_{3}, y'_{3}) et (x'_{4}, y'_{4}) des points P'_{1}, P'_{2}, P'_{3} et P'_{4} sont données par les formules suivantes pour les premières coordonnées et des formules similaires pour la seconde.

x'_{1} = 1/6(x_{1} + 4x_{2} + x_{3})

x'_{2} = 1/6(4x_{2} + 2x_{3})

x'_{3} = 1/6(2x_{2} + 4x_{3})

x'_{4} = 1/6(x_{2} + 4x_{3} + x_{4})

Les formules suivantes permettent la transformation inverse

x_{1} = 6x'_{1} - 7x'_{2} + 2x'_{3}

x_{2} = 2x'_{2} - x'_{3}

x_{3} = -x'_{2} + 2x'_{3}

x_{4} = 2x'_{2} - 7x'_{3} + 6x'_{4}

Thanks

Leave a comment on colin.bou's reply

I have not tested conversion bezier to bspline but is it a good solution for animation along a path ?

I want also to animate by drawing a part of the curve from the beginning until the end.

For moment I draw like that gl::draw( currentPath->getShapeAbsolute(),2.0);

I draw all shape with a color but not a part ?

What's the best method for that ?

Thanks

Hi Colin,

yes, the BSpline class contains methods for linear interpolation over the whole curve, which makes animation along a path much easier to implement.

To construct a BSpline from two points and two control points, do the following:

vector<ci::Vec2f> curve;

curve.push_back( p1 ); // the start point of the curve segment

curve.push_back( b1 ); // the 'outgoing' control point at point p1

curve.push_back( b2 ); // the 'incoming' control point at point p2

curve.push_back( p2 ); // the end point of the curve segment

// construct the spline

BSpline2f mSpline( curve, 3, false, true );

You can add more points to the BSpline if you want, of course.

Please note that evaluating the BSpline using the getTime() method is quite computationally intensive. If you encounter performance problems, try to evaluate the whole BSpline once by calling getTime() about 50 times at intervals of 0.02f (= 1/ 50 ) and storing the results. You can then use the BSplineFit class to create a BSpline from this data set that you can store along with the original BSpline. Then you can simply sample this second BSpline curve, instead of using getTime(), to obtain the 'time' and find the position on the first curve.

-Paul

Leave a comment on colin.bou's reply

thanks , you artikel very good, me really like you artickel thanks you so much. five nights at freddy's

Leave a comment on kako brus's reply

Change topic type

Link this topic

Provide the permalink of a topic that is related to this topic

Reply to colin.bou's discussion

- © 2020 ZOHO Corp.
- All Rights Reserved.
- Privacy
- Terms & Conditions
- RSS
- Powered by