America

Source code in America.zip

1. main.m
2. Class AmericaAppDelegate
3. Class View. The f in sinf stands for float, a.k.a. CGFloat.
4. patton.jpg (100 × 100): Apple would prefer that you use png.

Create the project

I got the little .jpg file from the Internet Movie Database, stored it on my Macintosh Desktop, and named it patton.jpg. (Be careful of .jpg vs. .jpeg.) Drag the image file from the desktop to the Supporting Files folder in the Xcode Project Navigator. Xcode will say
Choose options for adding these files
Destination ☑ Copy items into destination group’s folder (if needed)
Add to targets ☑ America
Finish
To verify that patton.jpg was added to your project, open the Supporting Files folder. You should see patton.jpg listed in black.

Draw the flag

It’s simplest to let the background be white, and draw the red and blue (in that order) on top of it. We start the star with the vertex (point) pointing towards the right. In trigonometry, adding a positive number to an angle makes the angle go counterclockwise. But when we add a positive number to θ we go clockwise around the star, because our Y axis points down. If the Y axis pointed up, we would have gone counterclockwise.

Things to try

1. Decrease the alpha level of the blue union jack from 1.0 to .9 (or lower). Can you see the stripes through it?


2. Draw the seven red stripes with a for loop. In the drawRect: method of class View, change

   	CGContextAddRect(c, CGRectMake( 0 * w / 13, 0, w / 13, h));
   	CGContextAddRect(c, CGRectMake( 2 * w / 13, 0, w / 13, h));
   	CGContextAddRect(c, CGRectMake( 4 * w / 13, 0, w / 13, h));
   	CGContextAddRect(c, CGRectMake( 6 * w / 13, 0, w / 13, h));
   	CGContextAddRect(c, CGRectMake( 8 * w / 13, 0, w / 13, h));
   	CGContextAddRect(c, CGRectMake(10 * w / 13, 0, w / 13, h));
   	CGContextAddRect(c, CGRectMake(12 * w / 13, 0, w / 13, h));
   

   to

   	for (int i = 0; i <= 12; i = i + 2) {
   		CGContextAddRect(c, CGRectMake(i * w / 13, 0, w / 13, h));
   	}
   

   You can also telescope the i = i + 2 to i += 2. Would it be clearer to break the CGContextAddRect into two statements?

   	for (int i = 0; i <= 12; i += 2) {
   		CGRect r = CGRectMake(i * w / 13, 0, w / 13, h);
   		CGContextAddRect(c, r);
   	}
   



3. Go to the five vertices of the star with a for loop. In the drawRect: method of class View, change

   	CGFloat theta = 0;	//Start with vertext pointing to right.
   	CGContextMoveToPoint(c,
   		center.x + radius * cosf(theta),
   		center.y + radius * sinf(theta)
   	);
   
   	//means theta = theta + 2 * M_PI * 2 / 5;
   	theta += 2 * M_PI * 2 / 5;		//vertex pointing to lower left
   	CGContextAddLineToPoint(c,
   		center.x + radius * cosf(theta),
   		center.y + radius * sinf(theta)
   	);
   
   	theta += 2 * M_PI * 2 / 5;		//vertex pointing to upper right
   	CGContextAddLineToPoint(c,
   		center.x + radius * cosf(theta),
   		center.y + radius * sinf(theta)
   	);
   
   	theta += 2 * M_PI * 2 / 5;		//vertex pointing to lower right
   	CGContextAddLineToPoint(c,
   		center.x + radius * cosf(theta),
   		center.y + radius * sinf(theta)
   	);
   
   	theta += 2 * M_PI * 2 / 5;		//vertex pointing to upper left
   	CGContextAddLineToPoint(c,
   		center.x + radius * cosf(theta),
   		center.y + radius * sinf(theta)
   	);
   

   to the following. You could telescope the i = i + 2 to i += 2.

   	for (int i = 0; i <= 10; i = i + 2) {
   		CGFloat theta = 2 * M_PI * i / 5;
   		CGFloat x = center.x + radius * cosf(theta);
   		CGFloat y = center.y + radius * sinf(theta);
   
   		if (i == 0) {
   			CGContextMoveToPoint(c, x, y);
   		} else {
   			CGContextAddLineToPoint(c, x, y);
   		}
   	}
   



4. Change the star from 5 to 7 points. Iterate (loop) 7 times. Advance the angle 3/7 of 360° during each iteration. Don’t confuse degrees and radians.


5. Change the star back to 5 points. Draw the 48 star flag (6 × 8). Then draw the 50 star flag. (You might want to come back to this after we do patterns in Sine.)