How to Draw the Kenyan 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: Malawi

I transcribed most of the Kenyan flag from the SVG file found on it’s Wikipedia entry, which contains a nice set of minimal bezier curves for the shield and spear emblem. I’ll explain some of the the tricks used here.

The SVG file starts with a header which contains this:

viewBox=”-120 -80 240 160″

This means the flag is being drawn in a 240 x 160 space, in which 0,0 is the exact center of the flag.

To duplicate this, I used a Matrix transform which gets me into this space, regardless of the actual dimensions I actually chose to draw the flag in.

pushMatrix();
  translate(width/2, height/2);  // translate to center
  scale(width/240.0);            // change scale to match SVG file
  // draw flag bezier curves here
popMatrix();

The SVG file contains a few paths, such as this one, which is used to draw a spear shape. These paths consist of straight line segments, and bezier curves.

This is what the spear path looks like, transcribed by hand into Processing:

void drawSpear()
{
  pushMatrix();
  rotate(radians(30));
  beginShape();
    vertex(-1, 55.4256);
    vertex(1,55.4256);
    vertex(1,-38);
    bezierVertex(3,-40, 3,-43, 3,-46);
    bezierVertex(3,-48, 3,-56, 0,-64.6632);
    bezierVertex(-3,-56, -3,-48, -3,-46);
    bezierVertex(-3,-43, -3,-40, -1,-38);
  endShape(CLOSE); 
  popMatrix();
}

The initial rotation of 30 degrees matches the rotation transform in the SVG path.

You can learn about what the different codes in the SVG mean, as I did, by reading the SVG path spec.

The directives used in the spear path are

M Move
h Horizontal line
c Bezier Curve
z Close path

Upper case letters indicate absolute coordinates. Lower case letters are relative coordinates.

The SVG path contains a couple of numbers which are specified extremely accurately (e.g. 55.4256258422040733928782829281879157421699), evidence that the file was produced either by a computer or by Mr Spock. Bear in mind that if this were drawn at 2400 resolution, a single pixel would only by .1 unit wide. So I’ve trimmed those numbers to 4 decimal points, which is still needlessly accurate, but not insanely so.

Tags: advanced, flag, intermediate, symmetry