Brick Wall

Humpty Dumpty on brick wall

In this project, you will use abstraction to draw a brick wall.

Sample image of brick wall


Any good programming language might have many tools for drawing and moving, but it wouldn't make sense to have special tools for drawing bricks because most programs don't involve bricks. That's the sort of tool you make yourself when you need it.

Creating a special drawBrick length:() width:() block block lets you use procedure names related to the problem you are solving (like draw brick), rather than the general-purpose procedures (like move) that the computer uses for all kinds of tasks.

Drawing One Brick

A picture of a brick is just a rectangle with a brick red color. However, there's no draw rectangle block in snap. One way to draw one is by thinking of a rectangle as a very thick line. Here's the idea:
draw brick, length:() width:() block definition

The set flat line ends to < > block isn't built into Snap!. In projects without it, you can set the "Flat line ends" in the Settings menu.

Ordinarily, Snap! draws thick lines with rounded ends: line with round ends. That's often the best choice, and you can see why below. But for bricks, we want flat line ends: flat line ends.

Square with flat line ends versus square with round line ends
flat vs. rounded line ends

  1. Click here to load this file. Then save it to your Snap! account.
    It includes the complete draw brick block shown below. Read the code; then try it out.
    draw brick, length:() width:() block definition

Using Problem Decomposition

You'd like the "top level" block to be something like this:
Getting there involves problem decomposition: breaking the problem into smaller pieces.

There are two kinds of rows, so we make blocks that specialize in each:

  1. Use draw brick to make blocks Row A and Row B.
  2. The two kinds of rows should be exactly the same length. Your first try at drawing Row B is probably a little too long. Debug it.
    • Should Row B have different-size bricks, different-size gaps, or just different-size bricks on the end?
    • If you're not sure, try all the possibilities and see which looks right in the finished wall.
    • Or think "What would make the most sense in a real brick wall?"

Once you have rows A and B the same length, you are ready to write the draw-brick-wall-7 block.

  1. Import your even? block and use it to write the draw-brick-wall-7 block. Read the Debugging Dependencies section below and test your new block to make sure it works properly.

    Debugging Dependencies

    even? (number) block definition with Obsolete! block

    You created your even? block using another custom block, divisible by?. You must export both blocks in order for even? to work properly when you import it into your Brick Wall project.

    If you ever see this red Obsolete! block in code you have imported, it means that a required block was not exported. You'll want to go back to the original project and export again being sure to select all of the blocks needed by your custom blocks.

  2. Now Is a Good Time to Save
  1. Use your brick wall in another project by exporting and importing your brick wall blocks.
  1. Add more inputs to draw Brick Wall (and as needed to row A and row B) for:
    1. Number of bricks per row
    2. length and width of a brick
    3. Gap thickness
    draw a Brick Wall with (8) Rows with Bricks per Row: (7) of Brick Length: (40) Width: (20) Gap Thickness: (5)
    Add these one at a time, not all at once! When you modify the length of a brick, that should also change the length of a row B end brick. When you modify the gap thickness, that should also change the distance between the rows.