In this activity you will learn how to compose more than two graphics.

Asking for a Graphic

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

Yes, it's the German flag. And it's made up of three horizontal bands in the colors black, red, and "gold". Yes, the Germans call this "Gold" ("gold"), not "gelb" ("yellow"). The Wikipedia page Flag of Germany tells us that the proportion of the German flag is 3:5. The flag is 3 units high and 5 units wide.

The Bands

We will need three bands. While each band has a different color, they have something in common: they all have the same size. The height of a band is a fifth of its width.

So let's write a function to draw a band. Our function will only require the minimum information necessary to create a band: the width and the color. The height can be automatically computed from the given width.

Let's implement this band function, and let's test it by producing a small green band:

The band should be five times as wide as it is high. But of course the German flag does not contain any green color. Let's figure out which exact colors it uses.

The Colors

The colors of the flag are specified using the RGB color model as follows:

• black (RGB: 0, 0, 0)
• red (RGB: 255, 0, 0)
• gold (RGB: 255, 204, 0)

Let's define some constants for them.

Oh! Did you notice that the black is a pure black (the red, green, and blue lamps are all at their minimum intensity, 0)? The pytamaro library already provides a name for a pure black color: black. Thus, we don't need to create that color and can just use the one provided by importing black.

Also, the red color is pure red (the red lamp is fully on, with an intensity of 255, the green and blue lamps are off). Pure red is already available from pytamaro under the name red. So let's import that.

Compose the Flag

You can now implement the german_flag function by creating three bands and placing them above each other. Use the given gold color as well as the imported black and red colors to build the German flag.

Did you manage to put three graphics above each other?

The above function takes two parameters. But you can call above twice: once to put two bands above each other, and a second time to put the result above the third band.

Associativity Provides Freedom of Expression

The answer is yes. The two expressions evaluate to the same value: 6. There's a fancy word for this: the addition operator for numbers is associative.

Let's check whether you were right. Modify your german_flag function in the code cell above: if you wrote something like above(black_band, above(red_band, gold_band)), now write something like above(above(black_band, red_band), gold_band), or vice versa.

It should look the same. That's because the above function for graphics is associative, in the same way that the addition operator for numbers is associative.

What You Learned

You now know a bit more about the German flag.

But more importantly, you learned how to compose more than two graphics even though the composition function (above) only can compose two graphics. How did you do this? By nesting multiple calls of the function!

You also learned that the above function is associative. You will later see other functions with that neat property. This gives you some flexibility in how to write your solution: like so often in programming, there are multiple ways to express a computation. You can change your code from one way to the other based on the way you find easier to understand. This is called refactoring, changing code without changing what it computes.