At My Fingertips

In this activity you learn how to compose graphics by placing them beside each other.

Asking for a Graphic

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

hammer

Did you say "a hammer"? Not bad!

But what if your friend is an alien and has never seen a hammer? Can you describe it by using primitive graphics (like rectangles) and by describing how they are composed into a more complex graphic?

Producing the Colors

The hammer is made up of two rectangles. The rectangles differ in color. Let's create (and name) nice "hammer" colors: a beige and an anthracite grey.

Loading...

Run the code cell. It won't produce any output. But it defines the names beige and anthracite, so you can use them in the code cells below.

Producing and Composing the Pieces

A hammer consists of a handle and a head. The handle is beige and has a width of 300 and a height of 50. The head is anthracite grey and has a width of 80 and a height of 200.

Complete the code below (replace all the ...) to create the handle and the head, and to compose them into a hammer using the function beside.

You already created the two colors and gave them meaningful names. Use those names here to specify the colors of the rectangles.

Loading...

Refactoring

You should have a working solution in the code cell above. However, let's see whether we can refactor that solution into a different style.

Try to compose and show a hammer graphic in one single statement: a call to show_graphic(...), which, as its argument, contains a call to beside(...), which, as its two arguments, contains calls to rectangle(...), which, as their last arguments, contain calls to rgb_color(...).

Look at the code cells above to find the correct widths and heights of the rectangles, and the red, green, and blue intensities of the colors. Do not use any of the names we defined above. Create everything anew, from scratch.

Loading...

You should have gotten the exact same output from this call of show_graphic as you got from the call in the prior code cell. Refactoring code means to change it without changing what it does. You refactor code to make it more readable for humans.

However, code written in this extremely parsimonious naming style, where no names are introduced at all, and your entire program is stuffed into one single statement, is not particularly readable. We recommend you find a good middle ground: you don't necessarily introduce a name for absolutely everyhting, but you also don't completely avoid names either.

What You Learned

You learned about the beside function, which composes two graphics such that the first one is on the left, the second one on the right, and they are vertically centered.

You also saw how to name each component (handle and head) of a composite graphic (the hammer). And you saw that the same goal can often be achieved in multiple ways, but that not all ways are equally understandable.


This activity has been created by LuCE Research Lab and is licensed under CC BY-SA 4.0.

Hammer

Logo of PyTamaro

PyTamaro is a project created by the Lugano Computing Education Research Lab at the Software Institute of USI

Privacy Policy • Platform Version b744b47 (Tue, 08 Oct 2024 16:30:14 GMT)