Difference between revisions of "W1501 Introduction to Objects"
Line 46: | Line 46: | ||
}} | }} | ||
Open the file ''Background.swift'' in emacs. Read through the file. You'll find some code as follows: | |||
<syntaxhighlight lang="swift"> | |||
class Background : RenderableEntity | |||
</syntaxhighlight> | |||
This defines a new ''class'' named '''Background'''. The colon and the following identifier, '''RenderableEntity''', indicates that the ''class'' '''Background''' inherits properties and methods from the class '''RenderableEntity'''. You'll note that the class includes a '''constructor''', indicated by the keyword '''init''' on line 2: | |||
<syntaxhighlight lang="swift" highlight="2" line> | |||
class Background : RenderableEntity { | |||
init() { | |||
// Using a meaningful name can be helpful for debugging | |||
super.init(name:"Background") | |||
} | |||
} | |||
</syntaxhighlight> | |||
The '''constructor''' is invoked automatically as the object (an '''instance''' of the class) is being initialized. This is the place where you'll set up your object. The current constructor in this file sets the object's name using the keywords '''super.init'''. '''super''' indicates that we're invoking a function (or accessing a property) on our '''parent''' class, the class from which we ''inherited''. In this case, that would be the '''RenderableEntity'''. | |||
We're going to display some text on our ''canvas'' (the virtual surface on which we'll be rendering images in the browser). In order to do that, we'll first declare a '''Text''' object as follows: | |||
<syntaxhighlight lang="swift" highlight="2" line> | |||
class Background : RenderableEntity { | |||
let text : Text | |||
init() { | |||
// Using a meaningful name can be helpful for debugging | |||
super.init(name:"Background") | |||
} | |||
} | |||
</syntaxhighlight> | |||
We'll ''initialize'' our text object in the constructor: | |||
<syntaxhighlight lang="swift" highlight="5-6" line> | |||
class Background : RenderableEntity { | |||
let text : Text | |||
init() { | |||
// Initialize objects | |||
text = Text(location:Point(x:50, y:50), text:"Hello, World!") | |||
// Using a meaningful name can be helpful for debugging | |||
super.init(name:"Background") | |||
} | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
At this point, we have a '''Text''' object that "knows" how to render itself on the canvas, but it hasn't yet actually done any rendering. There are two methods in which we generally render. The first is called ''setup''. The ''setup'' function executes once. It's an opportunity to set up objects and/or render if we're creating a static (non-animated) display. The other function is ''render'' which executes once per frame. In this case, using ''setup'' is sufficient. | |||
<syntaxhighlight lang="swift" | |||
func setup(canvas:Canvas) { | Add a new method (below ''init'') as follows: | ||
<syntaxhighlight lang="swift" line> | |||
override func setup(canvasSize:Size, canvas:Canvas) { | |||
canvas.render(text) | canvas.render(text) | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
This code instructs the ''text'' object to render itself on the canvas. | |||
Save the file, then suspend emacs. | |||
{{RunProgram|Run the program and refresh the browser page.}} | {{RunProgram|Run the program and refresh the browser page.}} | ||
{{Observe|: Section 1| | {{Observe|: Section 1| | ||
# What do you observe? | # What do you observe? | ||
# How large is the text?}} | # How large is the text?}} | ||
{{StopProgram|Stop the running program.}} | {{StopProgram|Stop the running program.}} | ||
Let's change the font. Resume emacs and | Let's change the font. Resume emacs and add a line below where the text object is instantiated. | ||
<syntaxhighlight lang="swift" highlight=" | <syntaxhighlight lang="swift" highlight="4"> | ||
init() { | |||
// Initialize objects | |||
text = Text(location:Point(x:50, y:50), text:"Hello, World!") | |||
text.font = "30pt Arial" | text.font = "30pt Arial" | ||
// Using a meaningful name can be helpful for debugging | |||
super.init(name:"Background") | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
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.}} | {{RunProgram|Run the program and refresh the browser page.}} | ||
{{Observe|: Section 2| | {{Observe|: Section 2| | ||
# What do you observe? | # What do you observe? | ||
# How large is the text now?}} | # How large is the text now?}} | ||
{{StopProgram|Stop the running program.}} | {{StopProgram|Stop the running program.}} |
Revision as of 11:20, 31 March 2020
Prerequisites[edit]
Background[edit]
- Read Computer Science I Textbook by Bourke Chapter 10. Encapsulation & Objects
- Review Presentation on Objects
Introduction[edit]
We'll begin our exploration of objects using Scenes. Scenes is an object-oriented, event-driven platform that enables us to write server-side Swift code which (rapidly) sends a series of instructions to a browser to generate visual effects, and optionally, an interactive experience. Scenes is built upon another framework called Igis.
It's important to understand that while most of the objects we'll be using have an associated visual representation, most of the objects that we build and interact with in programming will not have such a representation.
Prepare[edit]
Create a new Scenes shell project within your "Experiences" directory:
ty-cam@codermerlin:~$ cd ~/Experiences
ty-cam@codermerlin:~/Experiences$ git clone https://github.com/TheCoderMerlin/ScenesShellBasic W1501
Getting started with a shell enables us to avoid writing repetitive code commonly required by all similar projects. This type of code is often called boilerplate code.
Enter the Sources/ScenesShell directory of the new project:
ty-cam@codermerlin:~/Experiences$ cd W1501/Sources/ScenesShell/
Run the program.
ty-cam@codermerlin:~/Experiences/W1501/Sources/ScenesShell$ run |
Open a browser (or use a new tab on an already-open browser). Then, 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/ty-cam/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.
Return to the console and press CONTROL-C |
Open the file Background.swift in emacs. Read through the file. You'll find some code as follows:
class Background : RenderableEntity
This defines a new class named Background. The colon and the following identifier, RenderableEntity, indicates that the class Background inherits properties and methods from the class RenderableEntity. You'll note that the class includes a constructor, indicated by the keyword init on line 2:
class Background : RenderableEntity {
init() {
// Using a meaningful name can be helpful for debugging
super.init(name:"Background")
}
}
The constructor is invoked automatically as the object (an instance of the class) is being initialized. This is the place where you'll set up your object. The current constructor in this file sets the object's name using the keywords super.init. super indicates that we're invoking a function (or accessing a property) on our parent class, the class from which we inherited. In this case, that would be the RenderableEntity.
We're going to display some text on our canvas (the virtual surface on which we'll be rendering images in the browser). In order to do that, we'll first declare a Text object as follows:
class Background : RenderableEntity {
let text : Text
init() {
// Using a meaningful name can be helpful for debugging
super.init(name:"Background")
}
}
We'll initialize our text object in the constructor:
class Background : RenderableEntity {
let text : Text
init() {
// Initialize objects
text = Text(location:Point(x:50, y:50), text:"Hello, World!")
// Using a meaningful name can be helpful for debugging
super.init(name:"Background")
}
}
At this point, we have a Text object that "knows" how to render itself on the canvas, but it hasn't yet actually done any rendering. There are two methods in which we generally render. The first is called setup. The setup function executes once. It's an opportunity to set up objects and/or render if we're creating a static (non-animated) display. The other function is render which executes once per frame. In this case, using setup is sufficient.
Add a new method (below init) as follows:
override func setup(canvasSize:Size, canvas:Canvas) {
canvas.render(text)
}
This code instructs the text object to render itself on the canvas.
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 add a line below where the text object is instantiated.
init() {
// Initialize objects
text = Text(location:Point(x:50, y:50), text:"Hello, World!")
text.font = "30pt Arial"
// Using a meaningful name can be helpful for debugging
super.init(name:"Background")
}
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!")
text.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