W1504 First Steps on a Path

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

— Merlin, The Coder

Prerequisites

• 1503 Lines and Ellipses

Research

• Read [Graphics]. Pay particular attention to the "Operation" section

Experiment

Get Ready

Begin a new project:

Create an Igis shell project within your "project" directory.

cd ~/projects
git clone https://github.com/TangoGolfDigital/IgisShell IgisShell-Paths

Enter into the Sources directory of the new project.

cd IgisShell-Paths/Sources/IgisShell/

Build the project. (This may take some time.)

swift build

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 your successful if you see the title bar change to "Coder Merlin: IGIS".

Primitives

Paths enable us to execute a series of primitives (lines, curves, ellipses, arcs, etc.) into a single unit for later display. Let's start by painting a path with a single arc.

Open main.swift in emacs.

emacs main.swift

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

    override func setup(canvas:Canvas) {
        let path = Path()
        path.arc(center:Point(x:500, y:400), radius:100, startAngle:1.2*Double.pi, endAngle:1.8*Double.pi)
        canvas.paint(path)
    }

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

Note that there are always at least three steps to painting a path:

1. Create the path object and specify the starting point of the path
2. Build the path by adding primitives. Often multiple primitives will be added to a path. In many cases, as new primitives are added, the starting point of the new primitive connects with the ending point of the previous primitive.
3. Paint the path on the canvas

Let's add a second arc. Modify setup as follows:

    override func setup(canvas:Canvas) {
        let path = Path()
        path.arc(center:Point(x:500, y:400), radius:100, startAngle:1.2*Double.pi, endAngle:1.8*Double.pi)
        path.arc(center:Point(x:500, y:283), radius:100, startAngle:0.2*Double.pi, endAngle:0.8*Double.pi)
        canvas.paint(path)
    }

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

One of the many advantages of paths is that they can be both stroked and filled, just as rectangles. Modify setup as follows:

    override func setup(canvas:Canvas) {
        let outerPath = Path(fillMode:.fillAndStroke)
        outerPath.arc(center:Point(x:500, y:400), radius:100, startAngle:1.2*Double.pi, endAngle:1.8*Double.pi)
        outerPath.arc(center:Point(x:500, y:283), radius:100, startAngle:0.2*Double.pi, endAngle:0.8*Double.pi)

        let outerFillColor = FillStyle(color:Color(.seashell))
        let outerLineWidth = LineWidth(width:2)
        canvas.paint(outerFillColor, outerLineWidth, outerPath)
    }

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

Let's add a new path. Modify setup as follows:

   override func setup(canvas:Canvas) {
        let outerPath = Path(fillMode:.fillAndStroke)
        outerPath.arc(center:Point(x:500, y:400), radius:100, startAngle:1.2*Double.pi, endAngle:1.8*Double.pi)
        outerPath.arc(center:Point(x:500, y:283), radius:100, startAngle:0.2*Double.pi, endAngle:0.8*Double.pi)
 
        let outerFillColor = FillStyle(color:Color(.seashell))
        let outerLineWidth = LineWidth(width:2)
        canvas.paint(outerFillColor, outerLineWidth, outerPath)

        let innerPath = Path(fillMode:.fillAndStroke)
        innerPath.arc(center:Point(x:500, y:340), radius:15)
        let innerFillColor = FillStyle(color:Color(.royalblue))
        let innerLineWidth = LineWidth(width:1)
        canvas.paint(innerFillColor, innerLineWidth, innerPath)
    }

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

Let's add an ellipse. Note that we can combine different object types on the same canvas. Modify setup by adding the following text to the end of the method:

        let pupil = Ellipse(center:Point(x:500, y:340), radiusX:4, radiusY:4, fillMode:.fill)
        let pupilFillColor = FillStyle(color:Color(.black))
        canvas.paint(pupilFillColor, pupil)