TRTC – Drawing on a Canvas – Chapter 2 Part I

For the record. As I write this down I haven’t read the whole book yet. So this is actually my journey through this book. Exiting 🙂

In this Chapter the book covers the drawing on a canvas. So I guess that at the end of this chapter I will see something on my screen.

Let’s jump right in.

Jamis Buck

Introducing Colors

Computers use three different values to represent colors. There is like three different channels: reg, green and blue. You might have heard about RGB colors. So this is it. Every channel can get a value between 0.0 and 1.0. When channel has value 0.0 that channel is off and the value is 1.0 it means that the channel is fully on. By mixing all these three values you get millions of other colors.

First thing to notice is that colors are tuples like points and vectors (red, green, blue). So this is already a concept that we are familiar with. Although there is no mention about the fourth component. I know that the colors might have also the alpha channel which controls the opacity of the color, but the book doesn’t mention anything about it. Not at this point anyway. So the tuple and the color are not that equal. Hmm…

Reorganize

Time out! I start to feel like creating all these data structures and building the functionality from scratch might not be the best idea. So I choose to reorganise some base stuff at this point. Why to invent the wheel again?

Apple has a framework called simd. It includes all these math stuff you need when dealing with points, vectors, matrixes and so on. I desired to use that and to build my stuff on top of those ready to go datatypes. After some recoding the RGTuple.swift file in my RGCore framework is much shorter now and all Chapter 1 test still works. So now I’m ready to go bag to colors.

Back To Colors

All color related code is added into RGColor.swift file. To be able to follow the book I choose to use Swifts typealias capability to give simd_float3 a new name RGColor. This way the code is easier to follow and the naming is in line with earlier created code. Creating a type alias in Swift is this easy.

public typealias RGColor = simd_float3

Type simd_float3 has three float:s which are compatible with Swift Float. And since RGColor is equal to simd_float3, it have only 3 members just like the color in books example. The names of the RGColor type members are not very descriptive by default. So to change that I use another nice thing in Swift called extensions to extend the RGColors capabilities. To add members that can only get the inner variables using names red, green and blue the code below is created the extension below.

/**
 RGColor extension to get inner values using typical channel names: red, green and blue.
 */
public extension RGColor {
    var red: Float {
        get {
            return self.x
        }
    }
    var green: Float {
        get {
            return self.y
        }
    }
    var blue: Float {
        get {
            return self.z
        }
    }
}

We also need the function to create a new color variables. This is for convenience. And since the RGColor uses Float it can be done like this:

/**
 Factory function to create a new RGColor.
 */
public func newRGColor(red: Float, green: Float, blue: Float) -> RGColor {
    return RGColor(x: red, y: green, z: blue)
}

The code above is not mandatory. We could also use the contstructor we already have, but the factory function is for convenience. Alternative method is below just for completeness.

let c = RGColor(x: 0.3, y: 0.2, z: 0.8)

The equality function is also little different here since we have (so far) only three components. The earlier created Float extension (remember the Alert thing from previous post where I found out “the hard way”, why epsilon based comparison is needed) works here well. So to add equality check for RGColor I added this function:

/**
 RGColor equality function that uses Float extension isEqualTo
 which is based on the epsilon comparison.
 */
public func equalColors(_ lT: RGColor, _ rT: RGColor) -> Bool {
    if  lT.x.isEqualTo(rT.x) &&
        lT.y.isEqualTo(rT.y) &&
        lT.z.isEqualTo(rT.z) {
        return true
    }
    else {
        return false
    }
}

All other functionality like adding, subtracting, multiplying and so on are there out of the box because we use simd_float3 type under the hood. But WAIT! what about the test case approach??? Arhg. I forget them because I was so exited with this cleaner code. Sorry for that.

