A Bit of Color Theory for Your iOS Device’s Display

In modern computer graphics , any color displayed on the screen has its data stored in some way based on something called a color model. A color model (sometimes called a color space) is simply a way of representing real-world color as digital values that a computer can use. One common way to represent colors is to use four components: red, green, blue, and alpha. In Quartz, each of these values is represented as CGFloat. These values should always contain a value between 0.0 and 1.0.

The red, green, and blue components are fairly easy to understand, as they represent the additive primary colors, or the RGB color model, as shown in Figure 14-4. If you add together the light of these three colors in equal proportions, the result appears to the eye as either white or a shade of gray, depending on the intensity of the light mixed. Combining the three additive primaries in different proportions gives you a range of different colors, referred to as a gamut.

Figure 14-4. A simple representation of the additive primary colors that make up the RGB color model

You’ve probably learned that the primary colors are red, yellow, and blue, which are known as the historical subtractive primaries, or the RYB color model, and have little application in modern color theory and are almost never used in computer graphics. The color gamut of the RYB color model is much more limited than the RGB color model, and it also doesn’t lend itself easily to mathematical definition. For these purposes, the primary colors are red, green, and blue, not red, yellow, and blue.

In addition to red, green, and blue, Quartz uses another color component, called alpha, which represents how transparent a color is. When drawing one color on top of another color, alpha is used to determine the final color that is drawn. With an alpha of 1.0, the drawn color is 100 percent opaque and obscures any colors beneath it. With any value less than 1.0, the colors below will show through and mix with the color above. If the alpha is 0.0, then this color will be completely invisible, and whatever is behind it will show through completely. When an alpha component is used, the color model is sometimes referred to as the RGBA color model, although technically speaking, the alpha isn’t really part of the color; it just defines how the color will interact with other colors when it is drawn.

Other Color Models

Although the RGB model is the most commonly used in computer graphics, it is not the only color model. Several others are in use, including the following:

• Hue, saturation, value (HSV)

• Hue, saturation, lightness (HSL)

• Cyan, magenta, yellow, black (CMYK), which is used in four-color offset printing

• Grayscale

There are also different versions of some of these models, including several variants of the RGB color space. Fortunately, for most operations, you don’t need to worry about the color model that is being used. You can just call cgColor on your UIColor objects, and in most cases, Core Graphics will handle any necessary conversions.

Creating a Random Color

You could define a global function that returns a random color, but it’s better to add this function as an extension to the UIColor class. Open the QuartzFunView.swift file and add the following code near the top:

// Random color extension of UIColor
extension UIColor {
    class func randomColor() -> UIColor {
        let red = CGFloat(Double(arc4random_uniform(255))/255)
        let green = CGFloat(Double(arc4random_uniform(255))/255)
        let blue = CGFloat(Double(arc4random_uniform(255))/255)
        return UIColor(red: red, green: green, blue: blue, alpha:1.0)
    }
}

This code is fairly straightforward. For each color component, you use the arc4random_uniform() function to generate a random floating-point number in the range 0 to 255. Each component of the color needs to be between 0.0 and 1.0, so you simply divide the result by 255. Why 255? Quartz 2D on iOS supports 256 different intensities for each of the color components , so using the number 255 ensures that you have a chance to randomly select any one of them. Finally, you use those three random components to create a new color. You set the alpha value to 1.0 so that all generated colors will be opaque.

Defining Shape and Color Enumerations

The possible shapes and drawing colors are represented by enumerations. Add the following definitions to the QuartzFunView.swift file:

enum Shape : Int {
    case line = 0, rect, ellipse, image
}

// The color tab indices
enum DrawingColor : Int {
    case red = 0, blue, yellow, green, random
}

Both enumerations are derived from UInt because, as you’ll see later, you will need to use the raw enumeration values to map between a shape or a color and the selected segment of a segmented control.

Implementing the QuartzFunView Skeleton

Since you’re going to do your drawing in a subclass of UIView, let’s set up that class with everything it needs, except for the actual code to do the drawing , which you’ll add later. Start out by adding the following six properties to the QuartzFunView class:

// Application-settable properties
var shape = Shape.line
var currentColor = UIColor.red
var useRandomColor = false

