W1504 First Steps on a Path

From Coder Merlin
Torii Path with Lantern

Prerequisites[edit]

Research[edit]

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 W1504


Enter the Sources/ScenesShell directory of the new project:

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


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

HintIcon.png
Helpful 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

Primitives[edit]

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 rendering 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.

Start button green arrow
Run the program and view in a browser before continuing.


ObserveIcon.png
Observe, Ponder, and Journal : Section 1
  1. What do you observe?
  2. What is the purpose of the parameters startAngle and endAngle?
  3. In which direction do you think the arc is being drawn (clockwise or counterclockwise)?
  4. How can you test your hypothesis?


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

  1. Create the Path object
  2. Build the Path by adding primitives. Often multiple primitives will be added. 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

Another Arc[edit]

Stop button red ex
Stop the running program.

Return to the console and press CONTROL-C


Let's add a second arc. Modify setup 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)
        path.arc(center:Point(x:500, y:283), radius:100, startAngle:0.2*Double.pi, endAngle:0.8*Double.pi)
        canvas.render(path)
    }
Start button green arrow
Run the program and view in a browser before continuing.


ObserveIcon.png
Observe, Ponder, and Journal : Section 2
  1. What do you observe?
  2. Note that there is only a single canvas.render() statement. How does this single statement result in the rendering of two arcs?

Filled Paths[edit]

Stop button red ex
Stop the running program.

Return to the console and press CONTROL-C


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(canvasSize:Size, 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)
    }
Start button green arrow
Run the program and view in a browser before continuing.


ObserveIcon.png
Observe, Ponder, and Journal : Section 3
  1. What do you observe?
  2. Which line number determines whether or not this Path is filled?

Adding a Second Path[edit]

Stop button red ex
Stop the running program.

Return to the console and press CONTROL-C


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

    override func setup(canvasSize:Size, 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)
    }
Start button green arrow
Run the program and view in a browser before continuing.


ObserveIcon.png
Observe, Ponder, and Journal : Section 4
  1. What do you observe?
  2. The outerPath contains two arcs and each specifies a startAngle and endAngle. These angles aren't specified explicitly for the innerPath. What are the default angles in this case?

Ellipses[edit]

Stop button red ex
Stop the running program.

Return to the console and press CONTROL-C

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)
Start button green arrow
Run the program and view in a browser before continuing.

Lines[edit]

Stop button red ex
Stop the running program.

Return to the console and press CONTROL-C


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)
Start button green arrow
Run the program and view in a browser before continuing.


ObserveIcon.png
Observe, Ponder, and Journal : Section 5
  1. What do you observe?
  2. Is a path necessarily constructed of a single, continuous line?

Exercises[edit]

ExercisesIcon.png
Exercises
  •  J1504  Create a journal and answer all questions. Be sure to include all sections of the journal, properly formatted.
  • On a single canvas:
    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 "renderEye()". Invoke the function.
    5. Modify the function to accept a Point parameter, "location", which will specify the location of the eye.
    6. Invoke the renderEye() function twice using two different locations, placing the eyes at an appropriate distance apart.


Designed with pride in Silicon Valley, CA, USA