Drawing a ring that enlarges/expands away from the center.

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

This formula

r = sqrt( x² + y² )

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( x² + y² ) <= r

And a ring can be expressed as: r_i <= sqrt( x² + y² ) <= r_a

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.

^ That. I don't see why you just can't increase the radius leaving (X,Y) as they are.

For drawing a circle/ring/etc you need its X coordinate, its Y coordinate, and a radius. You have no circumference if you have no independent radius.

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.