Difference between revisions of "W1501 Introduction to Objects"
Line 6: | Line 6: | ||
== First Steps == | == First Steps == | ||
{{NewProject|Begin a '''new''' project.}} | |||
Create an Igis shell project within your "project" directory. | Create an Igis shell project within your "project" directory. | ||
Line 19: | Line 19: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{RunProgram|Run the program. | {{RunProgram|Run the program. | ||
<syntaxhighlight lang="bash"> | <syntaxhighlight lang="bash"> | ||
./run.sh | ./run.sh | ||
</syntaxhighlight> | </syntaxhighlight>}} | ||
Open a browser (or use a new tab on an already-open browser). | Open a browser (or use a new tab on an already-open browser). | ||
Line 32: | Line 32: | ||
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.) | 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|Helpful hint: It's useful to bookmark this page in your browser.}} | ||
== Hello World == | == Hello World == | ||
{{StopProgram|Stop the running program. | |||
<syntaxhighlight lang="bash"> | |||
Press ^C (Hold down the CONTROL key and press C) | |||
</syntaxhighlight>}} | |||
Line 70: | Line 73: | ||
Remember to save the file, then suspend emacs. | Remember to save the file, then suspend emacs. | ||
{{RunProgram|Run the program and refresh the browser page.}} | |||
What do you observe? How large is the text now? | What do you observe? How large is the text now? | ||
Line 76: | Line 79: | ||
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: | 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: | ||
<syntaxhighlight lang="swift"> | <syntaxhighlight lang="swift" highlight="5-7"> | ||
func setup(canvas:Canvas) { | func setup(canvas:Canvas) { | ||
let text = Text(location:Point(x:50, y:50), text:"Hello, World!", font:"30pt Arial") | let text = Text(location:Point(x:50, y:50), text:"Hello, World!", font:"30pt Arial") | ||
canvas. | canvas.render(text) | ||
let rect = Rect(topLeft:Point(x:20, y:10), size:Size(width:300, height:50)) | let rect = Rect(topLeft:Point(x:20, y:10), size:Size(width:300, height:50)) | ||
let rectangle = Rectangle(rect:rect, fillMode:.stroke) | let rectangle = Rectangle(rect:rect, fillMode:.stroke) | ||
canvas. | canvas.render(rectangle) | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Remember to save the file, then suspend emacs. | |||
{{RunProgram|Run the program and refresh the browser page.}} | |||
What do you observe? | |||
== Exercises == | == Exercises == |
Revision as of 15:36, 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. |
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. |
What do you observe? How large is the text now?
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.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?
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