W1504 First Steps on a Path

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

— Merlin, The Coder

Torii Path with Lantern

Prerequisites

• W1503 Lines and Ellipses

Research

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

Prepare

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 W1504

Enter the Sources/ScenesShell directory of the new project:

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

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

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

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 the file Background.swift in emacs.

Add a new method (below init) as follows:

    override func setup(canvasSize:Size, 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.render(path)
    }

Remember to save the file, then suspend emacs.

Run the program and view in a browser before continuing.

Note that there are always at least three steps to rendering 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. Render 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.render(path)
    }

Run the program and view in a browser before continuing.

Filled Paths

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.render(outerFillColor, outerLineWidth, outerPath)
    }

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.render(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.render(innerFillColor, innerLineWidth, innerPath)
    }

Run the program and view in a browser before continuing.

Ellipses

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.render(pupilFillColor, pupil)

Run the program and view in a browser before continuing.

Lines

Let's add some lines. Note that in this case, because we are using the moveTo() primitive, the line segments are not connected to one another. Modify setup by adding the following text to the end of the method:

        let lashes = Path()
        lashes.moveTo(Point(x:415, y:325))
        lashes.lineTo(Point(x:395, y:305))
        lashes.moveTo(Point(x:440, y:310))
        lashes.lineTo(Point(x:420, y:290))
        let lashesStrokeColor = StrokeStyle(color:Color(.brown))
        let lashesWidth = LineWidth(width:2)
        canvas.render(lashesStrokeColor, lashesWidth, lashes)

Run the program and view in a browser before continuing.

Exercises

Exercises

Continuing with this project:

1. Add at least five more eyelashes above the eye. Pay attention to the proper angle. (It will be helpful to PLAN this by using graph paper.)
2. Change the color of the eyelashes to the color of your eyelashes.
3. Change the color of the iris to match the color of your eyes.
4. Move all of the code to draw the eye to a separate function, named "paintEye()". Invoke the function.
5. Modify the function to accept a Point parameter, "location", which will specify the location of the eye.
6. Invoke the paintEye() function twice using two different locations, placing the eyes at an appropriate distance apart.