Interpolating through vector of points from a polyline

hi all! i’m having trouble wrapping my head around this particular problem. basically, i’m trying to draw multiple shapes along a polyline and move them along that path. what i have right now is a single ofvec2f location interpolating through a vector of points lerpTo, like so:

location.interpolate(lerpTo[lerpToIndex], 0.1);

if (location.distance(lerpTo[lerpToIndex]) < 0.1) lerpToIndex++;
if (lerpToIndex > lerpTo.size()-1) lerpToIndex = 0;

i use lerpToIndex to keep track of what leg they’re on in the journey, and eventually reset it to 0 once location reaches the last point so that it can start over at the beginning of the polyline.

what i’m having a hard time with is abstracting this to multiple points. i tried generalizing this to a vector of ofvec2f points locations where i basically put the above in a for loop to interpolate all the points at once:

for (int i = 0; i < locations.size(); i++)
    locations[i].interpolate(lerpTo[lerpToIndex], 0.1);
    if (locations[i].distance(lerpTo[lerpToIndex]) < 0.1) lerpToIndex++;

although this is wrong because each point is interpolating to one location. if i say

    locations[i].interpolate(lerpTo[lerpToIndex+i], 0.1);

it’s a little better, but weird things happen because lerpToIndex + i eventually becomes greater than locations.size(), and i’m not sure how to handle this case the same way i did when there was only one location to keep track of. obviously if lerpToIndex + i > locations.size(), then it should start over at the beginning of the polyline and keep interpolating from there, but i can’t seem to conceptualize how to do that.

i’ll be around to clarify if necessary, so thanks much for your time!

Is getPointAtIndexInterpolated what you are trying to do?

Get point along the path at interpolated index (e.g. f=5.75 => 75% along the path between 5th and 6th points)!show_getPointAtIndexInterpolated

You can use the modulo operator to wrap it around, like (lerpToIndex +i) % locations.size()


You can also use getPointAtLength(), but only the ayruos answer give the same animation than yours:

void ofApp::update(){

	// Your method with ayruos suggestion //////////////////////
	// Ease out tweening effect
	for( int i = 0; i < numPositions; i++ )
		int lerpToIndex = ( index + i ) % numVertices;
		positions1[ i ].interpolate( poly1[ lerpToIndex ], 0.1 );
	if( positions1[ 0 ].distance( poly1[ index ] ) < 1 ) index++;
	if( index >= numVertices ) index = 0;

	// hamoid suggestion ////////////////////////////////////////
	// The points move faster on long segments
	for( int i = 0; i < numPositions; i++ )
		positions2[ i ] = poly2.getPointAtIndexInterpolated( indices[ i ] );
		indices[ i ] += 0.03;
		if( indices[ i ] > numVertices ) indices[ i ] = 0;

	// Another suggestion ///////////////////////////////////////
	// The points have a constant speed
	float totalLength = poly3.getLengthAtIndex( numVertices );
	for( int i = 0; i < numPositions; i++ )
		lengths[ i ] += 2.f;
		if( lengths[ i ] >= totalLength ) lengths[ i ] -= totalLength;
		positions3[ i ] = poly3.getPointAtLength( lengths[ i ] );

Here’s an application example: (2,0 Ko)

@lilive thanks for this! i was wondering about how to address that ‘arriving’ behavior where it slows down as it gets closer to a position. that’s what it’s doing for me right now. i think i’ll try doing all the math out to make sense of why the 2nd and 3rd suggestions behave the way they do.

@ayruos this was what i was thinking about – haven’t had to use modulo very often. thanks for posting.

@hamoid will try this! i think i was using getPointAtPercent? i’ll see how this works for me, appreciate you bringing it to my attention.