Adding a curve to my rectangle

Question

I am trying to draw a Yin-Yang in Objective-c and I am having trouble figuring out how to do it. I created two rectangles that are connected. I am having trouble figuring out how to make the lines of my rectangle curve so I can make a circle out of them. Here is my code so far.

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddRect(context, CGRectMake(60, 150, 80, 10));
CGContextStrokePath(context);

CGContextAddRect(context, CGRectMake(60, 150, 190, 10));
CGContextStrokePath(context);

Is there an easier way to create a yin-yang in objective-c or am I in the right direction? I am new to objective-c and programming in general.

Answer 1

I'd suggest doing it with arcs (a series of semicircles, actually) instead of rounded rectangles. For example, consider one portion to be three separate semicircles:

You could then draw those arcs like so:

CGContextAddArc(context, center.x, center.y - side / 4.0, side / 4.0, M_PI_2, -M_PI_2, TRUE); // red part
CGContextAddArc(context, center.x, center.y + side / 4.0, side / 4.0, M_PI_2, -M_PI_2, NO);   // blue part
CGContextAddArc(context, center.x, center.y,              side / 2.0, -M_PI_2, M_PI_2, YES);  // dark grey stroke

But obviously, you probably wouldn't actually draw these strokes, but rather just fill them in, and then repeat this process for the bottom part of the symbol:

- (void)drawRect:(CGRect)rect {
    CGFloat side = MIN(rect.size.width, rect.size.height);                       // length of the side of the square in which the symbol will rest
    CGPoint center = CGPointMake(rect.size.width / 2.0, rect.size.height / 2.0); // the center of that square

    CGContextRef context = UIGraphicsGetCurrentContext();

    // draw white part

    CGContextAddArc(context, center.x, center.y - side / 4.0, side / 4.0, M_PI_2, -M_PI_2, TRUE);
    CGContextAddArc(context, center.x, center.y + side / 4.0, side / 4.0, M_PI_2, -M_PI_2, NO);
    CGContextAddArc(context, center.x, center.y,              side / 2.0, -M_PI_2, M_PI_2, YES);
    CGContextClosePath(context);

    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillPath(context);

    // draw black part

    CGContextAddArc(context, center.x, center.y - side / 4.0, side / 4.0, M_PI_2, -M_PI_2, TRUE);
    CGContextAddArc(context, center.x, center.y + side / 4.0, side / 4.0, M_PI_2, -M_PI_2, NO);
    CGContextAddArc(context, center.x, center.y,              side / 2.0, -M_PI_2, M_PI_2, NO);
    CGContextClosePath(context);

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextFillPath(context);

    // draw black dot

    CGContextAddArc(context, center.x, center.y - side / 4.0, side / 12.0, 0, M_PI * 2.0, YES);
    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextFillPath(context);

    // draw white dot

    CGContextAddArc(context, center.x, center.y + side / 4.0, side / 12.0, 0, M_PI * 2.0, YES);
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillPath(context);
}

That yields: