At My Fingertips
Rapid Playground
In this activity you will learn how to compose more than two graphics.
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.
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 of the flag are specified using the RGB color model as follows:
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
.
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.
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.
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.
This activity has been created by LuCE Research Lab and is licensed under CC BY-SA 4.0.
French Flag
PyTamaro is a project created by the Lugano Computing Education Research Lab at the Software Institute of USI
Privacy Policy ⢠Platform Version 3094ca3 (Tue, 03 Dec 2024 14:08:36 GMT)