{"id":451,"date":"2012-01-03T13:53:44","date_gmt":"2012-01-03T21:53:44","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=451"},"modified":"2012-01-03T15:28:27","modified_gmt":"2012-01-03T23:28:27","slug":"how-to-draw-the-kenyan-flag","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2012\/01\/how-to-draw-the-kenyan-flag\/","title":{"rendered":"How to Draw the Kenyan Flag"},"content":{"rendered":"<p>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.<\/p>\n<p>Previously: <a href=\"\/blog\/2011\/12\/how-to-draw-the-malawian-flag\/\">Malawi<\/a><\/p>\n<p><script type=\"application\/processing\">\/\/ Flag of Kenya - Jim Bumgardner\n\/\/\n\/\/ Bezier curves transcribed from http:\/\/en.wikipedia.org\/wiki\/File:Flag_of_Kenya.svg\n\nfloat kHeight = 332;\nfloat kWidth = kHeight*3\/2;\nfloat kStripeHeight = kHeight * 24 \/ 80;\nfloat kStripeGap = kHeight * 4 \/ 80;\n\nvoid setup()\n{\n  size(int(kWidth), int(kHeight));\n  smooth();\n  noLoop();\n}\n  \nvoid draw()\n{\n  float x,y;\n  \n  background( #FFFFFF );\n  noStroke();\n  fill( #000000 );\n  rect(0,0,width, kStripeHeight);\n  \/\/ red stripe not necessary at this point\n  \/\/ fill( #bb0000 );\n  \/\/ rect(0,kStripeHeight+kStripeGap,width, kStripeHeight);\n  fill( #006600 );\n  rect(0,kStripeHeight*2+kStripeGap*2,width, kStripeHeight);\n  \n  \n  pushMatrix();\n    \/\/ Switch coordinate system to match SVG file (centered, 240x160)\n    translate(width\/2, height\/2);\n    scale(width\/240.0);\n    \n    fill( #ffffff );\n    stroke(0);\n    strokeWeight(.5\/(width\/240.0));\n    pushMatrix();\n      drawSpear();\n      scale(-1,1);\n      drawSpear();\n    popMatrix();\n    noStroke();\n    \n    \/\/ Red shield and Stripe\n    fill( #bb0000 );\n    beginShape();\n      x = -120;\n      y = -24;\n      vertex(x,y);\n      y = 24; vertex(x,y);\n      x = -19; vertex(x,y);\n      bezierVertex(x+3,y+8, x+13,y+24, x+19,y+24); x += 19; y += 24;\n      bezierVertex(x+6,y, x+16,y-16,x+19,y-24); x += 19; y -= 24;\n      x = 120; vertex(x,y);\n      y = -24; vertex(x,y);\n      x = 19; vertex(x,y);\n      bezierVertex(x-3,y-8, x-13,y-24, x-19,y-24); x -= 19; y -= 24;\n      bezierVertex(x-6,y, x-16,y+16,x-19,y+24);\n    endShape(CLOSE);\n\n    \/\/ Black decoration\n    fill(0);\n    pushMatrix();\n      drawBlackDeco();\n      scale(-1,1);\n      drawBlackDeco();\n    popMatrix();\n\n    \/\/ White decoration\n    fill( #ffffff );\n\n    ellipse(0,0,4,6);\n\n    pushMatrix();\n      drawWhiteDeco();\n      scale(-1,1);\n      drawWhiteDeco();\n      scale(1,-1);\n      drawWhiteDeco();\n      scale(-1,1);\n      drawWhiteDeco();\n    popMatrix();\n\n  popMatrix();\n}\n\nvoid drawBlackDeco()\n{\n  beginShape();\n    float x = 19;\n    float y = 24;\n    vertex(x,y);\n    bezierVertex(x+3,y-8, x+5,y-16, x+5,y-24); x += 5; y -= 24;\n    bezierVertex(x,y-8,x-2,y-16,x-5,y-24); x -= 5; y -= 24;\n    bezierVertex(x-3,y+8, x-5,y+16, x-5,y+24); x -= 5; y += 24;\n    bezierVertex(x,y+8,x+2,y+16,x+5,y+24);\n  endShape(CLOSE);\n}\n\nvoid drawWhiteDeco()\n{\n  beginShape();\n    float x = 1;\n    float y = 5.85;\n    vertex(x,y);\n    bezierVertex(x,y,x+4,y+8,x+4,y+21);  x += 4; y += 21;\n    bezierVertex(x,y+13,x-4,y+21,x-4,y+21);\n  endShape();\n}\n\nvoid drawSpear()\n{\n  pushMatrix();\n  rotate(radians(30));\n  beginShape();\n    vertex(-1, 55.4256);\n    vertex(1,55.4256);\n    vertex(1,-38);\n    bezierVertex(3,-40, 3,-43, 3,-46);\n    bezierVertex(3,-48, 3,-56, 0,-64.6632);\n    bezierVertex(-3,-56, -3,-48, -3,-46);\n    bezierVertex(-3,-43, -3,-40, -1,-38);\n  endShape(CLOSE); \n  popMatrix();\n}\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=flags\/Flag_of_Kenya\">source<\/a><\/div>\n<p>I transcribed most of the Kenyan flag from the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Flag_of_Kenya\">SVG file found on it&#8217;s Wikipedia entry<\/a>, which contains a nice set of minimal bezier curves for the shield and spear emblem.  I&#8217;ll explain some of the the tricks used here.<\/p>\n<p>The SVG file starts with a header which contains this:<\/p>\n<p> viewBox=&#8221;-120 -80 240 160&#8243;<\/p>\n<p>This means the flag is being drawn in a 240 x 160 space, in which 0,0 is the exact center of the flag.<\/p>\n<p>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.<\/p>\n<pre>\r\npushMatrix();\r\n  translate(width\/2, height\/2);  \/\/ translate to center\r\n  scale(width\/240.0);            \/\/ change scale to match SVG file\r\n  \/\/ draw flag bezier curves here\r\npopMatrix();\r\n<\/pre>\n<p>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.<\/p>\n<pre>\r\n<path id=\"spearshape\" d=\"\r\nM -1,55.4256258422040733928782829281879157421699 \r\nh 2 V -38 \r\nC 3,-40 3,-43 3,-46 \r\nC 3,-48 3,-56 0,-64.6632301492380856250246634162192350325315 \r\nC -3,-56 -3,-48 -3,-46 \r\nC -3,-43 -3,-40 -1,-38 \r\nz\" stroke-miterlimit=\"10\" transform=\"rotate(30)\"\/>\r\n<\/pre>\n<p>This is what the spear path looks like, transcribed by hand into Processing:<\/p>\n<pre>\r\nvoid drawSpear()\r\n{\r\n  pushMatrix();\r\n  rotate(radians(30));\r\n  beginShape();\r\n    vertex(-1, 55.4256);\r\n    vertex(1,55.4256);\r\n    vertex(1,-38);\r\n    bezierVertex(3,-40, 3,-43, 3,-46);\r\n    bezierVertex(3,-48, 3,-56, 0,-64.6632);\r\n    bezierVertex(-3,-56, -3,-48, -3,-46);\r\n    bezierVertex(-3,-43, -3,-40, -1,-38);\r\n  endShape(CLOSE); \r\n  popMatrix();\r\n}\r\n<\/pre>\n<p>The initial rotation of 30 degrees matches the rotation transform in the SVG path.  <\/p>\n<p>You can learn about what the different codes in the SVG mean, as I did, by reading the <a href=\"http:\/\/www.w3.org\/TR\/SVG\/paths.html#PathDataCurveCommands\">SVG path spec<\/a>.<\/p>\n<p>The directives used in the spear path are<\/p>\n<p>M  Move<br \/>\nh  Horizontal line<br \/>\nc  Bezier Curve<br \/>\nz  Close path<\/p>\n<p>Upper case letters indicate absolute coordinates.  Lower case letters are relative coordinates.<\/p>\n<p>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&#8217;ve trimmed those numbers to 4 decimal points, which is still needlessly accurate, but not insanely so.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 source I transcribed most of the Kenyan flag from the SVG file found [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[21,6,8,15],"class_list":["post-451","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-advanced","tag-flag","tag-intermediate","tag-symmetry"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/comments?post=451"}],"version-history":[{"count":7,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/451\/revisions"}],"predecessor-version":[{"id":462,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/451\/revisions\/462"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}