Japanese Flag

The goal of this activity is to build a Japanese flag:

Did you say something like "a Japanese flag"? Nice! But what if your friend had never seen a Japanese flag before? They wouldn't know what to draw.

So let's use a more descriptive description: "A red circle overlaid on a white rectangle".

By the way: Did you know that the red circle represents the sun?

The Background

Let's start by creating the white rectangular background. Use the PyTamaro rectangle function. The width of the flag should measure 3/2 times its height, and we would like the height to be 300.

Arithmetic Expressions

Did you just scream at your computer? Something like the following?

WHAT!?! You're asking me to calculate 3/2 of 300?!? I thought we were programming, not doing mental arithmetic!!!

If that kind of thought came to your mind, congratulations! You do not need to do arithmetic in your head. You can tell the computer to do it for you!

How? You can ask it to compute 3/2 by writing 3 / 2. The / is a division operator in Python.

Ok, ok. But what about multiplying by the height?

Good question. Python has a multiplication operator, *. This is different from math, where you often can leave out the multiplication operator, or where you might use operators like × or ⋅.

Ok, so should I write 300 * 3 / 2?

Almost. In the code cell below, where you will have to write your expression, line 3 already assigns the value 300 to the name height. Given that we have a name to represent the desired height of the flag, it's much better to use that name in your expression: height * 3 / 2.

This way, there is a single place in your program (line 3 where you define height), where you can change the height of your flag. The rest of the program should refer to the name height and should not use the literal value 300.

Let's Build It!

So, let's implement the code to construct the background:

Complete the above code and run it. Do you see the output? The white rectangle? It might be hard to notice on the light background. If you hover the mouse over the output area, the graphic is placed on top of a grey checkerboard background, which makes it stand out a bit more.

The Sun

Let's now create a graphic for the sun. Use the PyTamaro ellipse function. The diameter of the sun should be 3/5 times the height of the flag.

Using Names

The code cell above already defined the name height (to represent the height of the flag). You can simply use that name in your code below. Why does that work? Well, the code cells on a page are linked together: they form one "bigger" piece of code.

Whenever you run a code cell with its "RUN" button, all the cells above it are run as well. This means that any names you defined in code cells above are known in code cells below!

So, in your code below, simply use the name height when you need to refer to the height of the flag.

Let the Sun Shine!

Now complete the code cell below.

Use the given japanese_flag_red color for the sun's color. This color is generated with the PyTamaro rgb_color function.

Use the ellipse function, which expects three arguments: the width, the height, and the color. The sun is circular, so the width and height of the sun ellipse are the same.

When we program, we usually first ask whether our code worked. Did it work? Do you see the red circle?

But immediately after, we ask whether our code is well written, whether it is easy to read and understand. One thing to avoid in code is to write the same piece of code multiple times. In your code, did you write the expression that computes the diameter given the height just once? Or did you write it twice? If you wrote it twice, your code is not ideal. You don't get full points for readability.

One way to improve the code is to write the expression height * 3 / 5 once, and to assign its value to a name, say, diameter:

diameter = height * 3 / 5

Then you can use the name diameter as the argument in the call of the ellipse function.

Code Cells are Linked

Most activity pages on this web site contain more than one code cell. An activity interleaves explanations with pieces of code you can (and often have to) edit.

The answer to both questions is "yes"! If you import a name in a code cell (e.g., the name show_graphic), you can then use the imported name in subsequent code cells on that page. In fact, the second code cell uses the name show_graphic, and it does not import it, because it already was imported in the first code cell. Also, if you define a name in a code cell (e.g., the name height), you can then use the defined name in subsequent code cells. That's what the code you wrote to create the sun did: it just used height, because it was already defined in the code cell above. Really, we concatenate all code cells on a page into one big piece of code.

You got it. The lines of code throughout a page are numbered consecutively. They are executed from top to bottom. And if there is any error when running your code, the line number in the error message tells you which line to look at (the error might happen in a code cell that's higher up than the one you run).

The Flag

Let's put together the background and the sun created by you into the final result: the flag. Use the PyTamaro overlay function. This function takes the graphic that goes at the top as the first argument, and the graphic that goes at the bottom as the second argument.

Did you notice how the red circle is centered on the white rectangle? Did you expect that to happen? If you read the documentation of the overlay function (hover over it here, or above the code cell that imports it), you can see that it states "the two graphics are overlaid on their centers". Good documentation tells you precisely what calling a function will do. It's always a good idea to read the documentation and not just to blindly rely on a function you import to do what you expect.

What You Learned

You just composed two graphics into a more complex graphic. You did this using the overlay function. Besides overlay, the PyTamaro library also provides other functions to compose graphics. Graphic composition using overlay and those other functions is one of the fundamental ideas of PyTamaro.

But you learn more than just how to compose two graphics! You practiced how to call functions, how to assign the result of a function call to a name (like background, sun, and flag), and how to pass values to a function (e.g., when calling rectangle, or ellipse, and also when calling overlay).

You also learned how to compose expressions using arithmetic operators, like multiply (*) and divide (/). And you learned that you can compute a value (such as the result of height * 3 / 5) and assign that value to a name, so you don't need to write the same expression twice. The absence of "code clones" (similar or identical pieces of code that appear multiple times) is one of the key indicators that the code was written by a good programmer.