Squares and Ovals 🟧🥚¶

Meet the rectangle's tidy cousin and the circle's stretchy cousin

Squares: Rectangles With Equal Sides 🟧¶

A square is a rectangle whose width and length are the same. Instead of giving both, you give one size:

// Default canvas: 800 wide, 600 tall, white
draw square at 100, 100 having size 120, fill "orange"

Just like a rectangle, at is where the top-left corner goes. The square grows to the right and down from there.

Here are three squares of different sizes, all starting at the same top-left corner:

// Default canvas: 800 wide, 600 tall, white
draw square at 50, 50 having size 150, fill "lightblue"
draw square at 50, 50 having size 100, fill "skyblue"
draw square at 50, 50 having size 50, fill "steelblue"

Squares can do everything rectangles can: fill, stroke, thickness, color, and corners like topLeft and center.

// Default canvas: 800 wide, 600 tall, white
draw square box at 100, 100 having size 100, fill "khaki", stroke "brown", thickness 4
draw circle at box.center having radius 20, fill "brown"

Ovals: Stretched Circles 🥚¶

An oval is a circle that has been stretched. You choose how width (left to right) and how length (top to bottom) it is:

// Default canvas: 800 wide, 600 tall, white
draw oval at 200, 150 having width 200, length 100, fill "pink"

Like a circle, an oval's at is its center.

Try making the length bigger than the width, and the oval stands up like an egg:

// Default canvas: 800 wide, 600 tall, white
draw oval at 150, 150 having width 80, length 120, fill "beige", stroke "tan", thickness 3

When the width and length are the same, the oval is a circle!

Where Does `at` Go? 📍¶

This is the most important thing to remember about these shapes:

Shape	What `at` means
circle	the center
oval	the center
rectangle	the top-left corner
square	the top-left corner

So a circle and a square both drawn at 150, 150 don't line up the way you might expect:

// Default canvas: 800 wide, 600 tall, white
draw square at 150, 150 having size 100, fill "gold"
draw circle at 150, 150 having radius 50, fill "tomato"

To put the circle in the middle of the square, use the square's center:

// Default canvas: 800 wide, 600 tall, white
draw square s at 150, 150 having size 100, fill "gold"
draw circle at s.center having radius 50, fill "tomato"

Let's Build a Snowman ⛄¶

// Default canvas: 800 wide, 600 tall, white
draw oval at 200, 300 having width 160, length 140, fill "white", stroke "lightgray", thickness 2
draw oval at 200, 190 having width 110, length 100, fill "white", stroke "lightgray", thickness 2
draw circle at 180, 180 having radius 6, fill "black"
draw circle at 220, 180 having radius 6, fill "black"
draw rectangle at 150, 130 having width 100, length 12, fill "black"
draw square at 170, 80 having size 60, fill "black"

Challenge Time! 🏆¶

🌟 Challenge 1: Draw a target: three ovals with the same center, each one smaller than the last.
🌟 Challenge 2: Draw a chessboard row: four squares side by side, colored black, white, black, white.
🌟 Challenge 3: Give the snowman two button circles on its tummy.

What's Next? 🚀¶

You can now draw squares with size and ovals with width and length, and you know where each shape's at goes.

Next up: triangles, the pointy shape with three corners! 🔺