// Internal properties
private let image = UIImage(named:"iphone")
private var firstTouchLocation = CGPoint.zero
private var lastTouchLocation = CGPoint.zero

The shape property keeps track of the shape the user wants to draw, the currentColor property is the user’s selected drawing color, and the useRandomColor property will be true if the user chooses to draw with a random color. These properties are all meant to be used outside the class (in fact, they will be used by the view controller).

The next three properties are required only by the class implementation and are therefore marked as private. The first two properties will track the user’s finger as it drags across the screen. You’ll store the location where the user first touches the screen in firstTouchLocation. You’ll store the location of the user’s finger while dragging and when the drag ends in lastTouchLocation. Your drawing code will use these two variables to determine where to draw the requested shape. The image property holds the image to be drawn on the screen when the user selects the rightmost toolbar item on the bottom toolbar, as shown in Figure 14-7.

Figure 14-7. Using QuartzFun to draw a UIImage

Now on to the implementation itself. Let’s first add a few methods to respond to the user’s touches. After the property declarations, insert the three methods in Listing 14-5.

Listing 14-5. The Touch Methods for the QuartFunView.swift File

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        if useRandomColor {
            currentColor = UIColor.randomColor()
        }
        firstTouchLocation = touch.location(in: self)
        lastTouchLocation = firstTouchLocation
        setNeedsDisplay()
    }
}

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        lastTouchLocation = touch.location(in: self)
        setNeedsDisplay()
    }
}

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        lastTouchLocation = touch.location(in: self)
        setNeedsDisplay()
    }
}

These three methods are inherited from UIView, which in turn inherits them from its parent, UIResponder. They can be overridden to find out where the user is touching the screen. They work as follows:

• touchesBegan(_:withEvent:) is called when the user’s finger first touches the screen. In that method, you change the color if the user has selected a random color using the new randomColor method you added to UIColor earlier. After that, you store the current location so that you know where the user first touched the screen, and you indicate that your view needs to be redrawn by calling setNeedsDisplay() on self.

• touchesMoved(_:withEvent:) is continuously called while the user is dragging a finger on the screen. All you do here is store the new location in lastTouchLocation and indicate that the screen needs to be redrawn.

• touchesEnded(_:withEvent:) is called when the user lifts the finger off the screen. Just as in the touchesMoved(_:withEvent:) method, all you do is store the final location in the lastTouchLocation variable and indicate that the view needs to be redrawn.

You’ll come back to this class once you have your application skeleton up and running. That draw(_ rect:) method, which is currently commented out, is where you will do this application’s real work, and you haven’t written that yet. Let’s finish setting up the application before you add your drawing code.

Creating and Connecting Outlets and Actions

Before you can start drawing, you need to add the segmented controls to your GUI and then hook up the actions and outlets. Single-click Main.storyboard to set these things up. The first order of business is to change the class of the view. In the Document Outline, expand the items for the scene and for the view controller it contains and then single-click the View item. Press ⌥⌘3 to bring up the Identity Inspector and change the class from UIView to QuartzFunView.

Now use the Object Library to find a segmented control and drag it to the top of the view, just below the status bar. Place it somewhere near the center. You don’t need to be too accurate with this because you’ll shortly add a layout constraint that will center it.

With the segmented control selected, bring up the Attributes Inspector and change the number of segments from 2 to 5. Double-click each segment in turn, changing each label to (from left to right) Red, Blue, Yellow, Green, and Random, in that order. Now let’s apply layout constraints. In the Document Outline, Control-drag from the segmented control item to the Quartz Fun View item, release the mouse, hold down the Shift key, select Vertical Spacing to Top Layout Guide and Center Horizontally in Container, and then press Return. In the Document Outline, select the View Controller icon; then back in the storyboard editor, click the Resolve Auto Layout Issues button (the one to the right of the Pin button) and select Update Frames. If this option is not enabled, make sure you have View Controller selected in the Document Outline. The segmented control should now be properly sized and positioned, as shown in Figure 14-8.

Figure 14-8. Your correctly labelled and positioned color segment control

