Shapes Inside Shapes 🪆¶

Build bigger things out of smaller parts

Putting Shapes Inside a Shape 📦¶

You can put shapes inside another shape with curly brackets { }. The shapes inside are its parts:

// Default canvas: 800 wide, 600 tall, white
draw rectangle window at 100, 80 having width 160, length 120, fill "lightblue", stroke "white", thickness 6 {
  line from 80, 0 to 80, 120 having color "white", thickness 6
  line from 0, 60 to 160, 60 having color "white", thickness 6
}

Notice two things:

You don't write draw for the parts. Drawing the window draws its parts too.
The parts' numbers are measured from the window, not from the corner of the drawing. 80, 0 means "80 across and 0 down from the window's corner".

Move One, Move Them All 🚚¶

Because the parts are measured from the shape they're inside, moving the shape moves all its parts. Change the window's at above to 200, 150 and watch the lines move with it!

Here's a face. The eyes and mouth are measured from the face's center, because a circle's at is its center:

// Default canvas: 800 wide, 600 tall, white
draw circle face at 200, 150 having radius 100, fill "gold" {
  circle leftEye at -35, -25 having radius 12, fill "black"
  circle rightEye at 35, -25 having radius 12, fill "black"
  arc from 50, 30 to -50, 30 having radius 60, thickness 6
}

-35 means 35 to the left of the center, and -25 means 25 up. Negative numbers go the other way!

Reaching Inside a Shape 🔍¶

Parts have names too. Use a dot to reach inside: face.leftEye means "the leftEye of face".

// Default canvas: 800 wide, 600 tall, white
draw circle face at 200, 150 having radius 100, fill "gold" {
  circle leftEye at -35, -25 having radius 12, fill "white"
  circle rightEye at 35, -25 having radius 12, fill "white"
}
draw circle at face.leftEye.center having radius 5, fill "blue"
draw circle at face.rightEye.center having radius 5, fill "blue"

face.leftEye.center is the exact spot where the left eye is drawn, wherever the face is.

Inside the face, the parts can use each other's names without the face. part:

// Default canvas: 800 wide, 600 tall, white
draw circle face at 200, 150 having radius 100, fill "peachpuff" {
  circle eye at -35, -25 having radius 15, fill "white"
  circle pupil at eye.center having radius 6, fill "black"
}

You can change parts with the dot, too:

// Default canvas: 800 wide, 600 tall, white
circle face at 200, 150 having radius 100, fill "gold" {
  circle nose at 0, 10 having radius 12, fill "orange"
}
face.nose.fill = "red"
draw face

Parts Inside Parts 🪆¶

Parts can have parts of their own, as deep as you like. Each one is measured from the shape it's inside:

// Default canvas: 800 wide, 600 tall, white
draw rectangle house at 80, 120 having width 240, length 160, fill "wheat" {
  rectangle door at 100, 80 having width 40, length 80, fill "saddlebrown" {
    circle knob at 32, 40 having radius 4, fill "gold"
  }
  square window at 25, 30 having size 50, fill "lightblue" {
    line from 25, 0 to 25, 50 having color "white", thickness 3
  }
}
draw triangle roof having corner1 at 60, 120, corner2 at 340, 120, corner3 at 200, 30, fill "firebrick"

Build Once, Copy Many 📋¶

When you copy a shape, its parts come too. So you can build something once, then make as many as you like, and move or change each copy on its own:

// Default canvas: 800 wide, 600 tall, white
circle face at 80, 100 having radius 50, fill "gold" {
  circle leftEye at -18, -12 having radius 8, fill "black"
  circle rightEye at 18, -12 having radius 8, fill "black"
  arc from 25, 18 to -25, 18 having radius 35, thickness 4
}

circle friend = face
friend.x = 220
friend.fill = "lightgreen"
friend.leftEye.fill = "blue"
friend.rightEye.fill = "blue"

draw face
draw friend

friend.leftEye is the copy's own eye, so making it blue doesn't change the first face.

Parts that point at each other stay together too. The pupil below is placed at eye.center, so it stays in the eye when the copy moves:

// Default canvas: 800 wide, 600 tall, white
circle eyeball at 80, 100 having radius 40, fill "white", stroke "black", thickness 3 {
  circle iris at 10, 0 having radius 18, fill "skyblue"
  circle pupil at iris.center having radius 8, fill "black"
}
circle other = eyeball
other.x = 200

draw eyeball
draw other

Let's Build a Robot 🤖¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle robot at 120, 60 having width 160, length 220, fill "silver", stroke "dimgray", thickness 4 {
  square head at 40, -70 having size 80, fill "lightgray", stroke "dimgray", thickness 4 {
    circle at 25, 35 having radius 10, fill "cyan"
    circle at 55, 35 having radius 10, fill "cyan"
    line from 20, 60 to 60, 60 having color "dimgray", thickness 4
  }
  circle light at 80, 60 having radius 20, fill "red"
  rectangle at -40, 20 having width 40, length 120, fill "silver", stroke "dimgray", thickness 4
  rectangle at 160, 20 having width 40, length 120, fill "silver", stroke "dimgray", thickness 4
}

Challenge Time! 🏆¶

🌟 Challenge 1: Move the whole robot to the right by changing just one number.
🌟 Challenge 2: Give the robot legs: two rectangles inside it, measured from its corner.
🌟 Challenge 3: Draw a flower: a circle center with petals (ovals) inside it, then put a bee at one of the petals using the dot.

What's Next? 🚀¶

You can now put shapes inside shapes with { }, measure parts from the shape they're in, reach inside with the dot, and copy a shape together with all its parts.

Next up: choosing the size of your paper, and stacking drawings in layers! 🗂️