ST EK List:
1.3.1D Digital effects and animations can be created by using existing software or modified software that includes functionality to implement the effects and animations.
4.1.1I Developing a new algorithm to solve a problem can yield insight into the problem.
LO 5.4.1
5.4.1B Duplicated code can make it harder to reason about a program.
5.4.1H Visual displays (or different modalities) of program state can help in finding errors. (with visible stepping)

Fractal Art

In this project, you will nest repeat blocks inside repeat blocks to generate complex pictures.

I find it odd that we have two images from the TIF in this pink box. Why not use this? --MF, 3/21/18
Red triangle with blue children and green grandchildren
ST- The image proposed is identical to what we have in FYTD#7 and in the two debugging videos. The animations in the pink box are not the same as in the TIF. The TIF versions involve an animated parameter guiding the changing rotations of the smaller versions of the polygons. Whereas the pink box versions do not have any changing rotations. So I would vote against the change.

My concern is that these images don't look like what the students so on this page. They don't make these images. Right? We don't have to resolve this now though. We can leave this for later. :) --MF, 3/22/18
ST-They actually do. Aside from the color and orientation, these are exactly what the kids work on this page.

Recursive triangle in steps Recursive square in steps

repeat (3) {set pen color to (red); move (100) steps; repeat (3) {set pen color to (blue); move (100) steps; turn clockwise (120) degrees}; turn right (120) degrees}

ST 3/7/18- Brian says:In the script picture just under the pink box, shouldn't the left caption say "with three blue triangles"?

Also, why is this here? Shouldn't this appear later on the page? It's a great image, but it's out of context here. --MF, 3/21/18

  1. "U2L4-FractalArt"Create a new project called U2L4-FractalArt
  2. Build a script that draws a red triangle, duplicate it twice, and make the two new scripts draw a blue triangle half the size of the red and green one half the size of the blue.
    • To duplicate a script, right-click (or control-click) on the first block of the script (in this case, the repeat block) and choose "duplicate".
    • Then, change the inputs as the video shows:
    duplicating a script
  3. Try each script by itself to be certain what it does. Then clear the stage.
  4. Now, insert the entire script for the blue triangle between the move and turn blocks of the red triangle, like this.
    embedding the blue triangle in the red triangle Pair Programming Swap
  5. Talk with Your Partner Predict what will happen when you run this script.
  6. Then, it to see what it does.

Debugging with Visible Stepping

Snap! has a debugging tool called Visible Stepping that allows you to control how quickly Snap! steps through the blocks of your code. This lets you see the effect of each block one-by-one to help you understand any errors in your code.

After clicking the Visible Stepping button (Visible Stepping button with two footprints), you can adjust the slider to control the stepping speed. The sprite executes the each step of the code as it is highlighted in cyan.

Animation that shows how to use Visible stepping in Snap!

If you move the slider to the slowest setting (all the way to the left), the shape of the yellow Run/Pause button will change, and you can press it to single step through your code. This can help you see what happens at a specific point.

Animation that shows how to use single-step Visible stepping in Snap!
  1. Using the scripts you have, find a way to make this picture. Use Visible Stepping to help you work out any bugs.
    Red triangle with blue children and green grandchildren
  1. If you like, embed one more triangle, half the size of the last one, in the same way.
I suggest a page break here. This page is getting rather long. --MF, 3/21/18
ST-It is an asterisked page so I don't think it is worth adding a new page to an already very full lab.

Using Abstraction to Nest Triangles

Does all this copying and pasting of code feel awkward to you? You know a better way: abstraction. In Unit 1 you used a pinwheel block to implement asterisk and polygon, rather than copying the code. Here, you can use a block to manage the abstraction too, but in this case, we want very similar code (a smaller triangle) nested inside, so we will actually use the same block inside itself.

  1. Create a nested triangle block.
    1. Design the block with one input, size. For now, leave out the part about changing colors.
      nested triangle, size: (size)
    2. Use your first unnamed triangle script from problem 1 as a model. But add one condition: draw the triangle only if it's big enough:
      if(size>9){repeat(3){move 100 steps; turn clockwise 120 degrees}}
    3. Click the "Apply" button in the Block Editor so that the block appears in the palette on the left.
    4. Try out this block giving at least the inputs 9, 18, 20 and 100 to make sure it works as you expect.
  2. In problem #4, you dragged a copy of the script between the move and turn blocks. You can do a similar thing with your block.
    1. From the palette, drag a copy of that nested triangle block into the editor and insert it in the definition of nested triangle between the move and turn blocks. Make its size input half the current value of size.
      nested triangle, size: (size/2)
    2. Again try out your block with at least the inputs 9, 18, 20 and 100 to make sure it works as you expect.
      You are using nested triangle in its own definition. When a block refers to itself, the block is said to be recursive. Recursion is one of the most powerful techniques in computer science and you will learn more about it in later projects.
    3. Now Is a Good Time to Save
  3. Use nested triangle as a model to define a recursive nested square block.
  1. Try adding a color input and using set pen color to (0) instead of set pen color to (red) so that you can vary the color as you draw. In the "recursive call"—the block that is embedded inside and that has the half-size input—try adding 10 to the color. Before you try this block, use set pen color to (red) to pick a colorful color, not nearly white or nearly black. Then you can use any color number as input to your new block.
  2. Examine this code without running it:
    repeat{set pen color to (red); move(100) steps; repeat(4){set pen color to (blue); move (50) steps; turn clockwise(90) degrees}; turn clockwise(90) degrees}
    1. Predict how many blue shapes it will draw.
    2. Try to sketch what it will produce.
    3. If one more copy of the basic script were embedded inside the blue, how many copies of that shape would be drawn?
  1. Use what you know about animations to try things like this:
    Recursive Triangle Animation Recursive Square Animation