Difference between revisions of "W1503 Lines and Ellipses"
Line 104: | Line 104: | ||
{{StopProgram|Stop the running program.}} | {{StopProgram|Stop the running program.}} | ||
== Circumscribe the Triangle with an Ellipse == | === Circumscribe the Triangle with an Ellipse === | ||
<syntaxhighlight lang="swift"> | Resume emacs and add the following lines so that the entire function appears as: | ||
func setup(canvas:Canvas) { | <syntaxhighlight lang="swift" line highlight="13-14,16-17"> | ||
override func setup(canvasSize:Size, canvas:Canvas) { | |||
let lineWidth = LineWidth(width:3) | let lineWidth = LineWidth(width:3) | ||
canvas. | canvas.render(lineWidth) | ||
let blue = StrokeStyle(color:Color(red:100, green:100, blue:255)) | let blue = StrokeStyle(color:Color(red:100, green:100, blue:255)) | ||
canvas. | canvas.render(blue) | ||
let lines = Lines(from:Point(x:110, y:150), to:Point(x:200, y:150)) | 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:155, y:250)) | ||
lines.lineTo(Point(x:110, y:150)) | lines.lineTo(Point(x:110, y:150)) | ||
canvas. | canvas.render(lines) | ||
let violet = StrokeStyle(color:Color(.blueviolet)) | let violet = StrokeStyle(color:Color(.blueviolet)) | ||
canvas. | canvas.render(violet) | ||
let ellipse = Ellipse(center:Point(x:155, y:200), radiusX:120, radiusY:55) | let ellipse = Ellipse(center:Point(x:155, y:200), radiusX:120, radiusY:55) | ||
canvas. | canvas.render(ellipse) | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
Revision as of 17:34, 26 April 2020
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.)
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:10, y:50), to:Point(x:100, y:50))
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:10, y:50), to:Point(x:100, y:50))
lines.lineTo(Point(x:55, y:150))
lines.lineTo(Point(x:10, y:50))
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)
}
Exercises[edit]
Continuing your previous experience:
- Split your pyramid so that a few rows near the apex are separated from the body of the pyramid
- Alter the pyramid so that these separated rows (on top) are drawn using a triangle (rather than by a rows of bricks)
- Inside the triangle, draw an eye
- Draw the entire pyramid in shades of green. (Use at least three different shades of green.) See this note for more information about colors.