iOS Drawing Circles

Question

I am trying to create the circles below in my iOS app. I know how to make the circles but am not entirely sure on how to get the points along the arc. It has to be in code not an image. Below is also the code I currently have.

 - (void)drawRect:(CGRect)rect
{
    CGPoint point;
    point.x = self.bounds.origin.x + self.bounds.size.width/2;
    point.y = self.bounds.origin.y + self.bounds.size.height/2;

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, 2.0);

    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

    CGRect circle = CGRectMake(point.x/2,point.y-point.x/2,point.x,point.x);

    CGContextAddEllipseInRect(context, circle);

    CGContextStrokePath(context);

    for (int i = 0; i<8; i++) {
        CGRect circleMini = CGRectMake(??????,??????,point.x/4,point.x/4);

        CGContextAddEllipseInRect(context, circleMini);
        CGContextStrokePath(context);
    }

}

UPDATED TO ANSWER

 float cita = 0;
for (int i = 0; i<8; i++) {

    CGPoint pointCir = CGPointMake(point.x/2 + radius * cos(cita) , (point.y-point.x/2) + radius * sin(cita) );
    CGRect circleMini = CGRectMake(pointCir.x,pointCir.y,radius/4,radius/4);

    CGContextAddEllipseInRect(context, circleMini);
    CGContextStrokePath(context);
    cita += M_PI / 4.0;
}

Bridgettebridgewater

Answer 1

If (x,y) is the center and r is the radius of your big circle, the center of the i-th external circle will be:

  center(i) = ( x + r * cos(cita) , y + r * sin(cita) )

Start cita in 0 and increment it PI/4 radians for the next circle (or 45 degrees)

Working implementation

CGFloat cita = 0;
CGFloat bigCircleRadius = point.x / 2.0;
CGFloat smallCircleRadius = bigCircleRadius / 4.0;
for (int i = 0; i < 8; i++) {

    CGPoint smallCircleCenter = CGPointMake(point.x  + bigCircleRadius * cos(cita) - smallCircleRadius/2.0 , point.y + bigCircleRadius * sin(cita) - smallCircleRadius / 2.0 );
    CGRect smallCircleRect = CGRectMake(smallCircleCenter.x,smallCircleCenter.y,smallCircleRadius,smallCircleRadius);

    CGContextAddEllipseInRect(context, smallCircleRect);
    CGContextStrokePath(context);
    cita += M_PI / 4.0;
}

Edit: Added implementation and renamed variables.

Plank

It's not working. I just get the big circle. Can u see how i implemented it above. Did I do it wrong? – Bridgettebridgewater

You should use cita += M_PI / 4.0 , not cita = M_PI / 4 , and according to your implementation, isn't the center of your circle (point.x/2,point.y-point.x/2)? – Plank

How could it be outside the for I didn't change that part – Bridgettebridgewater

when i changed it to 45 i got a weird scatter of bubbles. You can see it above. Any ideas – Bridgettebridgewater

I added the comment by mistake before finishing it, read it again. @Bridgettebridgewater . You should use M_PI/4 since the cos function uses radians. – Plank

Ok back to that but now i just get 1 circle – Bridgettebridgewater

cita should not be an int, it should be a CGFloat. That will give you the right answer. (M_PI / 4.0 is less than 1, so you end up adding 0 all the time getting the same circle) – Plank

I implemented it for you, you have to subtract half of the circle's radius when defining the center. – Plank

Answer 2

- (void)drawRect:(CGRect)rect
{
    const NSUInteger kNumCircles = 8u;

    CGFloat height = CGRectGetHeight(rect);

    CGFloat smallCircleRadius = height / 10.0f;

    CGRect bigCircleRect = CGRectInset(rect, smallCircleRadius / 2.0f, smallCircleRadius / 2.0f);
    CGFloat bigCircleRadius = CGRectGetHeight(bigCircleRect) / 2.0f;

    CGPoint rectCenter = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, 2.0f);

    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

    CGContextAddEllipseInRect(context, bigCircleRect);

    CGContextStrokePath(context);

    CGFloat alpha = 0;


    for (NSUInteger i = 0; i < kNumCircles; i++)
    {
        CGPoint smallCircleCenter = CGPointMake(rectCenter.x  + bigCircleRadius * cos(alpha) - smallCircleRadius/2.0f , rectCenter.y + bigCircleRadius * sin(alpha) - smallCircleRadius / 2.0f );
        CGRect smallCircleRect = CGRectMake(smallCircleCenter.x,smallCircleCenter.y,smallCircleRadius,smallCircleRadius);

        CGContextAddEllipseInRect(context, smallCircleRect);
        CGContextStrokePath(context);
        alpha += M_PI / (kNumCircles / 2.0f);
    }

}

Twinflower