W1503 Lines and Ellipses

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

Prerequisites[edit]

Research[edit]

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

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 W1503


Enter the Sources/ScenesShell directory of the new project:

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


Start button green arrow
Run the program.

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


Ensure that you are logged on to the wiki. Then, click on the Tools menu followed by right-clicking on IGIS and selecting the menu item Open in New Window or Open in New Tab.

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
It's useful to bookmark this page in your browser.

Experiment[edit]

Stop button red ex
Stop the running program.

Return to the console and press CONTROL-C

Render a Line[edit]

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:110, y:150), to:Point(x:200, y:150))
        canvas.render(lines)
     }

Remember to save the file, then suspend emacs.

Hint.pngHelpful 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)


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. What is the purpose of LineWidth?
  3. Why do we draw lines with StrokeStyle rather than FillStyle?


Stop button red ex
Stop the running program.

Render a Triangle[edit]

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:110, y:150), to:Point(x:200, y:150))
        lines.lineTo(Point(x:155, y:250))
        lines.lineTo(Point(x:110, y:150))
        canvas.render(lines)
     }
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. Which statements draw the triangle?
  3. What would happen without line 10 (in the above listing)?


Stop button red ex
Stop the running program.

Circumscribe the Triangle with an Ellipse[edit]

Resume emacs and add the following lines so that the entire function appears as:

    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:110, y:150), to:Point(x:200, y:150))
        lines.lineTo(Point(x:155, y:250))
        lines.lineTo(Point(x:110, y:150))
        canvas.render(lines)

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

        let ellipse = Ellipse(center:Point(x:155, y:200), radiusX:120, radiusY:55)
        canvas.render(ellipse)
     }
ObserveObserveIcon.png
Observe, Ponder, and Journal: : Section 3
  1. What do you observe?
  2. Why do you think the class Ellipse is used to draw a circle?
  3. What is the purpose of radiusX and radiusY?

Exercises[edit]

Template:W1503-Exercises