French Flag

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 French flag. And it's made up of three vertical bands in the colors blue, white, and red. The Wikipedia page Flag of France tells us that the proportion of the French 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 French 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:

• blue (RGB: 0, 85, 164)
• white (RGB: 255, 255, 255)
• red (RGB: 239, 65, 53)

Let's define some constants for them.

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

Compose the Flag

You can now implement the french_flag function by creating three bands and placing them beside each other. Use the given french_blue and french_red colors, as well as the imported white color to build the french flag.

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 french_flag function in the code cell above: if you wrote something like beside(blue_band, beside(white_band, red_band)), now write something like beside(beside(blue_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 French 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.