The Pen API

In this playground, you draw shapes using a Pen object. Think of it like a turtle on a canvas — it has a position and a direction, and it moves forward when you tell it to.

Creating a Pen

var p = Pen()          // Create a new pen at (0, 0), facing right
p.addLine(distance: 100)  // Move forward 100 units, drawing as you go
addShape(pen: p)          // Render the shape on screen

Key Commands

p.addLine(distance: 100)  // Draw a line 100 units forward
p.turn(degrees: 90)       // Turn LEFT 90°
p.move(distance: 50)      // Move 50 units without drawing
p.penColor = .red          // Change line colour
p.lineWidth = 3            // Change line thickness

Coordinate System

The canvas uses a standard Cartesian coordinate system — x increases to the right, y increases upward. The pen starts at the origin (0, 0) and faces right (along the positive x-axis). turn(degrees: 90) rotates the pen anti-clockwise (left turn).

Angles and Turning

The turn command rotates the pen in place. Positive degrees turn left (anti-clockwise); negative degrees turn right (clockwise).

Interior vs. Exterior Angles

When the pen draws a polygon, the angle you pass to turn is the exterior angle — the supplement of the interior angle.

• Interior angle: the angle inside the polygon at each vertex
• Exterior angle: the supplement — how much you turn to keep walking along the boundary
• For any convex polygon: interior + exterior = 180°

Angle Classification

• Acute — less than 90°
• Right — exactly 90°
• Obtuse — between 90° and 180°
• Straight — exactly 180°
• Reflex — greater than 180°

The Sum of Exterior Angles

For any convex polygon, the exterior angles add up to exactly 360° — one full rotation. This is why, after drawing a closed shape, the pen always faces its original direction.

// A right turn (clockwise): use a negative angle
var p = Pen()
p.addLine(distance: 100)
p.turn(degrees: -90)      // Turn RIGHT 90°
p.addLine(distance: 100)
addShape(pen: p)

Your Task

Draw a square with side length 100 using the Pen API. Remember: a square has 4 sides and turns of 90° at each corner.

var p = Pen()
// Your code here — 4 lines, 4 turns

addShape(pen: p)

Mathematical Concepts

Properties of a Square

• 4 equal sides
• 4 right angles (90° each)
• Perimeter = 4 × side length
• Area = side² = 100² = 10,000 square units
• Sum of exterior angles = 4 × 90° = 360° ✓

Quadrilateral Definition

A square is a special rectangle (all angles 90°), which is a special parallelogram (opposite sides parallel), which is a special quadrilateral (4-sided polygon).

var p = Pen()
p.addLine(distance: 100)
p.turn(degrees: 90)
p.addLine(distance: 100)
p.turn(degrees: 90)
p.addLine(distance: 100)
p.turn(degrees: 90)
p.addLine(distance: 100)
addShape(pen: p)
// 4 × 90° = 360° — the pen faces its original direction again

Your Task

Draw a 100 × 200 rectangle. The pen still turns 90° at each corner, but now the side lengths alternate.

var p = Pen()
// 4 sides, alternating 100 and 200

addShape(pen: p)

Mathematical Concepts

Rectangle Properties

• 2 pairs of equal parallel sides
• 4 right angles (90° each)
• Perimeter = 2(width + height) = 2(100 + 200) = 600 units
• Area = width × height = 100 × 200 = 20,000 square units

var p = Pen()
p.addLine(distance: 100)   // bottom
p.turn(degrees: 90)
p.addLine(distance: 200)   // right side
p.turn(degrees: 90)
p.addLine(distance: 100)   // top
p.turn(degrees: 90)
p.addLine(distance: 200)   // left side
addShape(pen: p)

Your Task

Draw three squares: side lengths 50, 100, and 150. Each starts from the same origin point. Use a single Pen and draw them one after the other.

var pen = Pen()

// Square 1: side 50

// Square 2: side 100

// Square 3: side 150

addShape(pen: pen)

Mathematical Concepts

Similar Figures

The three squares are similar figures — they have the same shape but different sizes. In similar figures:

