Making Polygons is a Snap!

Objective: Write a program that draws a regular polygon.
Big Ideas: Iteration, Parameter

Directions

0. Open up Firefox.
   
   
1. Go to http://snap.berkeley.edu/run (clicking the link will open a new tab)
   
   The top left of the window has a suite of eight palettes with "Motion" selected. Under that, there are blocks that are used to write programs. In the middle, there is space for writing the programs. At the top right there is the animation window where the program output appears.
   
   
   
   
2. Drag the block into the script area in the middle.
   
   
3. Click on the block a few times and observe the behavior of the sprite.
   
   
4. Change the 10 in the block to -10.
   
   
5. Click on the a few times to get the idea.
   
   
6. Drag the into the scripts area and click on it to put the sprite at (0,0). The display is 480x360 with (0,0) at the center.
   
   
7. Click on the Pen palette (dark green) in the palettes menu at the top left.
   
   
   
   
8. Drag the block into the center. Click it. Click on a few times so you can see how the pen works.
   
   NOTE: There are also and , which lift the pen and erase all pen drawings from the canvas, respectively.
   
   
9. Create the following sequence of blocks from the Pen and Motion palettes. Its purpose is to clear any previous drawings and position the sprite in the center of the display, pointing to the right.
   
   
   
   
10. Now let's create a procedure called , which will draw a square. To create your own procedure, CTL-click the mouse on unoccupied space in the Scripts portion of the display and select "make a block..." at the bottom of the menu. This will open a dialog window:
    
    
    
    
11. Because this block will be used to draw something, it should be viewed as a Pen block. Click on Pen (it will highlight in green) and enter "square" (without the quotes) in the text field. Then click OK.
    
    
    
    
12. You are now in the block editor, which should look like this:
    
    
    
    Noting that there is a block where the number of degrees can be changed, drag and connect blocks together into the block editor that will move the sprite in a square with side length 50 and angle 90.
    
    
    
    
13. Click OK to save the square block. If you look in the Pen palette, you will now notice a block at the bottom that you just created! Make sure the pen is down (click on if you aren't sure), then click on and you should see output like this:
    
    
14. That's nice, but it would be a real nuisance to draw n-gons with any number of sides with code like this. You can edit the block by control-clicking on it and selecting "edit..."
    Under the Control (orange) palette, there is the block. Change the 10 to a 4 and edit the block to make your code more compact, like this:
    
    
    
    
15. OK, that's even nicer, but it can only do squares. What if we wanted to draw a regular polygon with an arbitrary number of sides? This is where we create a procedure to do our work for us.
    
    You can change the name of a block by clicking on the block's name and entering new text. In the blocks editor, where it says , click on the word "square" and replace it with "polygon". Then click OK.
    
    
    
    
16. Then click "Apply" in the Block Editor. Apply saves your work, but leaves you in the block editor to make more changes.
    
    You may notice that the block in the Pen palette now appears as the block.
    
    
17. Because this is a polygon and can have any number of sides, we will now create a parameter to receive an input, called an argument, that will determine the number of sides. Mouse over the "+" icon to the right of the word "polygon" and click on it.
    
    
    
    
18. Call the parameter "sides" (without the quotes) since it will be used to determine the number of sides of the polygon. Note that a great thing about variables in programming is that they are usually much more descriptive than "x" or "y" so the semantics have context and clarity.
    
    
    
    
19. Notice how the polygon block now has a parameter. To use the parameter, you will drag and drop it into input areas where appropriate.
    
    
    
    
20. Make the polygon block draw a polygon with sides. You will find the division operator () in the Operators palette (light green) helpful. (You cannot type arithmetic operators into the number fields. You must use appropriate operator blocks.
    
    
    
    When you are done, the polygon block should contain code that looks like this:
    
    
    
    
21. Click OK to save your work, then test it by putting together the following code in the main script area. By passing the argument 6 into the parameter , a hexagon should be drawn. The blocks that you have not used yet can be found in the related color-coded palettes. The block is new; there is a flag that can be clicked above the program output area that will run the code. (Or you can just click on the script.)
    
    
    
    
    

Explore! Can you make a block that does this?