W1502 Object Attributes
Prerequisites[edit]
Background[edit]
- Read Color (Wikipedia)
Prepare[edit]
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/
Run the program.
ty-cam@codermerlin:~/Experiences/W1502/Sources/ScenesShell$ run |
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.)
Experiment[edit]
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.
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. |
- What do you observe?
- Is the rectangle wider than it is tall or taller than it is wide? Why?
- Is the rectangle filled or only an outline? Why?
- 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. |
- What do you observe?
- Is the rectangle filled or only an outline? Why?
- 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. |
- What do you observe?
- 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. |
- What do you observe?
- 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.)