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.render(fillStyle)
        canvas.render(rectangle)
    }

Remember to save the file, then suspend emacs.

Run the program and refresh the browser page.

Stop the running program.

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.render(strokeStyle)
        canvas.render(rectangle)
    }

Remember to save the file, then suspend emacs.

Run the program and refresh the browser page.

Stop the running program.

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.render(strokeStyle)
        canvas.render(lineWidth)
        canvas.render(rectangle)
    }

Remember to save the file, then suspend emacs.

Run the program and refresh the browser page.

Stop the running program.

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.render(fillStyle)
        canvas.render(strokeStyle)
        canvas.render(lineWidth)
        canvas.render(rectangle)
    }

Remember to save the file, then suspend emacs.

Run the program and refresh the browser page.

Stop the running program.

Exercises

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.