Difference between revisions of "W1503 Lines and Ellipses"
Line 3: | Line 3: | ||
* [[W1502 Object Attributes]] | * [[W1502 Object Attributes]] | ||
= Research = | == Research == | ||
* Examine the back of a dollar bill. Note the pyramid on the left-hand side. | * Examine the back of a dollar bill. Note the pyramid on the left-hand side. | ||
== Prepare == | |||
Create a new {{SwiftLibrary|Scenes}} shell project within your {{Pathname|Experience}} directory: | |||
{{ConsoleLine|ty-cam@codermerlin:~$ |cd ~/Experiences}} | |||
{{ConsoleLine|ty-cam@codermerlin:~/Experiences$ |git clone <nowiki>https://github.com/TheCoderMerlin/ScenesShellBasic</nowiki> W1503}} | |||
Enter the Sources/ScenesShell directory of the new project: | |||
{{ConsoleLine|ty-cam@codermerlin:~/Experiences$ |cd W1503/Sources/ScenesShell/}} | |||
{{RunProgram|Run the program. | |||
{{ConsoleLine|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: | |||
<pre> | |||
http://www.codermerlin.com/users/user-name/dyn/index.html | |||
</pre> | |||
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|It's useful to bookmark this page in your browser.}} | |||
= Experiment = | = Experiment = |
Revision as of 17:09, 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]
Enter into the Sources/IgisShellD directory of the W1501 experience.
cd ~/Experiences/W1501/Sources/IgisShellD
Open main.swift in emacs.
emacs main.swift
Paint a Single Blue Line[edit]
Find the function within the Painter object named "setup". Edit the contents as follows:
func setup(canvas:Canvas) {
let lineWidth = LineWidth(width:3)
canvas.paint(lineWidth)
let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
canvas.paint(blue)
let lines = Lines(from:Point(x:10, y:50), to:Point(x:100, y:50))
canvas.paint(lines)
}
Paint a Triangle[edit]
Find the function within the Painter object named "setup". Edit the contents as follows:
func setup(canvas:Canvas) {
let lineWidth = LineWidth(width:3)
canvas.paint(lineWidth)
let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
canvas.paint(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.paint(lines)
}
Now, run the program and view in a browser before continuing.
Circumscribe the Triangle with an Ellipse[edit]
Find the function within the Painter object named "setup". Edit the contents as follows:
func setup(canvas:Canvas) {
let lineWidth = LineWidth(width:3)
canvas.paint(lineWidth)
let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
canvas.paint(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.paint(lines)
let violet = StrokeStyle(color:Color(.blueviolet))
canvas.paint(violet)
let ellipse = Ellipse(center:Point(x:155, y:200), radiusX:120, radiusY:55)
canvas.paint(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.