How to Draw the Canadian 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.

Previously: USA

There are two ways to produce a Canadian flag (or any complicated flag) in Processing: The easy way, and the incredibly hard way. Of course I chose the latter, but let’s start with the easy way:

If you’re a noob (or simply not a masochist), then what you want to do is grab an SVG of the flag (or maybe just grab a maple leaf). Here’s one from Wikipedia. Drop that in the data folder of your sketch, and then paste in the following code.

size(400,200);
smooth();
PShape s = loadShape("Flag_of_Canada.svg");
shape(s,0,0,width,height);

That’s it! Pretty simple, no? If you’re not a masochist, read no further.

Now, on to the pain…

I’m not thrilled with using SVG files to produce drawings in Processing. It makes it hard to do things like change colors, or mess with other internal elements of the drawing.

But I had a feeling the Canadian flag was going to be a pain-in-the-ass, and it was (although it is significantly simpler than the Flag of Mexico!). The advanced (non-SVG) sketch I eventually produced is this one:

The problem here, obviously, is the maple leaf. The specification on Wikipedia, and many other websites has a lot to say about how the current 11-point maple leaf was designed in the 1960s by Jacques Saint-Cyr. What I wasn’t able to find, on Wikipedia or elsewhere, was a clear mathematical specification of how the maple leaf is constructed. Saint-Cyr wasn’t using a computer, back in the 60s, so the specification is going to be a reproduction of his design, and not a handy-dandy list of bezier control points.

There are a few SVG files floating around, but they disagree with each other. Even the image of the flag on the Wikipedia article is slightly different than the outline shown in the construction sheet in the same article. When the flags produced by these two files are overlaid, you can see how they differ:

So, given this problem, how does one produce a reasonably accurate flag?

1) I can request the correct government documents from Canada, and then measure the flag accurately with calipers, and produce a set of coordinates.

2) I can scan an accurate photo (from said Government agency) and then use raster->vector software to produce an outline.

3) I can do what I actually did:

I loaded the construction SVG from the Wikipedia article into a text editor, and found the part that corresponds to the maple leaf. It looks like this:

M319.545 66.4328
c2.21745,4.11855 6.18992,3.73644 10.163,1.43603
l14.1468 -7.61688 -10.5437 58.2068
c-2.21745,10.6339 4.89676,10.6339 8.40737,6.03609
etc...

I then wrote a Perl script that systematically translated these numbers into a list of vertex() and bezierVertex() commands, reading the relevant parts of the SVG path specification to understand what I was looking at.

(Note: There’s a more elegant way to convert SVGs and fonts to Processing commands with the Geomerative library which I’ll cover in a future post).

  vertex(319.545,66.4328);
  bezierVertex(321.762450,70.551350,325.734920,70.169240,329.708000,67.868830);
  vertex(343.8548,60.25195);
  vertex(333.3111,118.45875);
  bezierVertex(331.093650,129.092650,338.207860,129.092650,341.718470,124.494840);
  // etc...

It won’t surprise me if it turns out someone has already made a utility to convert SVG files to raw processing code, although I suspect most folks are happy with the loadShape() function, which already exists. At any rate, I didn’t see any obvious tools, so I wrote a quick & dirty one.

These Perl-generated vertex commands (which assume a flag height of 300) appear in my sketch. To get the leaf to scale properly, if the height is changed, I precede these commands with a scale command:

scale(height/300.0);

If you’re drawing a flag at 300, great! You get 1:1, but you can also draw the flag at 200 or 400 and it will scale to the correct ratio.

The next flag will be South Korea, which is a walk in the park, compared to Canada. I intend to postpone Mexico, for the time being.