2
\$\begingroup\$

I would like to show race progress in my UI. My minimap is like sketch below: enter image description here

Blue dot represents progress and red dot is finish line. I would like this to work in UI so only blue dot would move. If it was circular or linear I think it wouldn't be much of the problem but I am not sure how to move the dot with this shape.

\$\endgroup\$
2
  • \$\begingroup\$ Is this mirroring progress through a race in a 3D world, where the "car" has a real position relative to the track geometry? Or does the race exist solely as a progress value visualized by this UI? \$\endgroup\$
    – DMGregory ♦
    Commented May 9 at 17:15
  • \$\begingroup\$ There is a real race, but UI should just show progress. It is not 100% accurate representation of track. \$\endgroup\$
    – Ivan
    Commented May 9 at 17:50

2 Answers 2

Reset to default
1
\$\begingroup\$

You can combine lines and circles into a path. Then when given a length you can find which segment the length falls on.

Vec2 getPos(float t){
    float cumulativeLength=0;
    foreach(segment in path){
        if(cumulativeLength + segment.length() > t){
            return segment.interpolate(t-cumulativeLength);
        }
        cumulativeLength += segment.length();
    }
}

For a circle segment the interpolation is vec2(radius*cos(startAngle+t/radius), radius*sin(startAngle+t/radius)) where starting angle is the angle to the start of the segment.

For a straight line segment the interpolation would be start + t*normalized(end-start)

\$\endgroup\$
6
  • \$\begingroup\$ Ok but how would I combine them in a path look at this as 2 separate images 1. Circle 2. Dot, Biggest issue here is how to make dot follow this specific path \$\endgroup\$
    – Ivan
    Commented May 8 at 12:41
  • \$\begingroup\$ You increase t as the racer progresses through the track. \$\endgroup\$
    – ratchet freak
    Commented May 8 at 12:45
  • \$\begingroup\$ I get that part, what I don't get is how to make it so that dot follows this specific path \$\endgroup\$
    – Ivan
    Commented May 8 at 13:13
  • \$\begingroup\$ create your path as a sequence of segments, then use the algorithm to find which segment the player is in and then you can interpolate on just that segment using whatever is appropriate for that segment \$\endgroup\$
    – ratchet freak
    Commented May 8 at 13:53
  • \$\begingroup\$ I understand all that but my biggest issue is handling curves along the path, if it was just a rectangle it would be easy. \$\endgroup\$
    – Ivan
    Commented May 9 at 11:58
0
\$\begingroup\$

Your race track is a series of straight lines and "arc segments" (the corners). The arc is related to a pivot point, radius and "sweep" (angle of rotation). Work out a path (on paper) of the "movements" you need to include to accomplish the "travel". You have 4 "straights" and 4 "corners" or "wheels". A straight only needs (animating) dx and dy. A "wheel" requires (animating) dx, dy and rotation (facing angle or angle of advance). In general, I find that thinking (first) in terms of "center points" and how they move, makes relating to things easier (even though coordinates are mostly "left and top").

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .