• Create Account

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

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

6 replies to this topic

#1asperatology  Members

687
Like
0Likes
Like

Posted 29 October 2013 - 04:06 AM

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?

#2haegarr  Members

7188
Like
1Likes
Like

Posted 29 October 2013 - 04:56 AM

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.

#3TheChubu  Members

8954
Like
0Likes
Like

Posted 29 October 2013 - 05:08 AM

^ 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.

"I AM ZE EMPRAH OPENGL 3.3 THE CORE, I DEMAND FROM THEE ZE SHADERZ AND MATRIXEZ"

My journals: dustArtemis ECS framework and Making a Terrain Generator

#4GnollAF  Members

190
Like
0Likes
Like

Posted 29 October 2013 - 05:40 AM

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.

#5 slalrbalr   Banned

2006
Like
0Likes
Like

Posted 29 October 2013 - 05:45 AM

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));

#6haegarr  Members

7188
Like
0Likes
Like

Posted 29 October 2013 - 06:15 AM

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.

#7asperatology  Members

687
Like
0Likes
Like

Posted 29 October 2013 - 08:07 AM

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.

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.