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