W1501 Introduction to Objects
Research[edit]
- Read Computer Science I Textbook by Bourke Chapter 10. Encapsulation & Objects
- Review Presentation on Objects
Create[edit]
First Steps[edit]
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/
Build the project.
./make.sh
Run the project.
./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 your successful if you see a blank page and the title bar change to "Coder Merlin: IGIS".
Hello World[edit]
Stop the running program with ^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 and run the program again.
./run.sh
Now, refresh the browser page.
Let's change the font. Interrupt the running program and then 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 and run the program again.
./run.sh
Now, refresh the browser page.
Let's add a rectangle around the text. Interrupt the running program and then 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.paint(text)
let rect = Rect(topLeft:Point(x:20, y:10), size:Size(width:300, height:50))
let rectangle = Rectangle(rect:rect, fillMode:.stroke)
canvas.paint(rectangle)
}
Now, suspend emacs and then run the program again.
swift run
Now, refresh the browser page.
Exercises[edit]
Making use of your accumulated knowledge to date (loops, functions, coding style, etc.) and using only Rectangles and Text:
- 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