How To Draw the French Flag

This is one a series of posts on how to draw world flags. Finding the specifications for these flags, and attempting to reproduce the flag perfectly, according to the specifications, is a great way to teach yourself basic graphics programming. I’m going to start with the French flag, which isn’t the simplest flag, but pretty close to it. Eventually, I’ll work up to more complex flags, like South Korea and Australia.

Like many flags, you’ll find a reasonably detailed description of the layout of the French Flag in its Wikipedia article. Here’s the sketch I came up with after reading that article:

The three main issues you have to get right with this flag are:

• Its overall shape, or aspect ratio.
• The width of the stripes.
• The colors of the stripes.

This is a good time for you to go through the same exercise – try coming up with a Processing sketch that closely fits the description of the flag. Then read on!

According to Wikipedia, the flag is 50 percent wider than its height (i.e. in the proportion 2:3) and, except in the French navy, has stripes of equal width. Like many countries, the flag specification has undergone revisions over time, and different versions of the flag are used by different parts of the French government. In these articles, I will try to choose the specification that best represents the flag most commonly seen, and in this case that’s the 2:3 flag with three equal stripes.

In order to achieve an aspect ratio of 2:3, I’m using a fixed value for the height, and than computing a width which has the correct aspect ratio:

int kHeight = 300;
size(kHeight*3/2, kHeight);

I could have just as easily have done it by specifying the width, like so:

int kWidth = 450;
size(kWidth, kWidth*2/3);

Its worth noting here that width and sizes in Processing are integers. This means it’s possible to get slightly off if you choose a bad initial height or width. By using a height of 300, I get a width of 450. But if I had used 301, the width would be computed as 451.5 which would get rounded down to 451, and our aspect ratio would be slightly off. The way I’ve done it, only even numbers work for the height.

If you use an even number, you’ll get a flag width that’s an exact multiple of 3. That’s good, because we want the width of the stripes to be exactly 1/3 of the width.

float stripeWidth = width/3.0;

Width is an integer. I specified 3.0 (a floating point value), rather than 3 (an integer), so that I get a floating result, even if the width were not a multiple of 3. In Processing, When you divide two integers, you get an integer result which can loses precision. For example 299/3 would compute as 99, and not 99.66666…

When you use both an integer and a float in an arithmetic operation the result is a float. That’s why I used 3.0 instead of 3.

This loss of precision with integer divides is a feature of strongly typed languages, like Java, Processing and C. Weakly typed languages, like Perl and Javascript, don’t have this problem, and it is safe to just say width/3. It can be confusing when you program in Processing.JS, because you have to switch back and forth between weak and strong typing as you switch from Javascript to Java syntax.

Having computed the stripe width, I go on to draw the stripes.

fill(blueColor);
rect(0,0, stripeWidth, height);

fill(whiteColor);
rect(stripeWidth,0, stripeWidth, height);

fill(redColor);
rect(stripeWidth*2,0, stripeWidth, height);

Finally, there is color choice. Here you will sometimes have to make an aesthetic choice. Most governments specify Pantone colors or a similar color system for their flags. These colors are for pigments, not light, and they don’t have exact RGB equivalents. There are websites you can find that will list RGB equivalents for Pantone colors, and that’s what I’m typically using, but these websites can disagree with each other.

Some governments (such as the United States) recommend using very bright RGB colors for their flags, when displayed on monitors, for example #F00 for red, and #00F for blue. These colors are highly saturated, and don’t look as good as good to me as the Pantone colors they recommend for printed and cloth flags. In those cases, I prefer to find a Pantone equivalent and use it.

In the case of the French flag, however, the RGB colors listed in Wikipedia aren’t overly saturated, so I’ve used them.

color blueColor = color(0,85,164);
color whiteColor = color(255,255,255);
color redColor = color(250,60,50);

And so we finish our first flag! As an exercise, try drawing the Italian flag (using its Wikipedia article).

Next: Italy

Tags: beginner, easy, flag