W1501 Introduction to Objects
Prerequisites[edit]
Research[edit]
- Read Computer Science I Textbook by Bourke Chapter 10. Encapsulation & Objects
- Review Presentation on Objects
Explore[edit]
Begin a new project. |
Create a new Igis shell project within your "Experiences" directory.
cd ~/Experiences
git clone https://github.com/TheCoderMerlin/IgisShellD W1501
Enter into the Sources directory of the new project.
cd W1501/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. |
- 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!")
text.font = "30pt Arial"
canvas.render(text)
}
Remember to save the file, then suspend emacs.
Run the program and refresh the browser page. |
- 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. |
- 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