c# – Drawing Images to fit circle – Education Career Blog

I’m making an inventory screen for a game I’m working on, and I’d like to be able to draw a series of panels representing each item in the inventory. I want to be able to fit those panels on a circular path.
Here’s a mock up I made of what I mean


basically I’d like to be able to, give a radius, a center point, and the y co-ordinate to start drawing at, draw this series of panels so they align with the path of the circle like in the image.

Computing the y dimension is easy, its just the startposition y + panel height * panel index, but I’m unsure how to compute the x for a variable radius/center point circle.

Any help would be appreciated.

This is in C#, but something similar in C/C++ will be fine as long as I can convert it

Thanks in advance

EDIT: To calirify, y’s position is relative to the top or bottom of the screen and is independent of the circle. If a given y does not map to a point on the circle, then I’ll discard that point and not draw the panel.

While ideally I’d like to be able to use any elliptical shape (given two radii), a circle would be good too


Let cx, cy be the coordinates of the center point. Let r be the radius of the circle. Let y be the drawing y-coordinate and x, the x-coordinate. You observe that y = cy + panel height * panel index. By the magic of right triangles, this means that x^2 + y^2 = r^2. Solving for x, we get x = cx + sqrt(r^2 - (y-cy)^2).

EDIT: Converting to code:

#include <math>
float ordinate(float cx, float cy, float r, float y) {
    // assumes cx and cy are in the same coordinate system as x and y
    // assumes the coordinate origin is in the lower left corner.
    return cx + sqrtf(powf(r,2) - powf(y-cy,2));


I’m dumb. After seeing Eric’s answer, I remembered I can just rearrange and solve the equations of a circle or elipse as necessary.



You can use a rotational matrix for this. Here is a simple algorithm that finds the next point {x, y} such that it is rotated theta radians around a circle. You can start with the first item at x=radius and y=radius (wherever really, just a point that you know will contain an item), and then just continue to increment theta as you loop through your items.

Point Rotate(int x, int y, float theta)
  int x_p = (x * Math.Cos(theta)) - (y * Math.Sin(theta));
  int y_p = (y * Math.Cos(theta)) + (x * Math.Sin(theta));
  return new Point(x_p, y_p);

On a side note; I always preferred “Bolt1, Bolt2, Bolt3” to “Thunder, Thundara, Thundaga” =P

Leave a Comment