You can say the ring is a circle, but that's not the point.

I'm trying to figure out how to increase the radius of a ring (or a circle with 1px border size) without moving the circle from the center point. Usually, I plan out the algorithm by using math equations, before implementing the code. I haven't created any code, because I'm stuck on this math problem which hindered me from advancing forward.

From a math equation, this is the best one that contains all the necessary ingredients for my code:

r = Math.sqrt((x*x) + (y*y));

Rearranging it, I get this:

y = Math.sqrt((x*x) - (r*r));

But I couldn't get my head to wrap around how to increase the radius without touching the X and Y values. How do I solve this?

I'm not a mathematician, but perhaps the following explanation may help...

This formula

r = sqrt( x2 + y2 )

computes the (Euclidian) distance of the 2D point (x,y) from the origin (0,0). The distance alone isn't sufficient to define a concrete point; i.e. it lacks the direction along which the distance could be drawn. That means that the single formula describes not a single but (infinitely) many points. As a sentence:

"Each point (x,y) in space for which the distance is equal to a given distance r belongs to a circle of radius r concentric to the origin; each other point that does not match the equation does not belong to that circle."

Notice that if you would have another criterion, e.g. the said direction, you have another infinite set, in the example "all points of space that lie on a half line emanating from the origin...". Intersection both sets yields in a single point again, identical to (x,y) but described within another co-ordinate system (distance and direction, in this case).

However, you are interested in the set of points, not a single point.

Similarly, a disc can be expressed as: sqrt( x2 + y2 ) <= r

And a ring can be expressed as: ri <= sqrt( x2 + y2 ) <= ra

But I couldn't get my head to wrap around how to increase the radius without touching the X and Y values.

Choosing another r means that, according to the above explanation, from all possible (x,y) another subset is chosen. Understand r as independent variable, and (x,y) as dependent variable.

You can't really draw a circle like that in code, round things are faked, you need to use trigonometry to plot each point.

Loop from 0 to 2?, for a rough circle, plotting points at:

x = cos(?) * r + pos.x;

y = sin(?) * r + pos.y;

pos is your offset or 0, as your radius increases it won't move since sin and cos go from -1 to 1.

Rearranging it, I get this:



y = Math.sqrt((x*x) - (r*r));

That's wrong. You get this:

y = Math.sqrt((r*r) - (x*x));

You can't really draw a circle like that in code, round things are faked, you need to use trigonometry to plot each point.

That is not exactly true. The approach you suggest is a parametric approximation. It iterates the parameter space (e.g. the direction, perhaps as angle) with a given resolution, and interpolate in-between if necessary. This means to yield in sub-pixel positions of points lying more or less on the circle. The other approach is to rasterize the geometry, e.g. with a scanline rasterizer. Notice that this approach iterates (x,y)! Both approaches have their disadvantages, for sure.

Guess I'm going with GnollAF's pseudocode. Thanks for unwrapping my head, it sucks when I couldn't see the little bit of hint without help.