Difference between revisions of "W1501 Introduction to Objects"
Line 59: | Line 59: | ||
{{Observe| | {{Observe| | ||
1 | Section 1 | ||
# What do you observe? | |||
# How large is the text?}} | |||
{{StopProgram|Stop the running program.}} | {{StopProgram|Stop the running program.}} | ||
Line 78: | Line 79: | ||
{{Observe| | {{Observe| | ||
2 | Section 2 | ||
# What do you observe? | |||
# How large is the text now?}} | |||
{{StopProgram|Stop the running program.}} | {{StopProgram|Stop the running program.}} | ||
Line 100: | Line 102: | ||
{{Observe| | {{Observe| | ||
3 | Section 3 | ||
# What do you observe? | |||
# What is the purpose of the location parameter in the Text constructor? | |||
# What is the corresponding parameter named in the Rectangle? | |||
# What is the difference between a Rect and a Rectangle? Hint: Are you able to render a Rect? | |||
}} | }} | ||
Revision as of 17:07, 7 June 2019
Research[edit]
- Read Computer Science I Textbook by Bourke Chapter 10. Encapsulation & Objects
- Review Presentation on Objects
Create[edit]
First Steps[edit]
Begin a new project. |
Create an Igis shell project within your "project" directory.
cd ~/projects
git clone https://github.com/TangoGolfDigital/IgisShellD IgisShell-Introduction
Enter into the Sources directory of the new project.
cd IgisShell-Introduction/Sources/IgisShellD/
Run the program.
./run.sh
|
Open a browser (or use a new tab on an already-open browser).
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/john-williams/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.)
Hello World[edit]
Stop the running program.
Press ^C (Hold down the CONTROL key and press C)
|
Open main.swift in emacs.
emacs main.swift
Find the function within the Painter object named "setup". Add a line to create a Text object and then draw (render) that object on the "canvas", an imaginary surface for painting within the browser.
func setup(canvas:Canvas) {
let text = Text(location:Point(x:50, y:50), text:"Hello, World!")
canvas.render(text)
}
Remember to save the file, then suspend emacs.
Run the program and refresh the browser page. |
Section 1
- What do you observe?
- How large is the text?
Stop the running program. |
Let's change the font. Resume emacs and edit the line where the text object is instantiated.
func setup(canvas:Canvas) {
let text = Text(location:Point(x:50, y:50), text:"Hello, World!", font:"30pt Arial")
canvas.render(text)
}
Remember to save the file, then suspend emacs.
Run the program and refresh the browser page. |
Section 2
- What do you observe?
- How large is the text now?
Stop the running program. |
Let's add a rectangle around the text. Resume emacs and add the following lines so that the entire function appears as:
func setup(canvas:Canvas) {
let text = Text(location:Point(x:50, y:50), text:"Hello, World!", font:"30pt Arial")
canvas.render(text)
let rect = Rect(topLeft:Point(x:20, y:10), size:Size(width:300, height:50))
let rectangle = Rectangle(rect:rect, fillMode:.stroke)
canvas.render(rectangle)
}
Remember to save the file, then suspend emacs.
Run the program and refresh the browser page. |
Section 3
- What do you observe?
- What is the purpose of the location parameter in the Text constructor?
- What is the corresponding parameter named in the Rectangle?
- What is the difference between a Rect and a Rectangle? Hint: Are you able to render a Rect?
Stop the running program. |
Exercises[edit]
Making use of your accumulated knowledge to date (loops, functions, coding style, etc.) and using only Rectangles and Text on a single canvas:
- Draw a single rectangle (without any text)
- Draw a grid (at least 3 x 3)
- Draw a brick wall (at least 5 x 5)
- Draw a pyramid constructed of bricks (at least seven rows high)
- Draw a skyscraper with a large sign on the roof containing your name
- Draw at least three skyscrapers of different heights on the same Canvas, each containing your name