Page 4: Modify Your Pinwheel

Unit 1, Lab 3, Page 4

On this page, you will modify your existing pinwheel block so that you can use it to draw a variety of shapes.
assortment of pinwheels

Adding Multiple Inputs

Recall how you first generalized your original pinwheel script: you added an input called number of branches that controlled the turning angle of the sprite. By adding more inputs, you can generalize other aspects of your program.

  1. If it isn’t already open, open your U1L3-Pinwheel project.

  2. Experiment with the input for the second move block inside your pinwheel block as shown below.

  1. Talk with Your Partner First predict. What do you think will happen?
  2. pinwheel block definition with comment asking students to experiment with the input for the second move block

  3. Then try several inputs between -100 and 0.
  4. Talk with Your Partner What happened? How does it compare to what you predicted? How does this input value impact the sprite’s behavior? How does it impact the resulting image on the stage? What number input number gives an asterisk? What input number gives a polygon?
    Animation cycle from Asterisk to Polygon

Review how to add an input at Unit 1 Lab 3 Page 3: Blocks with Input, if needed.

  1. Add a second input to control the amount of “backing up” that the sprite does before each turn through the full 360°.
  1. Edit your pinwheel block, then click the “+” sign at the end to add an input label (choose “Title text”). Type backup: as shown below, and click “OK”.
  2. Then click the “+” sign at the end again to add an input (choose “Input name”), and call it backup.
  3. Drag off the new backup input, place it where it belongs in the pinwheel code, and press “OK” or “Apply.”
  4. Check that changing the backup input value when running the pinwheel block gives the correct result. Debug any problems.

Use an Operator block.

  1. Change the pinwheel script so that it will accept a positive value (between 0 and 100) for backup, and test it with a variety of inputs.

The procedure definition for the custom pinwheel command
pinwheel, branches: (number of branches)
{
repeat(number of branches)
{
move (100) steps
move (-37) steps
turn clockwise (360 / number of branches) degrees
}
}
would be written as

PROCEDURE pinwheel(numberOfBranches)
{
REPEAT numberOfBranches TIMES
{
move(100)
move(-37)
turn_clockwise(360 / numberOfBranches)
}
}

or PROCEDURE pinwheel(numberOfBranches)
{
REPEAT numberOfBranches TIMES
{
move (100)
move (-37)
turn_clockwise (360 / numberOfBranches)
}
}

The procedures

move()

and

turn_clockwise()

aren’t built in to the AP’s language so they are written in lower case like other programmer-defined procedures.

Notice that the hat block, pinwheel, branches: (number of branches), would be written as

PROCEDURE pinwheel(numberOfBranches)

. The word

PROCEDURE

tells you that that line of the code is like a hat block; the variable name in the parentheses on that line is the input that the procedure takes.

Pair Programming Swap

  1. Add another input called size to control the input to the first move block.
    pinwheel, branches: (number of branches) size: (size) backup: (backup) hat block

  2. Try out a variety of inputs to your pinwheel program.

  1. Talk with Your Partner Discuss what input values will give you a polygon or an asterisk. Save your work
    polygon asterisk

Debugging Tip: Organizing Your Code

One way to avoid having bugs in your program in the first place is to keep your code organized by deleting any unused scripts. You can use the clean up option by right-clicking (or control-clicking on a Mac) in the scripting area to organize your blocks. You can remove a block or script either by dragging it out of the scripting area and back to the palettes on the left or by choosing the “delete” option from the drop-down menu. Click here for a video. (Note that this is different from the “delete block definition” option which will permanently delete a custom block and all its instances from your entire project.)

Animation about deleting blocks by dragging them off to the palette or by choosing the delete option by right-clicking.

  1. Tidy up the code in your project, if necessary.

This instruction setup; pinwheel, branches: (6) size: (80) backup: (20) would be written as

Pinwheel(6, 80, 20)

or a white rounded rectangle containing first the word 'PINWHEEL' in all caps and then a smaller white rectangle containing the inputs '6, 80, 20'.

You may hear people use the term “pseudocode” to refer to this pseudo-language used on the AP CS Principles exam, but it’s not pseudocode. Pseudocode isn’t a programming language at all, it’s the use of normal human language to describe an algorithm.

  1. Find inputs to pinwheel that make the result look like a circle.

Snap! drawing in the style of Kandinsky: overlapping circles of various colors on a black background; some circles are filled in with a solid color, some are filled in with a translucent color, others are just the outline of a circle with various outline thickness       another Snap! drawing in the style of Kandinsky       another Snap! drawing in the style of Kandinsky       another Snap! drawing in the style of Kandinsky

Painting by Kandinsky: overlapping circles of various colors on a black background; some circles are filled in with a solid color, some are filled in with a translucent color, others are just the outline of a circle with various outline thickness, some filled circles have a border of a different color; the black background has some variations in darkness

  1. On the right is a painting by Vassily Kandinsky. The four pictures above were inspired by it, but the sizes and placement of the circles in the original were carefully chosen, whereas the ones above are random. Also, Kandinsky’s solid circles aren’t quite uniform in color. For example, the green circle near the top right of the picture has a light green outer border, a somewhat darker green inside, a blue-green inner border, and black inside that.

    When two solid circles overlap, you can see both colors, or rather, a color in between the two. To achieve that effect in Snap!, before drawing the second circle, use the set pen (transparency) to () block. A transparency of 0 means you see only the new color; a transparency of 100 means you see only the old color. In-between values determine which color is stronger in the overlapping area.

    Most of Kandinsky’s circles are solid, but a few aren’t. most notably the large white “halo” near the middle of the painting. His hollow circles don’t have a constant width; if you want yours to look like his, change the pen size a little as you’re drawing. But of course you don’t have to make your art look exactly like his, nor exactly like the examples above. Use them for inspiration, but you’re the artist.

  2. Make a picture that looks more like a real pinwheel:

    Photograph of a real pinwheel with four spokes. The pinwheel is red with a green stem and has a silver tack in the middle attaching the pinwheel to the stem.
    Copyright 2010 Victoria Hudgins. Used by permission.

    (Save your project first; you’ll need the pinwheel block you already have later.)

    It doesn’t have to look exactly like the photo. But each arm of a pinwheel is essentially two triangles. You may find the fill block block helpful.