Drawing circles on a diagonal line in C++

Question

I've been working on this for about an hour now and I can't figure out what I'm doing wrong. This is the problem statement for the problem:

Draw a series of circles along one diagonal of a window. The circles should be different colors and each circle should touch (but not overlap) the one above and below it. Allow the program user to determine how many circles are to be drawn.

These are some hints that have been given to me:

You will find the geometry involved in putting geometric elements on the diagonals easier if you make your window square. Rather than using getmaxheight() and getmaxwidth(), consider using getmaxheight() for both dimensions.

Don't forget the Pythagorean theorem when working out distances in your code such as the length of the diagonal. Keep in mind, though, that the units on the screen are pixels, so fractions in the computations are not too useful. This is definitely a place for integer arithmetic.

Use the number of elements you are going to draw (squares, circles, etc) to divide up the total length into steps for your loops to work with.

Use for loops to draw figures when you know how many to draw, and what size they are to be. Determine the count and size before the loop.

So far this is the code that I have created. Inputting 4 circles only draws 3 on screen, with the third one partially off screen. The circles also do not touch, which makes no sense to me because moving the center of the next circle down and over by the length of the diameter should have to the two circles touching. This is the code I have:

#include <graphics.h>
#include <cmath>
#include <iostream>

using namespace std;

int main()
{
   int foreColor;
   int diagLength;
   int radius,diameter;
   int centerX = 0, centerY = 0;
   int numCircles;              // number of circles.
   int width, height;           // screen width and height

   cout << "Enter number of circles: ";
   cin >> numCircles;

   width = getmaxheight();
   height = getmaxheight();

   initwindow(width, height, "Circles");

   diagLength = sqrt((width * width) + (height * height));
   diameter = diagLength / numCircles;
   radius = diameter / 2;
   centerX = radius;
   centerY = radius;

   for (int i = 1; i <= numCircles; i++)
   {
      foreColor = i % 16;                // 0 <= foreColor <= 15
      setcolor(foreColor);
      setfillstyle(i % 12, foreColor);   // Set fill style
      fillellipse(centerX, centerY, radius, radius);

      centerX = centerX + diameter;
      centerY = centerY + diameter;
   }

   getch();       // pause for user
   closegraph();

}

Answer 1

Here's a diagram of what I think you want:

The basic problem comes down to determining

1. What the diameter D of each circle is
2. Where the center of each circle is.

The diameter is easy. First calculate the length L of the diagonal using Pythagoras' theorem, then divide by the desired number of circles N. Of course, if you need the radius just divide again by 2.

L = Sqrt(Width * Width + Height * Height);
D = L / N;

The trick to working out the position of the circle centers is to realise that the X are evenly spaced along the X axis, and same with the Y coordinates - so you can work out the distances I've labelled Dx and Dy really easily using the same division:

Dx = Width / N;
Dy = Height / N;

From there the center of each circle is easily calculated:

for (i = 0; i < N; i++)
{
    centerX = (Dx / 2) + i * Dx;
    centerY = (Dy / 2) + i * Dy;

    /* Draw the circle at (centerX, centerY) with diameter D */
}

That's all there is to it!

By the way, if you were wondering why your code was drawing circles further apart than they should be, the reason is because you were adding D to centerX and centerY rather than Dx and Dy.