Drawing spotted circle

Question

I am trying to draw a spotted circle like google pay spot code using System.Drawing.Graphics here is example on google pay spot code.

I tried with this C# code:

 private void DrawSpot(Graphics graphics)
    {
        var lineWidth = ImageSize * Constants.DotSizeScale / 6f;
        var pen = new System.Drawing.Pen(System.Drawing.Brushes.Blue, lineWidth);

        var colors = new System.Drawing.Brush[]
        {
            System.Drawing.Brushes.LightGoldenrodYellow,
            System.Drawing.Brushes.DeepSkyBlue,
            System.Drawing.Brushes.ForestGreen,
            System.Drawing.Brushes.Red
        };

        var randomColor = new Random();
        var randomBit = new Random();

        var tick_fraction = 0.1f;
        var theta = 0f;
        var radios = ImageSize;

        var Levels = 4;

        for (int j = 0; j < Levels; j++)
        {
            var dtheta = (float)(2 * Math.PI / (60 - j * j));
            var step = (j * ImageSize / 10);
            radios = 300 - step;
            float rx1 = radios * (1 - tick_fraction);
            float ry1 = radios * (1 - tick_fraction);

            if (j % 2 == 0)
            {
                theta = 0f;
            }
            else
            {
                theta = dtheta * 1.1f;
            }

            for (int i = 0; i < (60 - j * j); i++)
            {
                float x1 = (float)(step + radios + radios * Math.Cos(theta));
                float y1 = (float)(step + radios + radios * Math.Sin(theta));

                // just a way to get different colors.
                if (j == 0)
                {
                    if (i % 2 == 0)
                    {
                        pen.Brush = colors[randomColor.Next(0, 3)];
                    }
                    else
                    {
                        pen.Brush = System.Drawing.Brushes.LightGray;
                    }
                }
                else
                {
                    if (randomBit.Next(0, 2) == 0)
                    {
                        pen.Brush = System.Drawing.Brushes.LightGray;
                    }
                    else
                    {
                        pen.Brush = colors[randomColor.Next(0, 3)];
                    }
                }
                graphics.DrawEllipse(pen, x1, y1, lineWidth, lineWidth);
                theta += dtheta;
            }
        }
    }

I got this result:

I am looking for help to get exactly the same spot arrangments, and I am trying to make the constant values variable and related to the number of spots that I want to draw per section. (here the section is 1/4). I am looking to get a formula that uses the circle radius and the number of levels with the number of spots, here in google spot there are 7 levels. (level is a full circle with spots)٫ also, you can see the spots are in a diagonal arrangement.

Answer 1

If you do not have a format specification, the simplest option is probably to just measure the example image. I.e. create a list of radius and spot-count pairs for each level.

To make your description resolution independent you could normalize the radius somehow, for example by dividing the radius by the size of the spots.

To use said list you would need to change the code to calculate the delta-angle from the spot count instead of using a fixed dtheta. Something like

var myList = new List<(float Radius, int SpotCount)>(){
    (4.2, 42)
    ...
    ...
};
...
var (radiusNormalized, spotCount) = myList[level];
var theta = Math.Pi * 2 / spotCount;
var radiusPixels = radiusNormalized * SpotSizeInPixels;