• Corresponding angles are equal
• Corresponding side lengths are in the same ratio
• The scale factor from the 50-unit to the 100-unit square is 2; from 50 to 150 is 3

Any two squares are always similar — all squares have 90° angles and all sides are equal.

var pen = Pen()

// Square 1: side 50
pen.addLine(distance: 50); pen.turn(degrees: 90)
pen.addLine(distance: 50); pen.turn(degrees: 90)
pen.addLine(distance: 50); pen.turn(degrees: 90)
pen.addLine(distance: 50); pen.turn(degrees: 90)

// Square 2: side 100
pen.addLine(distance: 100); pen.turn(degrees: 90)
pen.addLine(distance: 100); pen.turn(degrees: 90)
pen.addLine(distance: 100); pen.turn(degrees: 90)
pen.addLine(distance: 100); pen.turn(degrees: 90)

// Square 3: side 150
pen.addLine(distance: 150); pen.turn(degrees: 90)
pen.addLine(distance: 150); pen.turn(degrees: 90)
pen.addLine(distance: 150); pen.turn(degrees: 90)
pen.addLine(distance: 150); pen.turn(degrees: 90)

addShape(pen: pen)

Your Task

Draw an equilateral triangle and a square, both with side length 100. You can share the first side, or draw them as separate shapes next to each other.

var triangle = Pen()
// Equilateral triangle — 3 sides, 120° turns

var square = Pen()
// Square — 4 sides, 90° turns

addShape(pen: triangle)
addShape(pen: square)

Mathematical Concepts

Equilateral Triangle

• 3 equal sides, 3 equal angles
• Each interior angle = 60°
• Turn angle (exterior) = 180° − 60° = 120°
• 3 × 120° = 360° ✓

Angle Sum Theorem

For any triangle, the interior angles sum to 180°. For an equilateral triangle: 60° + 60° + 60° = 180°. For a square: 90° + 90° + 90° + 90° = 360°.

General formula: Sum of interior angles = (n − 2) × 180°, where n is the number of sides.

var triangle = Pen()
triangle.addLine(distance: 100)
triangle.turn(degrees: 120)
triangle.addLine(distance: 100)
triangle.turn(degrees: 120)
triangle.addLine(distance: 100)

var square = Pen()
square.addLine(distance: 100)
square.turn(degrees: 90)
square.addLine(distance: 100)
square.turn(degrees: 90)
square.addLine(distance: 100)
square.turn(degrees: 90)
square.addLine(distance: 100)

addShape(pen: triangle)
addShape(pen: square)

Moving Without Drawing

p.addLine(distance: 100)  // Moves forward AND draws a line
p.move(distance: 100)     // Moves forward — no line drawn

The two commands behave identically in terms of changing the pen's position — the only difference is whether a line appears on screen.

Dashed Lines

Alternating addLine and move creates a dashed line:

var p = Pen()
p.addLine(distance: 50)   // dash
p.move(distance: 20)      // gap
p.addLine(distance: 50)   // dash
p.move(distance: 20)      // gap
p.addLine(distance: 50)   // dash
addShape(pen: p)

Exercise: Two Stacked Squares

Try drawing two separate squares — one above the other — using a single pen. Use move to jump from the first square to the second without connecting them.

var p = Pen()

// First square
p.addLine(distance: 80)
p.turn(degrees: 90)
p.addLine(distance: 80)
p.turn(degrees: 90)
p.addLine(distance: 80)
p.turn(degrees: 90)
p.addLine(distance: 80)
p.turn(degrees: 90)

// Jump up to next position
p.turn(degrees: 90)       // Face upward
p.move(distance: 120)     // Move up 120 units
p.turn(degrees: -90)      // Face right again

// Second square
p.addLine(distance: 80)
p.turn(degrees: 90)
p.addLine(distance: 80)
p.turn(degrees: 90)
p.addLine(distance: 80)
p.turn(degrees: 90)
p.addLine(distance: 80)

addShape(pen: p)

Your Task

Using one or more pens, draw a square (100), an equilateral triangle (100), and another square (100) in a row with small gaps between each shape.

