W1502 Object Attributes

From Coder Merlin
Within these castle walls be forged Mavens of Computer Science ...
— Merlin, The Coder
RGB color wheel 24

Prerequisites[edit]

Background[edit]

Prepare[edit]

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/


Start button green arrow
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.)

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

Experiment[edit]

Stop button red ex
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.

Hint.pngHelpful 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)


Start button green arrow
Run the program and refresh the browser page.


ObserveObserveIcon.png
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 button red ex
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.

Start button green arrow
Run the program and refresh the browser page.


ObserveObserveIcon.png
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 button red ex
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.

Start button green arrow
Run the program and refresh the browser page.


ObserveObserveIcon.png
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 button red ex
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.

Start button green arrow
Run the program and refresh the browser page.


ObserveObserveIcon.png
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 button red ex
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[edit]

  •  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.