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 Italian flag. And it's made up of three vertical bands in the colors green, white, and red. The Wikipedia page Flag of Italy tells us that the proportion of the Italian flag is 2:3. The flag is 2 units high and 3 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 width of a band is half its height.

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

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

The band should be twice as high as it is wide. But of course the Italian flag does not contain any black 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:

• green (RGB: 0, 140, 69)
• white (RGB: 244, 245, 240)
• red (RGB: 205, 33, 42)

Let's define some constants for them.

Note that neither of the three colors is predefined in the pytamaro library. The libray defines green as rgb_color(0, 255, 0), white as rgb_color(255, 255, 255), and red as rgb_color(255, 0, 0). The colors of the Italian flag are a bit different, so we have to create them ourselves.

Compose the Flag

You can now implement the italian_flag function by creating three bands and placing them beside each other. Use the given italian_green, italian_white, and italian_red colors.

Did you manage to put three graphics beside each other?

The beside function takes two parameters. But you can call beside twice: once to put two bands next to each other, and a second time to put the result next to 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 italian_flag function in the code cell above: if you wrote something like beside(green_band, beside(white_band, red_band)), now write something like beside(beside(green_band, white_band), red_band), or vice versa.

It should look the same. That's because the beside 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 Italian flag.

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

You also learned that the beside 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.