var p = Pen()
// Square 1, then move, then Triangle, then move, then Square 2
addShape(pen: p)

Mathematical Concepts

Composing Shapes

Placing shapes side-by-side is an example of geometric composition — building complex figures from simple ones. The second square is a translation of the first — same shape, moved horizontally.

var p = Pen()

// Square 1
p.addLine(distance: 100); p.turn(degrees: 90)
p.addLine(distance: 100); p.turn(degrees: 90)
p.addLine(distance: 100); p.turn(degrees: 90)
p.addLine(distance: 100); p.turn(degrees: 90)

// Gap to triangle
p.move(distance: 120)

// Triangle
p.addLine(distance: 100); p.turn(degrees: 120)
p.addLine(distance: 100); p.turn(degrees: 120)
p.addLine(distance: 100); p.turn(degrees: 120)

// Gap to square 2  (pen already faces right after 3 × 120° = 360°)
p.move(distance: 120)

// Square 2
p.addLine(distance: 100); p.turn(degrees: 90)
p.addLine(distance: 100); p.turn(degrees: 90)
p.addLine(distance: 100); p.turn(degrees: 90)
p.addLine(distance: 100)

addShape(pen: p)

Your Task

Draw a five-pointed star. All arms should be the same length (150 units). The pen draws the whole star in one continuous stroke without lifting.

var p = Pen()
// 5 lines, 5 turns — what's the turn angle?
addShape(pen: p)

Mathematical Concepts

The Turn Angle for a Pentagram

For a regular polygon, the exterior angle = 360° / n. But for a star polygon, the path winds around the centre more than once.

• A pentagram winds around the centre twice
• Total rotation = 2 × 360° = 720°
• Each of the 5 turns = 720° ÷ 5 = 144°

Why 720°? A regular polygon path winds once (360°). A star polygon {5/2} winds twice — the path overlaps itself, completing two loops before returning to the start.

Star Polygon Notation

Mathematicians write this as {5/2} — a 5-point star connecting every 2nd vertex. The general turn angle for {n/k} is: 180° − 180°(n−2k)/n.

var p = Pen()
p.addLine(distance: 150); p.turn(degrees: 144)
p.addLine(distance: 150); p.turn(degrees: 144)
p.addLine(distance: 150); p.turn(degrees: 144)
p.addLine(distance: 150); p.turn(degrees: 144)
p.addLine(distance: 150); p.turn(degrees: 144)
addShape(pen: p)
// 5 × 144° = 720° = 2 × 360° ✓

Your Task

Draw a Star of David using two equilateral triangles of side length 150. The triangles should overlap to form a six-pointed star.

var up = Pen()
// Draw upward triangle

var down = Pen()
// Draw downward triangle

addShape(pen: up)
addShape(pen: down)

Mathematical Concepts

The Hexagram

Unlike the five-pointed star (drawn in one continuous path), a hexagram is formed from two separate triangles. The downward triangle is a rotation of the upward triangle by 60° around the centre.

Rotational Symmetry

A shape has rotational symmetry if it can be rotated by less than 360° and look identical. The Star of David has order-6 rotational symmetry — it looks the same after rotations of 60°, 120°, 180°, 240°, or 300°.

• Square → order-4 symmetry (looks same after 90°, 180°, 270°)
• Equilateral triangle → order-3 symmetry (looks same after 120°, 240°)
• Star of David → order-6 symmetry

var david = Pen()

// Triangle 1
david.addLine(distance: 150)
david.turn(degrees: 120)
david.addLine(distance: 150)
david.turn(degrees: 120)
david.addLine(distance: 150)
david.turn(degrees: 120)

// New start point
david.move(distance: 150)
david.turn(degrees: 90)
david.move(distance: 90)
david.turn(degrees: 90)

// Triangle 2
david.addLine(distance: 150)
david.turn(degrees: 120)
david.addLine(distance: 150)
david.turn(degrees: 120)
david.addLine(distance: 150)
david.turn(degrees: 120)

addShape(pen: david)