Building Graphics with Cocoa Programming - dummies

Building Graphics with Cocoa Programming

By Erick Tejkowski

To do any type of graphics programming in Cocoa, familiarize yourself with a few important Cocoa data structures: NSPoint, NSRect, NSSize, and NSColor. You’ll need them so they make a good starting point.


Cocoa uses points to designate position on a square grid. To work with points in Cocoa, you use an NSPoint structure. NSPoint is a structure composed of two floats (named x and y, respectively). Cocoa graphics defines the bottom-left corner as the origin (0,0). The x value increases as you move to the right. The y value increases as you advance up. This is a different arrangement than most Macintosh and Window programming, where the origin is in the top-left corner.

typedef struct _NSPoint {
float x;
float y;
} NSPoint;

The x and y portion of the structure are the coordinates of the point that you want to represent. To use an NSPoint variable, you must first define it:

NSPoint thePoint;

Then to assign values to the x and y members of an NSPoint structure, you use the NSMakePoint function. This example creates an NSPoint at the location (100,100):

thePoint = NSMakePoint(100, 100);

Rects and sizes

Closely related to the NSPoint structure is the NSRect structure. An NSRect (Rect is short for rectangle) is a structure composed of an NSPoint and an NSSize:

typedef struct _NSRect {
NSPoint origin;
NSSize size;
} NSRect;

To understand what this means, you also need to know about the NSSize structure:

typedef struct _NSSize {
float width;
float height;
} NSSize;

Thus, an NSRect is really a structure of four float values: two for the NSPoint and two for the NSSize. The NSPoint portion describes where the NSRect begins and the NSSize variable describes the dimensions of the NSRect. For Mac programmers who are new to Cocoa, this may take a little getting used to because the Rect structure used in QuickDraw differs subtly from the NSRect structure. (A Rect consists of two points.)

To create an NSRect, first declare the NSRect variable:

NSRect theRect;

Then initialize that variable using the NSMakeRect function. NSMakeRect takes four parameters: x, y, width, and height. For example, this line of code creates an NSRect with an origin at (100,100) and dimensions of 50 x 50:

theRect = NSMakeRect(100, 100, 50, 50);

Later, if you want to find the origin or size of theRect, use code like this:

float theOriginX, theOriginY;
float theSizeW, theSizeH;
theOriginX = theRect.origin.x;
theOriginY = theRect.origin.y;
theSizeW = theRect.size.width;
theSizeH = theRect.size.height;


Cocoa’s AppKit includes the NSColor data type to help you work with color in your graphics projects. The easiest way to create and define an NSColor object is to use one of the built-in color preset components. You’ll recognize immediately what each one creates, because they have plain-English names.

For example, to create an NSColor object that stores the color black, use code like this:

//Declare a pointer to an NSColor object
NSColor* theColor;
//create the object
//and assign the color black to it
theColor = [NSColor blackColor];

As you may have guessed, this code works for many other colors too (blueColor, redColor, and so on). Table 1 lists the entire collection of preset components that you can use to create many common colors.

Table 1: Preset Color Components

Preset Component

Color It Produces




Bright blue




Light blue


Dark gray


Medium gray


Bright green


Light gray








Bright red




Bright and sunny yellow

Eventually, you’ll want some colors that the preset components don’t cover. In that case, you have to resort to some of the more sophisticated color methods in the AppKit. The AppKit has three kinds of color spaces (ways of creating color) that you can use to create colors:

  • Device dependent (or device)
  • Device independent (or calibrated)
  • Named

When you use device colors, you can’t be sure that you’ll always see the same color across devices. You’re probably most familiar with this kind of color, because most home computer monitors and printers display it. It’s not so good, however, for professional printing, color correction, and similar color tasks.

To get around this color problem, computer and printer manufacturers began creating hardware and software solutions to calibrate their equipment. The idea was that you should be able to see the same kind of output no matter what device you used. The calibration is supposed to account for the peculiarities of your particular device and adjust it to produce accurate colors.

The device dependent type of color space has three color spaces. Normally, you create colors by mixing different amounts of specific base colors. The three mixing schemes that you can use in device-dependent color are

  • DeviceRGB: Red, green, blue, and alpha components
  • DeviceCMYK: Cyan, magenta, yellow, black, and alpha components
  • DeviceWhite: White and alpha components

For the rest of this article you have to worry about only DeviceRGB, because it’s the best choice for displaying graphics on a monitor. After you get the hang of the DeviceRGB color space, it’s easy to use the DeviceCMYK and DeviceWhite color spaces.

Now, it’s time to get to the code. Instead of using the colors of the preset components, you can define your own RGB colors by using the colorWithDeviceRed function. The function takes four floats as parameters. These four numbers correspond to the three color channels (red, green, and blue) and the alpha channel. Each parameter can have a value between 0.0 and 1.0; 1.0 is full on. The alpha parameter dictates how opaque the color is. A value of 1.0 is completely opaque, and a value of 0.0 is fully transparent.

This numbering scheme contrasts with the colors used in familiar applications such as Web pages and Photoshop documents, where the numbering usually has a range between 0 and 255. To correlate with the Cocoa way of doing things, add 1 to the value of each color component and divide by 256. For example, if you want to convert a Photoshop color with RGB values of (127,63,255) to the RGB values for an NSColor, perform this simple calculation:

127 + 1 = 128/256 = 0.5
63 + 1 = 64/256 = 0.25
255 + 1 = 256/256 = 1.0

To create an NSColor object in the DeviceRGB color space, use code like this:

//Declare a pointer to an NSColor object
NSColor* theColor;
//create the object
//and assign the color black to it
theColor = [NSColor colorWithDeviceRed:(float)0.0
green:(float)0.0 blue:(float)0.0 alpha:(float)1.0];

Notice that the red, green, and blue parameters are all set to 0.0. If you wanted to create a red color object, you’d use code like this:

//create the object
//and assign the color red to it
theColor = [NSColor colorWithDeviceRed:(float)1.0
green:(float)0.0 blue:(float)0.0 alpha:(float)1.0];

The red parameter has a value of 1.0, and the green and blue components have a value of 0.0. By adjusting the alpha value, you can create different shades of the same color.

After you create a color object, the only other thing you need to do before working with it is to use the set function. This sets the graphics pen to your desired color:

[color set];

Yes, it is as easy as that!