W1502 Object Attributes

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

— Merlin, The Coder

RGB color wheel 24

Prerequisites

• W1501 Introduction to Objects

Background

• Read Color (Wikipedia)

Prepare

Create a new Scenes shell project within your Experience directory:

ty-cam@codermerlin:~$  cd ~/Experiences

ty-cam@codermerlin:~/Experiences$  git clone https://github.com/TheCoderMerlin/ScenesShellBasic W1502

Enter the Sources/ScenesShell directory of the new project:

ty-cam@codermerlin:~/Experiences$  cd W1502/Sources/ScenesShell/

Open a browser (or use a new tab on an already-open browser). Then, go to the URL:

http://www.codermerlin.com/users/user-name/dyn/index.html

NOTE: You MUST change user-name to your actual user name. For example, http://www.codermerlin.com/users/ty-cam/dyn/index.html

You'll know you're successful if you see the title bar change to "Coder Merlin: IGIS". (The browser window will be blank because we haven't added any graphics yet.)

Helpful Hint

It's useful to bookmark this page in your browser.

Experiment

Stop the running program. Return to the console and press CONTROL-C

Open the file Background.swift in emacs.

Add a new method (below init) as follows:

    override func setup(canvasSize:Size, 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, rectangle)
    }

Remember to save the file, then suspend emacs.

Helpful Hint

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)

Run the program and refresh the browser page.

Observe

Observe, Ponder, and Journal: : Section 1

1. What do you observe?
2. Is the rectangle wider than it is tall or taller than it is wide? Why?
3. Is the rectangle filled or only an outline? Why?
4. What color is the rectangle? Why is it that specific shade rather than a similar color?

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:

    override func setup(canvasSize:Size, 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, rectangle)
    }

Remember to save the file, then suspend emacs.

Run the program and refresh the browser page.

Observe

Observe, Ponder, and Journal: : Section 2

1. What do you observe?
2. Is the rectangle filled or only an outline? Why?
3. What color is the rectangle? Why is it that specific shade rather than a similar color?

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:

    override func setup(canvasSize:Size, 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, lineWidth, rectangle)
    }

Remember to save the file, then suspend emacs.

Run the program and refresh the browser page.

Observe

Observe, Ponder, and Journal: : Section 3

1. What do you observe?
2. How has the appearance of the rectangle changed from the previous section? Why?

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:

    override func setup(canvasSize:Size, 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, strokeStyle, lineWidth, rectangle)
    }

Remember to save the file, then suspend emacs.

Run the program and refresh the browser page.

Observe

Observe, Ponder, and Journal: : Section 4

1. What do you observe?
2. How has the appearance of the rectangle changed from the previous section? Why?

Stop the running program.

Before beginning the exercises, remove the above code and then recreate your skyscrapers (and only your skyscrapers) from the previous experience. (You may copy/paste the required code from W1501 Introduction to Objects.)

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.