Difference between revisions of "W1501 Introduction to Objects"

From Coder Merlin
Line 59: Line 59:
   
   
{{Observe|
{{Observe|
1.1 What do you observe?
Section 1
1.2 How large is the text?}}
# What do you observe?
# How large is the text?}}


{{StopProgram|Stop the running program.}}
{{StopProgram|Stop the running program.}}
Line 78: Line 79:


{{Observe|
{{Observe|
2.1 What do you observe?
Section 2
2.2 How large is the text now?}}
# What do you observe?
# How large is the text now?}}


{{StopProgram|Stop the running program.}}
{{StopProgram|Stop the running program.}}
Line 100: Line 102:


{{Observe|
{{Observe|
3.1 What do you observe?
Section 3
3.2 What is the purpose of the location parameter in the Text constructor?
# What do you observe?
3.3 What is the corresponding parameter named in the Rectangle?
# What is the purpose of the location parameter in the Text constructor?
3.4 What is the difference between a Rect and a Rectangle?
# 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?
}}
}}



Revision as of 17:07, 7 June 2019

Within these castle walls be forged Mavens of Computer Science ...
— Merlin, The Coder

Research[edit]

Create[edit]

First Steps[edit]

New document
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/
Start button green arrow
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.)

Hint.pngHelpful Hint
Helpful hint: It's useful to bookmark this page in your browser.

Hello World[edit]

Stop button red ex
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.

Start button green arrow
Run the program and refresh the browser page.
ObserveObserveIcon.png
Observe, Ponder, and Journal:

Section 1

  1. What do you observe?
  2. How large is the text?
Stop button red ex
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.

Start button green arrow
Run the program and refresh the browser page.
ObserveObserveIcon.png
Observe, Ponder, and Journal:

Section 2

  1. What do you observe?
  2. How large is the text now?
Stop button red ex
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.

Start button green arrow
Run the program and refresh the browser page.
ObserveObserveIcon.png
Observe, Ponder, and Journal:

Section 3

  1. What do you observe?
  2. What is the purpose of the location parameter in the Text constructor?
  3. What is the corresponding parameter named in the Rectangle?
  4. What is the difference between a Rect and a Rectangle? Hint: Are you able to render a Rect?

Stop button red ex
Stop the running program.

Exercises[edit]

ExercisesExercisesIcon.png

Making use of your accumulated knowledge to date (loops, functions, coding style, etc.) and using only Rectangles and Text on a single canvas:

  1. Draw a single rectangle (without any text)
  2. Draw a grid (at least 3 x 3)
  3. Draw a brick wall (at least 5 x 5)
  4. Draw a pyramid constructed of bricks (at least seven rows high)
  5. Draw a skyscraper with a large sign on the roof containing your name
  6. Draw at least three skyscrapers of different heights on the same Canvas, each containing your name