# Rectangle with rounded corners as a path

This topic is 3035 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I was hoping on some direction :) I am looking to have a static rectangle with rounded corners to act as a path for a sprite to follow along the perimeter of the screen. The rect will not change and I was just curious as to where I would start with this. Has anyone seen any good tuts or examples of anything similar? Even any ideas you may have I would love to hear. Thanks!

##### Share on other sites
Well, it's a sequence of segments and arcs. It shouldn't be too hard to put together something that works, even it it's not pretty. What part are you having trouble with?

If you want something more configurable, look into Bézier curves. They can do what you need.

##### Share on other sites
Lol...alvaro, when i posted this last ngiht before I went to bed it sounded so much different. Lesson learned...do not post when you are half awake :p I appologize for that, now let me explain a little more in depth what I was having issues with. I have the rounded rect drawn on screen using arcs and lines. My problem is with how I get a sprite to follow that line. I guess in the end, how would I go about easily clamping a 2D sprite to the line and update its postition along that outter perimeter.

##### Share on other sites
No, I think I understand what you are saying. Still, I think this shouldn't be too hard to do in a naive way. Make a function that takes a real number (time) and returns a 2D position. If the time is in this range, use this formula; if it's in this other range, use this other formula; and so on.

You can probably figure out how to parametrize a straight segment. And to parametrize an arc you can use this:
 x = center_x + cos(angle)*radius y = center_y + sin(angle)*radius)

Give it a try.

##### Share on other sites
Ahh...interesting solution! Never would have thought about handling it that way. Thanks much!! :D

##### Share on other sites
Quote:
 Original post by xtr33meLol...alvaro, when i posted this last ngiht before I went to bed it sounded so much different. Lesson learned...do not post when you are half awake :p

lol That is a lesson that I still have problems with! Too many times I'll post something, go to bed and wake up with the answer.

Quote:
 Original post by xtr33meMy problem is with how I get a sprite to follow that line. I guess in the end, how would I go about easily clamping a 2D sprite to the line and update its postition along that outter perimeter.

Regardless of the shape of the path, you'll probably use line segments to define it. Modify the Bresenham line drawing algorithm so that it iterates once per frame/time step. At each iteration, you'll have the x/y coordinate between the points of the current line segment. When the end of one segment is reached, continue on from the start of the next. At each frame/time step, adjust the sprite's coordinates to the newly returned coordinates.

##### Share on other sites
Thanks MarkS! Working on implementing this now :) Going to look into Bresenham first.

##### Share on other sites
Quote:
 Original post by MarkSRegardless of the shape of the path, you'll probably use line segments to define it. Modify the Bresenham line drawing algorithm so that it iterates once per frame/time step. At each iteration, you'll have the x/y coordinate between the points of the current line segment. When the end of one segment is reached, continue on from the start of the next. At each frame/time step, adjust the sprite's coordinates to the newly returned coordinates.
@The OP: For many types of paths (such as the one in question), it shouldn't be necessary to break the path into lines for the purpose of path following. Also, assuming typical circumstances, I don't think Bresenham is what you want; rather, you should compute and update the object's position using real numbers and a little math.

alvaro's already touched on this, but note that following the perimeter of a circle at a fixed speed is pretty easy. Given a distance to travel, the angle to sweep out is 'distance / radius'. You can then compute the new angle and use the previously mentioned equations to compute the new position for the object. Once the object has traveled X distance along the arc (radius * pi/2 for a quarter circle), you move on to the next section of the path (a straight line in this case).

You can also easily orient the object to the arc by computing the tangent vector at the point in question.

One way to handle 'composite paths' of this sort from a programming perspective is to use inheritance. Create a base class that offers basic functions such as returning a point given a distance along the path segment, etc. Then, derive from this base class the specific path segment types that you need (e.g. line, arc, Bezier curve, etc.). Then, create a 'path' class that maintains a collection of path segments and handles the details of moving the object along the path segments, and from path segment to path segment as necessary.

It's not completely trivial, but it's very doable. (I've used this method in the past for AI path following.)

[Edit: Regarding your last post, I'll reiterate that unless you're working in a constrained environment where floating- or fixed-point math isn't available, or unless you have some other unusual requirement that's not evident from your posts, you almost certainly don't want to use Bresenham for this.]

##### Share on other sites
Quote:
 Original post by jyk[Edit: Regarding your last post, I'll reiterate that unless you're working in a constrained environment where floating- or fixed-point math isn't available, or unless you have some other unusual requirement that's not evident from your posts, you almost certainly don't want to use Bresenham for this.]

The issue I have with the mathematical method is that vertical lines and near vertical lines become difficult as the slope approaches infinity. This is the reason that algorithms like the Bresenham algorithm were initially developed. The Bresenham algorithm gives the correct coordinates for a line segment at all times, regardless of orientation.

You are correct that it is easier to use sin and cos for a circular path, however, my method allows for paths of any shape or complexity and no further computation, other than translation, is necessary once the path has been computed. Bezier curves are also a good method, but seeing as the Bezier algorithm would most likely generate line segments and it is doubtful that the path will change once defined, it would be better to use it to define the path, but not directly in computation of the sprite's position.

Each method will work just fine though.

##### Share on other sites
Quote:
 Original post by MarkSThe issue I have with the mathematical method is that vertical lines and near vertical lines become difficult as the slope approaches infinity. This is the reason that algorithms like the Bresenham algorithm were initially developed. The Bresenham algorithm gives the correct coordinates for a line segment at all times, regardless of orientation.

This simply means you are using the wrong mathematical method. The parametric equations of a straight segment look like this:
x(t) = initial_x + t * velocity_xy(t) = initial_y + t * velocity_y

That works just as well with vertical lines as with any other type of line.

Quote:
 You are correct that it is easier to use sin and cos for a circular path, however, my method allows for paths of any shape or complexity and no further computation, other than translation, is necessary once the path has been computed.

If I understand correctly, what you are calling your method is just representing the path using straight segments. I can't see how you can make a claim to more generality than using both straight segments and arcs.

1. 1
2. 2
3. 3
Rutin
13
4. 4
5. 5

• 26
• 10
• 9
• 9
• 11
• ### Forum Statistics

• Total Topics
633695
• Total Posts
3013374
×