5.1 Repetition

As we have progressed through the semester, our programs have grown quite quickly. Several of your programs have probably exceeded the size of the Blockly environment. A lot of the time, there's no reason our programs should be as long as they are; We end up having A LOT of repeated blocks in our programs. Many of you probably hit a point where you were wishing there was some way to get around this issue in our programs, and luckily there is! Using loops, we can take that duplication and reduce it to just one set of blocks.

5.2 - Repeat Loops

The most basic type of loops are called repeat loops. These types of loops use the block. This block has a field which allows us to slot in a number, and a location where we can drop in some other blocks. All the repeat block is going to do is execute the blocks contained within the number of times specified on the block.

Even though these types of loops are the most basic, even these loops would have reduced the number of lines of code we needed for a lot of out programs. For example, the very simple squares we have been drawing can now be written in 5 total blocks, instead of 10:

Both of these programs produce the same result. The program on the right (the one with the loop) was probably quicker to write due to the reduced number of blocks. There is another benefit, however. With the code on the left, changing the shape requires some major modifications of the code. For example, changing the code to draw a triangle requires removing 2 blocks and updating several values. The code on the left, however, requires just updating 2 values to change the shape drawn.

Keep in mind that the number slot in the repeat loop can be a variable, or a mathematical expression. Doing so can result in some really interesting drawings and programs.

5.3 - Count Loop

Another type of loop we can use is called a count loop inside of blockly. You will occasionally see this referred to as a for loop, since it is logically equivalent to a for loop in other programming languages. The block for this type of loop can appear very intimidating at first, but once you understand all of the pieces you will be amazed at how powerful your programs can become.

The first major input you will see on this block is a dropdown box which provides you with access to all variables created within your program. By default, this forces a new variable to be created, called i. For now, we will leave this alone. You will see later in this section how and why you might change this dropdown value. The major thing to consider is that blockly is going to count through the loop, storing its value inside of the variable specified.

This is followed by 3 slots for storing numbers. The first slot is the value the loop will start counting from. This is the first value the loop will use. The second number is the value that the loop will end at. The last value is the amount the loop will increment by.

To clarify, lets look at the values that will be output by the loop:

Output
      0
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

This loop executes the inside code a total of 11 times. In that sense, it is equivalent to the repeat loop. A slight change, however, results in

Output
      0
      2
      4
      6
      8
      10

This loop executes the inside code a total of 6 times. Notice that the loop variable increases by 2 every time through the loop. This modifies how many times the loop executes.

You would likely never use this type of loop if you just wanted something to execute a fixed number of times. You would use this loop if you wanted to modify some behaviour of the loop. Instead of doing exactly the same thing every time through the loop, we can change what occurs.

Execises

  1. Create a blockly program which will draw an octagon as shown below. Make sure you use appropriate variables, and use the repeat loop!

  2. Create a blockly program which will draw an orange, jagged lightning bolt. You should use the count loop here!