Angles and Turning

On this page, you will learn about sprite turning angles, which are needed for drawing polygons. For starters, you'll draw various asterisks, like these:
asterisk with three spokes asterisk with five spokes asterisk with eight spokes

When you were trying to draw an equilateral triangle on the previous page, you might have tried code like this:
repeat (3) {move (100) steps; turn right (60) degrees} and seen a result like this: three sides of a regular hexagon
It's common to try this if you've learned that the angles in an equilateral triangle are all 60 degrees. However, the angle that the sprite needs to turn to make a triangle is actually 120 degrees, and it's important to understand why that is and how to find the correct angle for other polygons (five-sided, eleven-sided, etc.).

  1. Click here to load a starter project. Then save it.
  2. Perform the four experiments (A-D), and read the comments attached to each one. As you do, talk with your partner about what you see and why it happens.
  3. Then, experiment with the last script (shown right):
    repeat (2): {move (100) steps, move (-100) steps, turn (180) degrees}
    1. Experiment with a quarter turn (turn 90 degrees instead of 180). Adjust the number of repetitions (the number you give to repeat) until you get the sprite to finish facing the same way it started.
      animation of drawing an asterisk with four spokes
    2. Experiment with a tenth of a turn (turn 36 degrees). What input must you give to repeat to get the sprite to finish facing the same way it started?
    3. Without trying it on the computer, figure out what turning angle to use for a five-spoke asterisk. Make sure your partner agrees.
    4. Then, try the experiment.
  4. Talk with Your Partner Describe what you've learned about turning angles.
  5. At the top of the page you were thinking about triangles. As a step in that direction, make a three-spoke asterisk.
    Click for a hint.
    image of three spoke asterisk being drawn slowly with the sprite tracing out a different color in each third
A 360° turn is a full turn. Half of that (180°) is a half turn. A fourth of 360° 360-divided-by-4-with-result-90 is a quarter turn. You don't have to do the division yourself. Snap! can compute it for you. You can use turn-360-divided-by-7-degrees or turn-360-divided-by-3-degrees to get a seventh of a turn or a third of a turn.
Pair Programming Swap

At the beginning of this page, you knew that to make a triangle you need 120° turns, but maybe you weren't sure why. Now you know why a three-spoke asterisk takes 120° turns, but what does that have to do with triangles?

  1. Try different negative input values for the move -100 steps block (first -90, then -50, then -10), and do some of the turning experiments (above) with each value. Does this change the values needed for the repeat or turn blocks? These pictures are called "pinwheels."
  2. Click here to load a starter project. Then save it.
    Now, run script (A) in the file and experiment:
    1. Change the inputs in script A to draw an asterisk with:
      1. 5 branches
      2. 8 branches
      3. 3 branches
    2. Make a copy of the three-branch script you built (right-click or control-click the script, and choose "duplicate").
      1. In the copy, remove the move -100 steps block.
      2. What does this new script do?
    3. Make another copy of the three-branch script you built, and then:
      1. Change it to a four-branch script.
      2. Remove the move -100 steps block again.
      3. What does this new script do?

Debugging with say for

You can use say for to get information about the state of your program while it's running.

This animation shows how to use say for to determine the bug in code that is supposed to draw a rectangle. Notice how say for makes the program pause and gives you information to help you identify the source of error.

Animation on how to use say for blocks for debugging an erroneous rectangle construction.

  1. Script B in the same file shows how you can make a 60-branch script behave like the second hand of a clock. Try it out.
    • Talk with Your PartnerBe sure you are able to explain how this script does what it does.
    • Why is the change in pen color and size useful here?
      clear;repeat(60){set pen color to (black); set pensize to (1); move (100) steps; wait (1) secs; set pen color to (white); set pensize to (3); move (-100) steps; turn clockwise(360/60) degrees}
  1. What shape would the following script draw?
    clear; pen down; repeat (5) {move (100) steps; turn right (360-divided-by-5) degrees}
    pentagon
    asterisk with five branches
    figure with five sides, but not a closed polygon
    circle
art loosely inspired by Alma Thomas       art loosely inspired by Alma Thomas       art loosely inspired by Alma Thomas       art loosely inspired by Alma Thomas
Alma Thomas painting
  1. At the right is a painting by Alma Thomas. See what it inspires you to do.
    It's your art. Take liberties.
    Omar: It looks like a map. Houses on the left, the town center on the right, with City Hall and the fire station and the mall.
    Jasmine: Maybe. To me the part on the left looks a little like a fingerprint, and the part on the right is clearly a person facing right, with her nose up against the right edge, halfway down.
    Morgan: Never mind what it looks like. How are we going to make something that looks like it?
    Jasmine: Parts of it look like curved, thick dotted lines. We could do something like this:
    set color to (brown square); set pen size to (10); set (flat line ends) to (True); repeat (10) {pen down; move (15) steps; pen up; move (5) steps; turn right (5) degrees}      sprite draws curved thick dotted line
    But I'm not sure how to get a bunch of those to fit together.
    Morgan: Randomness is your friend. Let's make a bunch of your lines, all different, and just point them in different directions.
    dotted line definition: set pen color to (brown square); set pen size to (10); set (flat line ends) to (True); repeat (pick random (8) to (20)): {pen down; move (pick random (10) to (20)) steps; pen up; move (pick random (1) to (8)) steps; turn right (pick random (-10) to (20)) degrees}   repeat (10): {dotted line; point towards (center); turn right (pick random (-90) to (90) degrees}   picture of several connected irregular dotted lines
    Jasmine: Wow! That's very cool.
    Morgan: Nothing like what it's supposed to look like, though.
    Jasmine: What do you mean, "supposed"? Go read the boldface line up above this blue box again.
    Morgan: Yeah, I know, but "take liberties" doesn't mean "take whatever happens on your first try." I have another idea. We've been thinking of Thomas's picture as brown boxes on a white background, but it's actually more brown than white. What if we start with a brown background and draw white lines on it?
    Omar: What about that town center on the right?
    Jasmine: It's not a map. But to make you happy, when drawing white lines over toward the right, we can make them thicker, so the right part will have more white space than the left part.
    Morgan: Uh oh... If you look carefully at the original picture, the brown boxes aren't all the same shade of brown.
    Jasmine: Morgan, you worry too much. But to make you happy, once we have the space divided into brown regions, we can fill some of them in different colors.
    Omar: Hey! Gang! Remember we imported that crayon library? Guess what! There's a "World Map" library, too! And it makes "watercolor" maps like this:
    vague map of a town
    And then I went over every dot on the stage using (brightness) at (myself) and (hue) at (myself) to decide whether to make each dot white or brown:
    same vague map of a town but now in brown and white
  2. What did Alma Thomas intend by her painting: a map, a fingerprint, or something else? Do some research.