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 Experiences 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 |
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.)
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.
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. |
- 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. |
- 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)
}
- What do you observe?
- Why do you think the class Ellipse is used to draw a circle?
- What is the purpose of
radiusX
andradiusY
?