Top Hat

In this activity you learn how to place a graphic above another graphic.

Asking for a Graphic

Assume you have a friend who does not see the figure below:

You might have said something like "a hat", or "a top hat". Not bad!

But how would you describe such a top hat as a composition of primitive graphics you already know?

Building the Components

Let's first construct the pieces we need for our hat: a crown (the cylindrical top) and a brim (the bottom ring). In our graphic, both pieces are rectangles.

Complete the two calls to show_graphic so each call shows one of the pieces:

You should see two graphics: a crown and a brim. But you really want a hat!

Composition

Now that we have the components, we just need to compose them. We want to place one graphic above another graphic. Luckily, there is a function for this!

You may have guessed it. The function's name is short and sweet: above. It takes two graphics as parameters.

The following code cell already includes a call of the above function. Complete the call, by replacing the ... with the names of the two graphics we want to compose:

Did you notice that the call to above(...) spanned multiple lines of code? This is ok in Python! Usually in Python each line of code contains a separate statement, like here:

crown = rectangle(100, 90, black)

However, it is ok to write the same code across multiple lines, like this:

crown = rectangle(
  100,
  90,
  black
)

The two pieces of code mean the same thing!

Different Ways to Solve the Problem

The above code is quite nice: you define a name for each graphical piece (crown, brim, top_hat), and then you use that name when needed.

However, there are often different ways to solve a problem. For example, we could assign names to fewer or to more of the components.

The following three solutions lead to the exact same output. They are written in different styles. They may be more or less readable for us humans, but the computer can understand them equally well.

"Anonymous" Style

If you wanted, you could inline everything into a single expression, like this:

For us humans, the above code might be not that easy to understand. Thus, naming at least some of the pieces may be a good idea.

"Parsimonious Naming" Style

Here is an example that gives a name to the complete top hat graphic, but that does not name the two component graphics:

This may not be too bad. But you might have to think a little to understand which rectangle represents which component of the hat.

"Lavish Naming" Style

It's usually a good idea to liberally name things. It's important, though, to pick good names. While a well chosen name increases the understandability of your code, a badly chosen name reduces the understandability of your code.

Let's name not just the composite hat, but let's name both its components (like we originally did).

Isn't this code quite nice and clear?

What You Learned

In terms of the library, you learned about the above function, which composes two graphics so the first one is placed above the second one.

In terms of programming, you learned that there are usually multiple ways to solve a problem. In this example, you saw three solutions, which differ in the way they assigned names to things. It can be helpful to give names to things. You don't need to give a name to absolutely everything, but if something is complicated enough so you'd describe it with a comment, giving it a (well chosen!) name is certainly a good idea.