Here is the test cases for colors. All of them. (And by the way I renamed the files that includes the deprecated code. These files are the RayGISUnitTestsTuplesDeprecated.swift and RGTupleDeprecated.swift. The originally named files include the new code. And comes the test cases:

    /**
     * CHAPTER 2
     */
    
    /**
     Chapter 2.
     Test Colors.
     Create color tuple.
     */
    func testRGColorCreation() {
        // Given
        let r: Float = -0.5
        let g: Float =  0.4
        let b: Float =  1.7
        
        // When
        let c = newRGColor(red: r, green: g, blue: b)
        
        // Then
        XCTAssertEqual(c.red.isEqual(to:  -0.5), true)
        XCTAssertEqual(c.green.isEqual(to: 0.4), true)
        XCTAssertEqual(c.blue.isEqual(to:  1.7), true)
    }
    
    
    /**
     Chapter 2.
     Adding is same as for RGPoints and RGVectors.
     */
    func testRGColorAdding() {
        // Given
        let c1 = newRGColor(red: 0.9, green: 0.6, blue: 0.75)
        let c2 = newRGColor(red: 0.7, green: 0.1, blue: 0.25)
        
        // When
        let res = (c1 + c2)
        let test = newRGColor(red: 1.6, green: 0.7, blue: 1.0)

        // Then
        XCTAssertEqual(equalColors(res, test), true)
    }
    
    
    /**
     Chapter 2.
     Subtracting is same as for RGPoints and RGVectors.
     */
    func testRGColorSubtracting() {
        // Given
        let c1 = newRGColor(red: 0.9, green: 0.6, blue: 0.75)
        let c2 = newRGColor(red: 0.7, green: 0.1, blue: 0.25)
        
        // When
        let res = (c1 - c2)
        let test = newRGColor(red: 0.2, green: 0.5, blue: 0.5)
        
        // Then
        XCTAssertEqual(equalColors(res, test), true)
    }
    
    
    /**
     Chapter 2.
     Multiplying RGColor by scalar.
     */
    func testRGColorMultiplyByScalar() {
        // Given
        let c = newRGColor(red: 0.2, green: 0.3, blue: 0.4)

        // When
        // Then
        XCTAssertEqual(equalColors(c * 2, newRGColor(red: 0.4, green: 0.6, blue: 0.8)), true)
    }
    
    
    /**
     Chapter 2.
     Multiplying RGColor by another RGColor.
     The Hadamard product (or Shur product)
     */
    func testRGColorMultiplyByRGColor() {
        // Given
        let c1 = newRGColor(red: 1, green: 0.2, blue: 0.4)
        let c2 = newRGColor(red: 0.9, green: 1, blue: 0.1)
        
        // When
        // Then
        let c3 = c1 * c2
        
        XCTAssertEqual(equalColors(c3, newRGColor(red: 0.9, green: 0.2, blue: 0.04)), true)
    }

The Mistake!

So far so good. Ok. If you download the source code and runt the test everything should look ok. Green nice dots for every test. But there is one thing I haven’t mentioned. While rearranging the code I made this mistake with RGTuple. What was it? Well the result was infinite loop. Not so nice and it all ends to an EXC_BAD_ACCESS (code=2… . The reason was that I was trying to override the operator for RGTuple and use the original operator for simd_float4 to do the heavy lifting. So the code looked like this:

/**
 - Returns: A new RGTuple if adding is succesfull.
            The left operand if adding is not allowed.
 */
public func +(lT: RGTuple, rT: RGTuple) -> RGTuple {
    if (isRGVector(lT) && isRGPoint(rT) ) ||
        (isRGPoint(lT) && isRGVector(rT)) ||
        (isRGVector(lT) && isRGVector(rT)) {
        return lT + rT < THIS IS THE BAD THING HERE!
        }
    else {
        return lT
        }
}

So because the RGTuple is just fancy name for simd_float4 the code is not working because it overrides the + operator and uses it inside to implement it self??? So I changed the code to look like this:

/**
 - Returns: A new RGTuple if adding is succesfull.
            The left operand if adding is not allowed.
 */
public func +(lT: RGTuple, rT: RGTuple) -> RGTuple {
    if (isRGVector(lT) && isRGPoint(rT) ) ||
        (isRGPoint(lT) && isRGVector(rT)) ||
        (isRGVector(lT) && isRGVector(rT)) {
        return RGTuple(x: lT.x + rT.x, y: lT.y + rT.y, z: lT.z + rT.z, w: lT.w + rT.w)
        }
    else {
        return lT
        }
}

Now it works right. Same problem with the – operator. And theses operators where needed to be overridden since there was these rules in the Chapter 1 about what could be added and what not etc. . Now that the things are stable I leave it here since the next headline in the book is Creating a Canvas. Sounds like a Metal needs to get involved. So it will probably need a posting of its own 🙂