Bring up the assistant editor , if it’s not already open, and select ViewController.swift from the jump bar. Now Control-drag from the segmented control in the Document Outline to the ViewController.swift file on the right to the line below the class declaration and release the mouse to create a new outlet. Name the new outlet colorControl, and leave all the other options at their default values. Your class should now look like this:

class ViewController: UIViewController {
    @IBOutlet weak var colorControl: UISegmentedControl!

Next, let’s add an action. Open ViewController.swift in the assistant editor, select Main.storyboard again, and Control-drag from the segmented control over to the bottom of the class definition in the view controller file, directly above the closing brace. In the pop-up, change the connection type to Action and the name to changeColor. The pop-up should default to using the Value Changed event, which is what you want. You should also set the type to UISegmentedControl.

Now let’s add a second segmented control . This one will be used to choose the shape to be drawn. Drag a segmented control from the library and drop it near the bottom of the view. Select the segmented control in the Document Outline, bring up the Attributes Inspector, and change the number of segments from 2 to 4. Now double-click each segment and change the titles of the four segments to Line, Rectangle, Ellipse, and Image, in that order. Now you need to add layout constraints to fix the size and position of the control, just like you did with the color selection control. Here’s the sequence of steps that you need:

1. In the Document Outline, Control-drag from the new segmented control item to the Quartz Fun View item and release the mouse. Hold down the Shift key and select Vertical Spacing to Bottom Layout Guide and Center Horizontally in Container; then press Return.

2. In the Document Outline, select the View Controller icon; then back in the editor, click the Resolve Auto Layout Issues button and select Update Frames.

Once you’ve done that, open ViewController.swift in the assistant editor again and then Control-drag from the new segmented control to the bottom of ViewController.swift to create another action. Change the connection type to Action, name the action changeShape, change the type to UISegmentedControl, and click Connect. The storyboard should now look like Figure 14-9. Your next task is to implement the action methods.

Figure 14-9. Your storyboard with both segmented controls in place

Implementing the Action Methods

Save the storyboard and feel free to close the assistant editor. Now select ViewController.swift, look for the stub implementation of changeColor() that Xcode created for you, and add the code in Listing 14-6.

Listing 14-6. The changeColor Method Goes in the ViewController.swift File

@IBAction func changeColor(_ sender: UISegmentedControl) {
    let drawingColorSelection =
            DrawingColor(rawValue: UInt(sender.selectedSegmentIndex))
    if let drawingColor = drawingColorSelection {
        let funView = view as! QuartzFunView
        switch drawingColor {
        case .red:
            funView.currentColor = UIColor.red
            funView.useRandomColor = false

        case .blue:
            funView.currentColor = UIColor.blue
            funView.useRandomColor = false

        case .yellow:
            funView.currentColor = UIColor.yellow
            funView.useRandomColor = false

        case .green:
            funView.currentColor = UIColor.green
            funView.useRandomColor = false

        case .random:
            funView.useRandomColor = true
        }
    }
}

This is pretty straightforward. You simply look at which segment was selected and create a new color based on that selection to serve as your current drawing color . To map from the segmented control’s selected index to the enumeration value for the corresponding color, you use the enumeration’s constructor that takes a raw value.

let drawingColorSelection =
        DrawingColor(rawValue: UInt(sender.selectedSegmentIndex))

After that, you set the currentColor property so that your class knows which color to use when drawing, unless a random color has been selected. In that case, you set the useRandomColor property to true, and a new color will be chosen each time the user starts a new drawing action (you’ll find in this code in the touchesBegan(_:withEvent:) method, which you added a few pages ago). Since all the drawing code will be in the view itself, you don’t need to do anything else in this method.

Next, look for the existing implementation of changeShape() and add the following code to it:

@IBAction func changeShape(_ sender: UISegmentedControl) {
    let shapeSelection = Shape(rawValue: UInt(sender.selectedSegmentIndex))
    if let shape = shapeSelection {
        let funView = view as! QuartzFunView
        funView.shape = shape
        colorControl.isHidden = shape == Shape.image
    }
}

In this method, all you do is set the shape type based on the selected segment of the control. The four elements of the Shape enumeration correspond to the four toolbar segments at the bottom of the application view. You set the shape to be the same as the currently selected segment, and you also hide or show the color selection control based on whether the Image segment was selected.

Make sure that everything is in order by compiling and running your app. You won’t be able to draw shapes on the screen yet, but the segmented controls should work; and when you tap the Image segment in the bottom control, the color controls should disappear.

Now that you have everything working, let’s do some drawing.

Drawing the Line

Let’s do the simplest drawing option first: drawing a single line. Select QuartzFunView.swift and replace the commented-out draw(_ rect: CGRect) method with the one shown in Listing 14-7.

Listing 14-7. The draw(rect: ) Method

override func draw(_ rect: CGRect) {                    
    let context = UIGraphicsGetCurrentContext()                
    context!.setLineWidth(2.0)
   context!.setStrokeColor(currentColor.cgColor)

    switch shape {                
    case .line:                
        context?.move(to: CGPoint(x: firstTouchLocation.x,                
                                y: firstTouchLocation.y))                
        context?.addLine(to: CGPoint(x: lastTouchLocation.x,                
                                y: lastTouchLocation.y))                
        context?.strokePath()                

    case .rect:                
        break                

    case .ellipse:                
        break                

    case .image:                
        break                
    }                
}                    

You start things off by retrieving a reference to the current context, which will let you draw onto your QuartzFunView.

let context = UIGraphicsGetCurrentContext()

Next, you set the line width to 2.0, which means that any line that you stroke will be 2 points wide.

context!.setLineWidth(2.0)

After that, you set the color for stroking lines. Since UIColor has a CGColor property, which is what this function needs, you use that property of your currentColor property to pass the correct color on to this function.

context!.setStrokeColor(currentColor.cgColor)

You use a switch to jump to the appropriate code for each shape type. As mentioned earlier, you’ll start off with the code to handle drawing a line, get that working, and add code for each shape in turn as you make your way through this example.

switch shape {
case .line:

To draw a line, you tell the graphics context to create a path starting at the first place the user touched. Remember that you stored that value in the touchesBegan(_:withEvent:) method, so it will always reflect the starting point of the most recent touch or drag.

context?.move (to: CGPoint(x: firstTouchLocation.x,                  
                        y: firstTouchLocation.y))              

Next, you draw a line from that spot to the last spot the user touched. If the user’s finger is still in contact with the screen, lastTouchLocation contains the finger’s current location. If the user is no longer touching the screen, lastTouchLocation contains the location of the user’s finger when it was lifted off the screen:

context?.addLine(to: CGPoint(x: lastTouchLocation.x,                  
                        y: lastTouchLocation.y))              

This function doesn’t actually draw the line—it just adds it to the context’s current path. To make the line appear on the screen, you need to stroke the path. This function will stroke the line you just drew, using the color and width you set earlier.

context?.strokePath()                  

That’s it for now. At this point, you should be able to compile and run the app once more. The Rectangle, Ellipse, and Shape options won’t work, but you should be able to draw lines just fine using any of the color choices (see Figure 14-10).

Figure 14-10. The line-drawing part of your application is now complete. Here, you are drawing using a random color.

Drawing the Rectangle and Ellipse

Let’s write the code to draw the rectangle and the ellipse at the same time since Quartz implements both of these objects in basically the same way. Change the existing draw(_ rect: ) method as shown in Listing 14-8.

Listing 14-8. Changes to draw(_ rect: ) to Handle the Rectangle and Ellipse

override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()
    context?.setLineWidth(2.0)
    context?.setStrokeColor(currentColor.cgColor)
    context?.setFillColor(currentColor.cgColor)
    let currentRect = CGRect(x: firstTouchLocation.x,
                             y: firstTouchLocation.y,
                             width: lastTouchLocation.x - firstTouchLocation.x,
                             height: lastTouchLocation.y - firstTouchLocation.y)

    switch shape {
    case .line:
        context?.move(to: CGPoint(x: firstTouchLocation.x,
                            y: firstTouchLocation.y))
        context?.addLine(to: CGPoint(x: lastTouchLocation.x,
                            y: lastTouchLocation.y))
        context?.strokePath()

    case .rect:
        context?.addRect(currentRect)
        context?.drawPath(using: .fillStroke)

    case .ellipse:
        context?.addEllipse(inRect: currentRect)
        context?.drawPath(using: .fillStroke)

    case .image:
        break
    }
}

Because you want to paint both the outline of the ellipse and the rectangle and to fill their interiors, you add a call to set the fill color using currentColor.

context?.setFillColor(currentColor.cgColor)

Next, you declare a CGRect variable. You do this here because both the rectangle and ellipse are drawn based on a rectangle. You’ll use currentRect to hold the rectangle described by the user’s drag. Remember that a CGRect has two members: size and origin. A function called CGRect(x: y: width: height: ) lets you create a CGRect by specifying the values needed to make your rectangle. The code to create the rectangle is pretty straightforward. You use the point stored in firstTouchLocation to create the origin. Next, you figure out the size by getting the difference between the two x values and the two y values. Note that, depending on the direction of the drag, one or both size values may end up with negative numbers, but that’s okay. A CGRect with a negative size will simply be rendered in the opposite direction of its origin point (to the left for a negative width; upward for a negative height).

let currentRect = CGRect(x: firstTouchLocation.x,
        y: firstTouchLocation.y,
        width: lastTouchLocation.x - firstTouchLocation.x,
        height: lastTouchLocation.y - firstTouchLocation.y)

Once you have this rectangle defined, drawing either a rectangle or an ellipse is as easy as calling two functions: one to draw the rectangle or ellipse in the CGRect you defined and the other to stroke and fill it:

case .rect:
    context?.addRect(currentRect)
    context?.drawPath(using: .fillStroke)

case .ellipse:
    context?.addEllipse(inRect: currentRect)
    context?.drawPath(using: .fillStroke)

Build and run your application. Try the Rectangle and Ellipse tools to see how you like them. Don’t forget to change colors, including using a random color .

Drawing the Image

For the last trick, let’s draw an image. The 16 - Image folder contains three images named iphone.png, [email protected], and [email protected] that you can add to your project’s asset catalog. Select Assets.xcassets in the Project Navigator to open it in the editor; then select all three images in the Finder and drag them onto the editor area to create a new image group called iphone in the asset catalog. Now modify the draw(_ rect: ) method as shown in Listing 14-9.

Listing 14-9. Your Modified draw(_ rect: ) Method to Handle Images

override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()
    context?.setLineWidth(2.0)
    context?.setStrokeColor(currentColor.cgColor)
    context?.setFillColor(currentColor.cgColor)
    let currentRect = CGRect(x: firstTouchLocation.x,
                             y: firstTouchLocation.y,
                             width: lastTouchLocation.x - firstTouchLocation.x,
                             height: lastTouchLocation.y - firstTouchLocation.y)

