W1511 Walking Turtles
Prerequisites[edit]
Research[edit]
- Read Turtle Graphics
Background[edit]
Igis supports traditional turtle graphics. For turtle graphics, the coordinate system is different from the more standard graphics coordinate system used throughout the rest of Igis. In this coordinate system, the center of the canvas is labeled as the origin (0,0), and is termed home. When the turtle is in the home position, it is oriented up. Rotating to the right rotates the turtle clockwise from north the specified number of degrees, rotating left rotates the turtle counter-clockwise the specified number of degrees. The turtle can also move forwards or backwards a specified number of steps in the direction in which it is currently pointed.
Note: It's OK to mix objects and turtle graphics.
Prepare[edit]
Create a new Scenes shell project within your Experiences directory:
Enter the Sources/ScenesShell directory of the new project:
![]() |
Run the program.
ty-cam@codermerlin:~/Experiences/W1511/Sources/ScenesShell$ run
|
Open a browser (or use a new tab on an already-open browser). Then, go to the URL: https://www.codermerlin.com/igis/user-name/
![]() |
Caution |
|
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[edit]
![]() |
Stop the running program.
Return to the console and press CONTROL-C |
First Steps[edit]
Imagine a turtle, perhaps Lissemys punctata. Our turtle has a pen attached to his tail, so as he moves he leaves a trail of ink on the canvas. (Note: No actual turtle has been harmed in this tutorial.) Our turtle is very obedient and he'll always do exactly what we tell him to do. He begins in his home position, facing up (north) at the center of the canvas. He doesn't know anything about coordinate systems and is very limited in his abilities. Nonetheless, we'll soon learn that there's great power in simplicity.
Let's start by telling our turtle to move forward 50 steps.
Open the file Background.swift in emacs.
Add a new property to the Background class:
class Background : RenderableEntity {
var didDraw = false
init() {
// Using a meaningful name can be helpful for debugging
super.init(name:"Background")
}
}
This will enable us to keep track of whether or not the turtle completed its drawing mission.
Add a new method (below init) as follows:
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didDraw {
let turtle = Turtle(canvasSize:canvasSize)
turtle.forward(steps:50)
canvas.render(turtle)
didDraw = true
}
}
The conditional that we added will evaluate to true only if the size of the canvas is available and we didn't yet draw with the turtle. If the consequent is executed, the very last statement will set the flag didDraw to true, ensuring that the consequent executes only once.
The guts (pardon the pun) of the method creates a new Turtle. We then:
- Tell the turtle to move forward 50 steps
Because the turtle is facing up (north) initially, our turtle draws a line from the center of the canvas upwards for fifty steps.
Remember to save the file, then suspend emacs.
![]() |
Run the program and view in a browser before continuing. |
Hang a Left[edit]
Let's tell our turtle to make a left turn of 135°. (Remember that the turtle measures rotation in degrees, not radians.) Find the render method and edit so it appears as follows:
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didDraw {
let turtle = Turtle(canvasSize:canvasSize)
turtle.forward(steps:50)
turtle.left(degrees:135)
canvas.render(turtle)
didDraw = true
}
}
![]() |
Run the program and view in a browser before continuing. |
![]() |
Observe, Ponder, and Journal : Section 1 |
|
We didn't see any difference because the turtle itself isn't visible, only its trail. Because we didn't move after rotating, there's no evidence of the rotation.
Let's move forward 70 steps. Find the render method and edit so it appears as follows:
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didDraw {
let turtle = Turtle(canvasSize:canvasSize)
turtle.forward(steps:50)
turtle.left(degrees:135)
turtle.forward(steps:70)
canvas.render(turtle)
didDraw = true
}
}
![]() |
Run the program and view in a browser before continuing. |
The body (pardon the pun) of the method creates a new Turtle. We then:
- Tell the turtle to move forward 50 steps
- Tell the turtle to turn left 135°
- Tell the turtle to move forward 70 steps
It looks like we now have the beginnings of a triangle. Let's complete it by turning again to the left, and then moving forward to our starting point. Find the render method and edit so it appears as follows:
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didDraw {
let turtle = Turtle(canvasSize:canvasSize)
turtle.forward(steps:50)
turtle.left(degrees:135)
turtle.forward(steps:70)
turtle.left(degrees:135)
turtle.forward(steps:50)
canvas.render(turtle)
didDraw = true
}
}
![]() |
Run the program and view in a browser before continuing. |
The body of the method creates a new Turtle. We then:
- Tell the turtle to move forward 50 steps
- Tell the turtle to turn left 135°
- Tell the turtle to move forward 70 steps
- Tell the turtle to turn left 135°
- Tell the turtle to move forward 50 steps
Squares are Shapes Too[edit]
Let's draw a square using the turtle. We'll turn to the right this time. Find the render method and edit so it appears as follows:
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didDraw {
let turtle = Turtle(canvasSize:canvasSize)
turtle.forward(steps:50)
turtle.right(degrees:90)
turtle.forward(steps:50)
turtle.right(degrees:90)
turtle.forward(steps:50)
turtle.right(degrees:90)
turtle.forward(steps:50)
canvas.render(turtle)
didDraw = true
}
}
![]() |
Run the program and view in a browser before continuing. |
Turtles CAN Lift Their Tails[edit]
Well, they can at least lift their pens. Let's draw a rectangle but leave gaps on the top and bottom. Find the render method and edit so it appears as follows:
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didDraw {
let turtle = Turtle(canvasSize:canvasSize)
turtle.forward(steps:50)
turtle.right(degrees:90)
turtle.forward(steps:50)
turtle.penUp()
turtle.forward(steps:25)
turtle.penDown()
turtle.forward(steps:50)
turtle.right(degrees:90)
turtle.forward(steps:50)
turtle.right(degrees:90)
turtle.forward(steps:50)
turtle.penUp()
turtle.forward(steps:25)
turtle.penDown()
turtle.forward(steps:50)
canvas.render(turtle)
didDraw = true
}
}
![]() |
Run the program and view in a browser before continuing. |
Key Concepts[edit]
![]() |
Key Concepts |
|
Exercises[edit]
![]() |
Exercises |
|