Difference between revisions of "W1501 Introduction to Objects"
Line 19: | Line 19: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{RunProgram|Run the program.}} | |||
<syntaxhighlight lang="bash"> | <syntaxhighlight lang="bash"> | ||
Line 35: | Line 35: | ||
== Hello World == | == Hello World == | ||
Stop the running program with ^C (Hold down the CONTROL key and press C) | [[File:Cute-Ball-Stop-icon.png|left|50px|Stop button red ex]] Stop the running program with ^C (Hold down the CONTROL key and press C) | ||
Open main.swift in emacs. | Open main.swift in emacs. | ||
Line 50: | Line 51: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Remember to save the file, then suspend emacs and | 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? | |||
{{StopProgram|Stop the running program.}} | |||
Let's change the font. Resume emacs and edit the line where the text object is instantiated. | |||
<syntaxhighlight lang="swift" highlight="2"> | <syntaxhighlight lang="swift" highlight="2"> | ||
func setup(canvas:Canvas) { | func setup(canvas:Canvas) { | ||
Line 65: | Line 69: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Remember to save the file, then suspend emacs and | Remember to save the file, then suspend emacs. | ||
< | [[File:Start button green arrow.svg|left|link=|Start button green arrow]] Run the program and refresh the browser page.<br/><br/><br/> | ||
</ | 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: | 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: |
Revision as of 15:19, 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.)
Helpful hint: It's useful to bookmark this page in your browser.
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.
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.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