    switch shape {
    case .line:
        context?.move(to: CGPoint(x: firstTouchLocation.x,
                            y: firstTouchLocation.y))
        context?.addLine(to: CGPoint(x: lastTouchLocation.x,
                            y: lastTouchLocation.y))
        context?.strokePath()

    case .rect:
        context?.addRect(currentRect)
        context?.drawPath(using: .fillStroke)

    case .ellipse:
        context?.addEllipse(inRect: currentRect)
        context?.drawPath(using: .fillStroke)

    case .image:
        let horizontalOffset = image!.size.width / 2
        let verticalOffset = image!.size.height / 2
        let drawPoint =
            CGPoint(x: lastTouchLocation.x - horizontalOffset,
                        y: lastTouchLocation.y - verticalOffset)
        image!.draw(at: drawPoint)
    }
}

First, you calculate the center of the image since you want the image drawn centered on the point where the user last touched. Without this adjustment, the image would be drawn with the upper-left corner at the user’s finger, also a valid option. Then, you make a new CGPoint by subtracting these offsets from the x and y values in lastTouchLocation:

let horizontalOffset = image!.size.width / 2
let verticalOffset = image!.size.height / 2
let drawPoint =
    CGPoint(x: lastTouchLocation.x - horizontalOffset,
                y: lastTouchLocation.y - verticalOffset)

Now you tell the image to draw itself. This line of code does that:

image!.draw(at: drawPoint)

Build and run the application, select Image from the segmented control, and check that you can place an image on the drawing canvas. For a little extra fun, move your finger around the screen and observe that the image follows it.