Quartz and Polygons??

[lexy0202]

Hi,

I've just started learning about Quartz and it's great, except I still don't know very much about it. I've been on a couple of tutorials, plus one in 'Beginning iPhone Games Development', and I can add rects, sphere's ellipses all filled with any color... that's all fine.

However what I want to do is create an app with a slider on the bottom half of the screen and and a UIView on the top half which will be subclassed to be my QuartzView, then in there, when the slider changes I want to update it with a polygon with that number of sides, (between 3 and 20). I'm hoping that I could do this mathematically rather than have a massive switch... - Also, I want it to be just an outline, not filled, in black.

Could someone explain basically how to do this.

I've heard about Stanford's helloPoly, however the source code is ancient and won't run on my mac.

Cheers,
Alex

[baja_yu]

Did you check out the QuartzDemo: Loading… ?

[lexy0202]

Thanks, I had, but that only shows a star, and a hexagon...

[lexy0202]

Been playing around with Apple's code for making polygons:

[code]
CGPoint center;
// Now add the hexagon to the current path
center = CGPointMake(210.0, 90.0);
CGContextMoveToPoint(context, center.x, center.y + 60.0);
for(int i = 1; i < 6; ++i)
{
CGFloat x = 60 * sinf(i * 2.0 * M_PI / 6.0);
CGFloat y = 60 * cosf(i * 2.0 * M_PI / 6.0);
CGContextAddLineToPoint(context, center.x + x, center.y + y);
}
[code]

I figured, in the bit that says (i * 2.0 * M_PI / 6.0);
if I change the 2.0 to a 3.0, it becomes a square on its side. If I change it to a 4, it becomes a triangle (the right way up).

My question is, what is the logic behind this code?

Thanks,
Alex

[lexy0202]

OK sorry to keep posting but just realised that the last number in that line of code is the number of sides.

Only problem now is that the rotation goes skew... e.g. the square is a diamond and the triangle is upside down, how do I fix this?

[lexy0202]

Almost there, hopefully...

Here is what happens if I choose a triangle:


So that's fine...

Here is what happens if I choose a square:


If a bit rotated, fine...

All the others work fine (no funky rotations), up to a septagon...


then they all clip, and here is a 20-sided polygon (according to my code):


There is a probably a very simple solution to my problem, and here is my drawRect code for that view:

- (void)drawRect:(CGRect)rect
{
    //Getting number of sides
    CGFloat sides = self.numOfSides;
    NSLog(@"%g", sides);
    //Initial setup
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    
    CGAffineTransform t0 = CGContextGetCTM(context);
    t0 = CGAffineTransformInvert(t0);
    CGContextConcatCTM(context, t0);
    
    //Begin drawing setup
    CGContextBeginPath(context);
    CGContextSetRGBStrokeColor(context, 0, 0, 0, 1);
    CGContextSetLineWidth(context, 2.0);
    
	CGPoint center;
    
    //Start drawing polygon
    center = CGPointMake(90.0, 90.0);
	CGContextMoveToPoint(context, center.x, center.y + 60.0);
	for(int i = 1; i < 6; ++i)
	{
		CGFloat x = 60 * sinf(i * 2.0 * M_PI / sides);
		CGFloat y = 60 * cosf(i * 2.0 * M_PI / sides);
		CGContextAddLineToPoint(context, center.x + x, center.y + y);
	}
    
    //Finish Drawing
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathStroke);
    
    CGContextRestoreGState(context);
}

Thanks in advance,
Alex

[lexy0202]

Apologies, solved - check the for loop...

[Duncan C]

Originally Posted by lexy0202

Apologies, solved - check the for loop...

Glad to see that you figured this out.

Cocoa touch now has UIBezierPaths, which are easier to use than CG paths. If your goal is to do this stuff easily, I'd suggest looking into UIBezierPaths. If you really want to use the CG calls, by all means, have at it.


EDIT: Do you understand what the code you posted is doing?

The for loop steps through all the vertexes in your polygon. (1 through number_of_sides.)

The code calculates the angle from the center of the polygon to that vertex, and then uses sine and cosine to calculate the x & y offset for a point at that angle that lies on the circle that your polygon inscribes.

I'm working on a kaleidoscopes app that creates polygon-shaped kaleidoscopes (among others) and it uses code that's just about identical to the code you posted. I'm using OpenGL, so the actual drawing code is different, but the math to calculate the vertexes is the same.

[lexy0202]

Cheers duncan... just wondering because I'm also creating something for which I'm going to need to display a specific segment of a circle (arc, plus the two sides)... can UIBezierPaths do that??

[Duncan C]

Originally Posted by lexy0202

Cheers duncan... just wondering because I'm also creating something for which I'm going to need to display a specific segment of a circle (arc, plus the two sides)... can UIBezierPaths do that??

You should be able to do everything you can do with CGPaths with UIBezierPaths. They are just easier to work with because they are standard NSObjects.

I have been using CGPaths since iOS was introduced, and only discovered UIBezierPaths recently. They were added in iOS 3.2 (With the iPad, I guess.)

[lexy0202]

Good tutorial suggestion??

Thanks,
Alex

[Duncan C]

Originally Posted by lexy0202

Good tutorial suggestion??

Thanks,
Alex

Let me google that for you

[lexy0202]

Ty but most of them are blocked at my school will have to wait for couple of days!

[dany_dev]

Originally Posted by lexy0202

Ty but most of them are blocked at my school will have to wait for couple of days!

click "copy cache" from google, you will bypass the limitation using google as a proxy...