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)
• To customize your colors: color picker (RBG Color Code)

Prepare

Create a new Scenes shell project within your Experiences 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/

Run the program. ty-cam@codermerlin:~/Experiences/W1502/Sources/ScenesShell$  run

Ensure that you are logged on to the wiki. Then, click on the Tools menu followed by right-clicking on IGIS and selecting the menu item Open in New Window or Open in New Tab.

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

•  J1502  Create a journal and answer all questions. Be sure to include all sections of the journal, properly formatted.
• Continuing from your existing 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.

•  M1502-28  Complete  Merlin Mission Manager  Mission M1502-28.