Advanced Arcs & Wedges

C4WorkSpace.m

//
//  C4WorkSpace.m
//  Examples
//
//  Created by Travis Kirton on 12-07-19.
//

#import "C4WorkSpace.h"

@interface C4WorkSpace ()
-(void)createGrid;
-(void)createArcs;
-(void)createLargeWedges;
-(void)createSmallWedges;
@end

@implementation C4WorkSpace

-(void)setup {
    //create the grid with angle values
    [self createGrid];
    
    //create the faded large wedges
    [self createLargeWedges];
    
    //create all the arcs
    [self createArcs];
    
    //create the filled small wedges over top of everything else
    [self createSmallWedges];
}

-(void)createGrid {
    C4Shape *xAxis, *yAxis;
    
    //create the x-axis, with a with 80% of the canvas
    CGPoint endPoints[2] = {CGPointMake(0, 0), CGPointMake(self.canvas.width*0.8f, 0)};
    xAxis = [C4Shape line:endPoints];
    
    //create the y-axis, a vertical copy of the x-axis
    endPoints[1] = CGPointMake(0, xAxis.width);
    yAxis = [C4Shape line:endPoints];
    
    //get the centerpoint of the canvas
    CGPoint center = self.canvas.center;
    
    //offset the y by 0.5f to align the position for sharp pixel rendering
    //we do this because ios natively draws in the space between points
    //i.e. a 1px line drawn with a y coordinate of 1 will natively be antialiased between y = 0.5 and y = 1.5
    //... so that the center of the line is on y = 1
    center.y += 0.5f;
    xAxis.center = center;
    
    //offset the center back to its original y and then offset x
    center.y -= 0.5f;
    center.x += 0.5f;
    yAxis.center = center;

    //define the styles for each axis
    xAxis.lineWidth = 1.0f;
    xAxis.strokeColor = C4GREY;

    yAxis.lineWidth = 1.0f;
    yAxis.strokeColor = C4GREY;
    
    //add the two axis shapes to the canvas
    [self.canvas addShape:xAxis];
    [self.canvas addShape:yAxis];

    //create a small font 
    C4Font *font = [C4Font fontWithName:@"Futura-Medium" size:16];
    
    //create an array of tags (these are strings)
    NSString *angleTags[8] = {@"0",@"π/4",@"π/2",@"3π/4",@"π",@"5π/4",@"3π/2",@"7π/4"};
    
    //determine the radius for the angles, we're going to use polar coordinates to find the points for each label
    CGFloat radius = xAxis.width / 2.0f + 20;

    //create 8 labels and add them to the canvas
    for(int i = 0; i < 8; i++) {
        //create a label using the font and the tag at position i
        C4Label *angleLabel = [C4Label labelWithText:angleTags[i] font:font];
        
        //determine the label's coordinates using polar math {x,y} = {r*cos(theta),r*sin(theta)}
        CGFloat x = radius * [C4Math cos:i * TWO_PI/8] + self.canvas.center.x;
        CGFloat y = radius * [C4Math sin:i * TWO_PI/8] + self.canvas.center.y;
        angleLabel.center = CGPointMake(x, y);;

        //fade the label a bit
        angleLabel.alpha = 0.25;
        
        //add the label to the canvas
        [self.canvas addLabel:angleLabel];
    }
}

-(void)createArcs {
    
    //create 4 large RED arcs, starting at 0 and going clockwise
    for(int i = 0; i < 4; i++) {
        C4Shape *arc = [C4Shape arcWithCenter:self.canvas.center
                                       radius:170 + i * 10
                                   startAngle:0
                                     endAngle:QUARTER_PI * (i + 1)
                                    clockwise:YES];
        arc.lineWidth = 2.0f;
        arc.fillColor = [UIColor clearColor];
        [self.canvas addShape:arc];
    }

    //create 4 large BLUE arcs, starting at 0 and going counter clockwise (mirroring the RED arcs)
    for(int i = 0; i < 4; i++) {
        C4Shape *arc = [C4Shape arcWithCenter:self.canvas.center
                                       radius:170 + i * 10
                                   startAngle:0
                                     endAngle:TWO_PI - QUARTER_PI * (i + 1)
                                    clockwise:NO];
        arc.lineWidth = 2.0f;
        arc.strokeColor = C4BLUE;
        arc.fillColor = [UIColor clearColor];
        [self.canvas addShape:arc];
    }
    
    //create 4 small arcs with alternating colors
    for(int i = 0; i < 4; i++) {
        C4Shape *arc = [C4Shape arcWithCenter:self.canvas.center
                                       radius:100 
                                   startAngle:HALF_PI*i
                                     endAngle:HALF_PI*(i+1)
                                    clockwise:YES];
        if(i % 2 == 1) {
            arc.strokeColor = C4BLUE;
            arc.fillColor = C4RED;
        }
        
        arc.lineWidth = 2.0f;
        [self.canvas addShape:arc];
    }
}

-(void)createLargeWedges {
    //create 4 large RED wedges, starting at 0 and going clockwise
    for(int i = 0; i < 4; i++) {
        C4Shape *wedge = [C4Shape wedgeWithCenter:self.canvas.center
                                           radius:170 + i * 10
                                       startAngle:0
                                         endAngle:QUARTER_PI * (i + 1)
                                        clockwise:YES];
        wedge.lineWidth = 2.0f;
        wedge.strokeColor = [UIColor clearColor];
        wedge.fillColor = [C4RED colorWithAlphaComponent:0.1];
        [self.canvas addShape:wedge];
    }

    //create 4 large BLUE wedges, starting at 0 and going counter clockwise (mirroring the RED arcs)
    for(int i = 0; i < 4; i++) {
        C4Shape *wedge = [C4Shape wedgeWithCenter:self.canvas.center
                                           radius:170 + i * 10
                                       startAngle:0
                                         endAngle:TWO_PI - QUARTER_PI * (i + 1)
                                        clockwise:NO];
        wedge.lineWidth = 2.0f;
        wedge.strokeColor = [UIColor clearColor];
        wedge.fillColor = [C4BLUE colorWithAlphaComponent:0.1];
        [self.canvas addShape:wedge];
    }
}

-(void)createSmallWedges {
    //create 8 small wedges, with alternating filled colors
    for(int i = 0; i < 8; i++) {
        C4Shape *wedge = [C4Shape wedgeWithCenter:self.canvas.center
                                         radius:50
                                     startAngle:i * TWO_PI / 8
                                       endAngle:(i+1) * TWO_PI / 8
                                      clockwise:YES];
        if(i % 2 == 1) wedge.fillColor = C4RED;
        wedge.lineWidth = 0.0f;
        
        [self.canvas addShape:wedge];
    }
}

@end