Second Part of Cocoa Graphics Tutorial

The brand new Cocoa Graphics with Quartz II tutorial is now up. The previous tutorial introduced basic concepts like points and rects. The second one explains how to create a custom view, construct paths, and use images. Both are designed to be accessible to everyone, even those who haven't done graphics programming before.

Cocoa Graphics Tutorial Screen Shot

Somebody emailed me about the first tutorial and noted that they really liked it, but it there was nothing in there about Quartz. Technically, that's correct. None of the code uses the Core Graphics data structures and functions. This is really a tutorial about Cocoa graphics using the AppKit classes. However, people don't necessary know that when they start looking for tutorials.

The boundaries of Quartz aren't clearly defined, anyway. On paper, Quartz is the procedural Core Graphics API plus the Window Server. You could also make the point that Quartz Core (Core Image, Core Video) is part of the "real" Quartz, but that's just splitting hairs.

The AppKit classes use Quartz in any case, so I have no problem referring to NSBezierPath, NSImage, and so on as Quartz classes. The point is to get the Quartz concepts across.

A side effect of writing this tutorial is that I found out the elipses embedded in each side of the Taijitu are equal to one quarter of the total diameter, divided by the golden ratio. Suprising on one hand, but then I realize it makes perfect sense.

Bonus points if anyone recognizes either of the two locations in the landscape photos in the "Images" section. One is very close to where I live.
Design Element
Second Part of Cocoa Graphics Tutorial
Posted Nov 29, 2006 — 6 comments below


Chris Ridd — Nov 29, 06 2498

Nice job!

It got slightly confusing when there were several NSPoints in the graphic and it wasn't immediately obvious which one was which. Maybe if you annotated them with their variable name?

A very minor nit - are "elipses" actually "ellipses"? ;-)

Scott Stevenson — Nov 29, 06 2499 Scotty the Leopard

A very minor nit - are "elipses" actually "ellipses"?

Hmmm. Yup. Fixed. Thanks.

Harvey Swik — Nov 29, 06 2500

This is really awesome. Thankyou.

s/The follow examples/The following examples/g

Scott Stevenson — Nov 29, 06 2501 Scotty the Leopard

s/The follow examples/The following examples/g

I apparently believe in distributed spell checking. Xgrid, away!

Marco Masser — Nov 29, 06 2507

The paths are stroked before being filled so that the lines are visible.
Shouldn't it be the other way round?

Chris — Nov 29, 06 2514

Good tutorial, but one correction for you.

We implemented isFlipped to return YES so that the coordinates start in the upper-left instead of the bottom-right.

It should be bottom left instead of bottom right.


Comments Temporarily Disabled

I had to temporarily disable comments due to spam. I'll re-enable them soon.

Copyright © Scott Stevenson 2004-2015