W1503 Lines and Ellipses
Prerequisites[edit]
Research[edit]
- Examine the back of a dollar bill. Note the pyramid on the left-hand side.
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 W1503
Enter the Sources/ScenesShell directory of the new project:
ty-cam@codermerlin:~/Experiences$ cd W1503/Sources/ScenesShell/
![]() |
Run the program.
ty-cam@codermerlin:~/Experiences/W1503/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.)
![Hint.png](/wiki/images/thumb/0/0f/Hint.png/150px-Hint.png)
Experiment[edit]
![]() |
Stop the running program.
Return to the console and press CONTROL-C |
Render a Line[edit]
Open the file Background.swift in emacs.
Add a new method (below init) as follows:
override func setup(canvasSize:Size, canvas:Canvas) {
let lineWidth = LineWidth(width:3)
canvas.render(lineWidth)
let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
canvas.render(blue)
let lines = Lines(from:Point(x:110, y:150), to:Point(x:200, y:150))
canvas.render(lines)
}
Remember to save the file, then suspend emacs.
![Hint.png](/wiki/images/thumb/0/0f/Hint.png/150px-Hint.png)
An online tool to determine color values is available here. Use the RGB values in the following constructor to generate any custom color:
Color(red:UInt8, green:UInt8, blue:UInt8)
![]() |
Run the program and refresh the browser page. |
![ObserveIcon.png](/wiki/images/2/24/ObserveIcon.png)
- What do you observe?
- What is the purpose of
LineWidth
? - Why do we draw lines with
StrokeStyle
rather thanFillStyle
?
![]() |
Stop the running program. |
Render a Triangle[edit]
Resume emacs and edit the setup function so it appears as follows:
override func setup(canvasSize:Size, canvas:Canvas) {
let lineWidth = LineWidth(width:3)
canvas.render(lineWidth)
let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
canvas.render(blue)
let lines = Lines(from:Point(x:110, y:150), to:Point(x:200, y:150))
lines.lineTo(Point(x:155, y:250))
lines.lineTo(Point(x:110, y:150))
canvas.render(lines)
}
![]() |
Run the program and refresh the browser page. |
![ObserveIcon.png](/wiki/images/2/24/ObserveIcon.png)
- What do you observe?
- Which statements draw the triangle?
- What would happen without line 10 (in the above listing)?
![]() |
Stop the running program. |
Circumscribe the Triangle with an Ellipse[edit]
Resume emacs and add the following lines so that the entire function appears as:
override func setup(canvasSize:Size, canvas:Canvas) {
let lineWidth = LineWidth(width:3)
canvas.render(lineWidth)
let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
canvas.render(blue)
let lines = Lines(from:Point(x:110, y:150), to:Point(x:200, y:150))
lines.lineTo(Point(x:155, y:250))
lines.lineTo(Point(x:110, y:150))
canvas.render(lines)
let violet = StrokeStyle(color:Color(.blueviolet))
canvas.render(violet)
let ellipse = Ellipse(center:Point(x:155, y:200), radiusX:120, radiusY:55)
canvas.render(ellipse)
}
![ObserveIcon.png](/wiki/images/2/24/ObserveIcon.png)
- What do you observe?
- Why do you think the class Ellipse is used to draw a circle?
- What is the purpose of
radiusX
andradiusY
?