Day 2: Path and Turtle Geometry

2022-06-05. Filed in public, twoville.

We're back for day 2 of our fabrication summer camp. Yesterday we learned how to make frankenshapes using rectangles, circles, and polygons. We also saw how we can name a number, which turns it into a variable. Variables are easier to change than numbers, and they make the code easier to read. Today we'll be spending our time with two new big ideas: turtle geometry and curves. By the end of the day, you will have made a design that you are going to paint on a T-shirt.

Turtle Geometry

There's something magical about regular hexagons. They snap together to make sidewalks and floors. We move across hexagonal grids in video and board games. They have symmetry. They sit in the happy medium between squares and octagons. Let's try to make one in Twoville. Here's my first attempt:

It's okay. But something's wrong. It feels too tall. If I measure the side lengths, I find that the top and bottom are not long enough. Also, I think the whole thing is too big. To shrink it, I'm going to have to change all six positions. Ugh.

Or I could think about drawing a hexagon in an entirely different way. Imagine putting a turtle down at the bottom left vertex and tying a paint brush to its tail. Your job is to coach it so that it paints out a hexagon. You don't yell out, "Go to (70, 5)!" Instead you tell it to go forward or run. In Twoville, you yell walk. It's just a turtle after all.

Here's how you set a turtle up in Twoville and make it walk:

You have to situate and orient it with turtle and then make it move with walk. I'm using the path command, not polygon, because later we're going to add curves. Polygons can't have curves, but paths can.

As you can't see, there's not much path. We have only a line, not a filled shape. To see the line, we add a stroke:

After the turtle traces out one side of the hexagon, we yell for it to turn. The turtle in Twoville expects us to yell the number of degrees to turn. How many degrees must it turn to face the next side? If you've studied supplementary angles and geometry, you know that the angle is 60 degrees. If you haven't studied them, then you can experiment to find the right number. After turning, we get the turtle to walk again:

The turtle seems to be doing the right thing. We keep it going until it gets all the way back around to where it started:

Note that I used a variable for the side length. Through that variable I can easily change the hexagon's size.

Practice Exercise: Mountain

Now it's your turn to try out these ideas. Make this mountain range using turtle geometry:

Like always, start on graph paper. Roughly measure your lines and angles, and write the numbers down on your paper. Show it to a teacher. Once your design is given the thumbs-up, head to Twoville.

Design Exercise

Make a shape of your own design using turtle geometry. Follow the usual draw-measure-review-code workflow.

If you can't think of a shape, consider tracing out the first letter of a loved one's name and fabricating a sticker or paper cutout that you can give as a gift.

Bézier Curves

Suppose you want to make a cloud. The cloud you have in mind has a flat bottom and four bulbous shapes on its top and sides. A turtle that can only walk in straight lines is not going to be of much help here. But paths can have more than just straight lines. You can add a special kind of curve called a Bézier curve. These were invented by a French car designer named Bézier. These curves made it possible for computers to shape car bodies. Were cars blocky before he invented them? No, but it's fun to think they were.

You can think of a Bézier curve as a line segment paired with a black hole. The black hole sucks the line segment toward it, which causes the line to curve. The black hole is more properly called a control point. You make a Bézier curve in Twoville using the quadratic command:

Watch what happens when I trace out the bottom of the cloud and the first bulbous shape:

That curve doesn't look much like a cloud. No matter how much I fiddle with the control point, the curve is just too pointy. But there's a fix. I can add a second black hole. The first control point controls the starting curvature, and the second control point controls the ending curvature. A curve with two control points is drawn using the cubic command:

With four cubic segments, I form the fluffy cloud that I had in mind:

Practice Exercise: Fish

It's time to get your fins wet with Bézier curves. Make this fish:

Follow the usual draw-measure-review-code workflow.

I used some turtle geometry, a couple of quadratic Bézier curves, and a couple of cubic Bézier curves. I also added a circle command inside the path, which made a hole for the eye.

Design Exercise: T-shirt Negative

Thus far we've been making stickers and paper cutouts, throwing away the surrounding material. Now we are going to take that surrounding material, which we'll call the negative, stick it on a T-shirt, and then paint inside of it. So here's your design challenge: use turtle geometry and Bézier curves to create a shape that you'd wear around in public. Follow the usual draw-measure-review-code workflow. Then we'll cut your design into a negative and help you get it painted. The T-shirts will take some time to dry, so you won't take them home until later this week.