W1503 Lines and Ellipses

Within these castle walls be forged Mavens of Computer Science ...

— Merlin, The Coder

Dollar Bill

Prerequisites

• W1502 Object Attributes

Research

• Examine the back of a dollar bill. Note the pyramid on the left-hand side.

Prepare

Create a new Scenes shell project within your Experience directory:

ty-cam@codermerlin:~$  cd ~/Experiences

ty-cam@codermerlin:~/Experiences$  git clone https://github.com/TheCoderMerlin/ScenesShellBasic W1503

Enter the Sources/ScenesShell directory of the new project:

ty-cam@codermerlin:~/Experiences$  cd W1503/Sources/ScenesShell/

Run the program. ty-cam@codermerlin:~/Experiences/W1503/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.)

Helpful Hint

It's useful to bookmark this page in your browser.

Experiment

Stop the running program. Return to the console and press CONTROL-C

Render a Line

Open the file Background.swift in emacs.

Add a new method (below init) as follows:

    override func setup(canvasSize:Size, canvas:Canvas) {
        let lineWidth = LineWidth(width:3)
        canvas.render(lineWidth)

        let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
        canvas.render(blue)

        let lines = Lines(from:Point(x:10, y:50), to:Point(x:100, y:50))
        canvas.render(lines)
     }

Remember to save the file, then suspend emacs.

Helpful Hint

An online tool to determine color values is available here. Use the RGB values in the following constructor to generate any custom color:

Color(red:UInt8, green:UInt8, blue:UInt8)

Run the program and refresh the browser page.

Observe

Observe, Ponder, and Journal: : Section 1

1. What do you observe?
2. What is the purpose of LineWidth?
3. Why do we draw lines with StrokeStyle rather than FillStyle?

Stop the running program.

Render a Triangle

Resume emacs and edit the setup function so it appears as follows:

    override func setup(canvasSize:Size, canvas:Canvas) {
        let lineWidth = LineWidth(width:3)
        canvas.render(lineWidth)

        let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
        canvas.render(blue)

        let lines = Lines(from:Point(x:10, y:50), to:Point(x:100, y:50))
        lines.lineTo(Point(x:55, y:150))
        lines.lineTo(Point(x:10, y:50))
        canvas.render(lines)
     }

Now, run the program and view in a browser before continuing.

Circumscribe the Triangle with an Ellipse

Find the function within the Painter object named "setup". Edit the contents as follows:

    func setup(canvas:Canvas) {
        let lineWidth = LineWidth(width:3)
        canvas.paint(lineWidth)

        let blue = StrokeStyle(color:Color(red:100, green:100, blue:255))
        canvas.paint(blue)

        let lines = Lines(from:Point(x:110, y:150), to:Point(x:200, y:150))
        lines.lineTo(Point(x:155, y:250))
        lines.lineTo(Point(x:110, y:150))
        canvas.paint(lines)

        let violet = StrokeStyle(color:Color(.blueviolet))
        canvas.paint(violet)

        let ellipse = Ellipse(center:Point(x:155, y:200), radiusX:120, radiusY:55)
        canvas.paint(ellipse)
     }

Exercises

Continuing your previous experience:

1. Split your pyramid so that a few rows near the apex are separated from the body of the pyramid
2. Alter the pyramid so that these separated rows (on top) are drawn using a triangle (rather than by a rows of bricks)
3. Inside the triangle, draw an eye
4. Draw the entire pyramid in shades of green. (Use at least three different shades of green.) See this note for more information about colors.