W1512 Colorful Turtles

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

— Merlin, The Coder

Hawaii Turtle

Prerequisites

• 1511 Walking Turtles

Background

Turtle graphics enable us to not only lift and drop the pen, but also to change the pen color and thickness. Using these tools and prior knowledge, we can generate a wide variety of colorful and complex patterns.

Experiment

Getting Started

Begin a new project

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

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

Enter into the Sources directory of the new project.

cd IgisShell-ColorfulTurtle/Sources/IgisShell/

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

swift build

Run the project.

swift run

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". (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.

First Steps

Let's draw a square. Edit file "main.swift":

emacs main.swift

Edit the file by finding the definition of the Painter class. Before the init constructor, add the following property:

    var didDraw = false

This will enable us to keep track of whether or not the turtle completed its drawing mission.

Now, add an update method as follows:

    override func update(canvas:Canvas) {
        if let canvasSize = canvas.canvasSize, !didDraw {

            let turtle = Turtle(canvasSize:canvasSize)
            turtle.forward(steps:100)
            turtle.right(degrees:90)
            turtle.forward(steps:100)
            turtle.right(degrees:90)
            turtle.forward(steps:100)
            turtle.right(degrees:90)
            turtle.forward(steps:100)
            turtle.right(degrees:90)
            canvas.paint(turtle)

            didDraw = true
        }
    }

The method creates a new Turtle. (Remember that the initial position of the turtle is home. In the home position, the turtle is located in the center of the screen and pointed up (northward). We then:

1. Tell the turtle to move forward 100 steps
2. Turn right (clockwise) 90 degrees
3. Tell the turtle to move forward 100 steps
4. Turn right (clockwise) 90 degrees
5. Tell the turtle to move forward 100 steps
6. Turn right (clockwise) 90 degrees
7. Tell the turtle to move forward 100 steps
8. Turn right (clockwise) 90 degrees

Because the turtle is facing up (north) initially, our turtle first moves upward.

Run the project. View the results in the browser as you did earlier.

It appears that several of those steps were repeated. As we've learned, a better option to organize this code would be to use a loop. Let's refactor our code as follows:

    override func update(canvas:Canvas) {
        if let canvasSize = canvas.canvasSize, !didDraw {

            let turtle = Turtle(canvasSize:canvasSize)
            for _ in 1 ... 4 {
                turtle.forward(steps:100)
                turtle.right(degrees:90)
            }
            canvas.paint(turtle)

            didDraw = true
        }
    }

Run the project. View the results in the browser as you did earlier.

While this is an improvement, we can do better. Let's refactor some more and move the interesting functionality to a separate function and invoke that function from update.

    func paintSquare(turtle:Turtle) {
        for _ in 1 ... 4 {
            turtle.forward(steps:100)
            turtle.right(degrees:90)
        }
    }

    override func update(canvas:Canvas) {
        if let canvasSize = canvas.canvasSize, !didDraw {

            let turtle = Turtle(canvasSize:canvasSize)
            paintSquare(turtle:turtle)
            canvas.paint(turtle)

            didDraw = true
        }
    }

Run the project. View the results in the browser as you did earlier.