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 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.
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 of the flag are specified using the RGB color model as follows:
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.
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.
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.
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.
This activity has been created by LuCE Research Lab and is licensed under CC BY-SA 4.0.
Italian Flag
PyTamaro is a project created by the Lugano Computing Education Research Lab at the Software Institute of USI
Privacy Policy ⢠Platform Version 1cd5229 (Tue, 05 Nov 2024 16:55:57 GMT)