W1502 Object Attributes

Within these castle walls be forged Mavens of Computer Science ...

— Merlin, The Coder

Prerequisites

• W1501 Introduction to Objects

Research

• Predefined color names may be found here: CSS Color Keywords, or, colors may be created by their RGB values using the constructor Color(red:UInt8, green:UInt8, blue:UInt8)

Experiment

Enter into the Sources/IgisShellD directory of the W1501 experience.

cd ~/Experiences/W1501/Sources/IgisShellD

Open main.swift in emacs.

emacs main.swift

Find the function within the Painter object named "setup". Edit the contents as follows to specify the fill color of the rectangle:

    func setup(canvas:Canvas) {
        let rect = Rect(topLeft:Point(x:100, y:50), size:Size(width:200, height:300))
        let rectangle = Rectangle(rect:rect)
        let fillStyle = FillStyle(color:Color(.blue))
        canvas.paint(fillStyle)
        canvas.paint(rectangle)
    }

Now, suspend emacs and then run the program again.

swift run

Now, refresh the browser page.

Let's stroke the rectangle in green instead of filling it. Interrupt the running program and then resume emacs and edit the setup function so it appears as follows:

    func setup(canvas:Canvas) {
        let rect = Rect(topLeft:Point(x:100, y:50), size:Size(width:200, height:300))
        let rectangle = Rectangle(rect:rect, fillMode:.stroke)
        let strokeStyle = StrokeStyle(color:Color(.green))
        canvas.paint(strokeStyle)
        canvas.paint(rectangle)
    }

Now, suspend emacs and then run the program again.

swift run

Now, refresh the browser page.

Let's thicken the stroke line. Interrupt the running program and then resume emacs and add the following lines so that the entire function appears as:

    func setup(canvas:Canvas) {
        let rect = Rect(topLeft:Point(x:100, y:50), size:Size(width:200, height:300))
        let rectangle = Rectangle(rect:rect, fillMode:.stroke)
        let strokeStyle = StrokeStyle(color:Color(.green))
        let lineWidth = LineWidth(width:5)
        canvas.paint(strokeStyle)
        canvas.paint(lineWidth)
        canvas.paint(rectangle)
    }

Now, suspend emacs and then run the program again.

swift run

Now, refresh the browser page.

Finally, let's both stroke and fill simultaneously. Interrupt the running program and then resume emacs and add the following lines so that the entire function appears as:

    func setup(canvas:Canvas) {
        let rect = Rect(topLeft:Point(x:100, y:50), size:Size(width:200, height:300))
        let rectangle = Rectangle(rect:rect, fillMode:.fillAndStroke)
        let fillStyle = FillStyle(color:Color(.green))
        let strokeStyle = StrokeStyle(color:Color(.blue))
        let lineWidth = LineWidth(width:5)
        canvas.paint(fillStyle)
        canvas.paint(strokeStyle)
        canvas.paint(lineWidth)
        canvas.paint(rectangle)
    }

Now, suspend emacs and then run the program again.

swift run

Now, refresh the browser page.

Exercises

Continuing your previous project of (at least) three skyscrapers:

1. Color the sky and ground
2. Color the body of each skyscraper in a different color
3. Color various aspects of your skyscraper (e.g. windows, doors) in different colors

When done, you must have at least seven different colors on your canvas.