{"id":240,"date":"2011-11-13T23:21:00","date_gmt":"2011-11-14T07:21:00","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=240"},"modified":"2011-11-13T23:21:00","modified_gmt":"2011-11-14T07:21:00","slug":"how-to-draw-the-usa-flag","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/11\/how-to-draw-the-usa-flag\/","title":{"rendered":"How to Draw the USA Flag"},"content":{"rendered":"
<\/div>\n

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

Previously: Australia<\/a><\/p>\n

Having figured out how to draw stars, and having drawn plenty of stripes, we are ready to tackle the Stars and Stripes. The specification on Wikipedia<\/a> provides a handy chart and some useful measurements, which I’ve reworded a bit for consistency (I always use ‘width’ for horizontal measurements and height for ‘vertical’ measurements).<\/p>\n

<\/div>\n
    \n
  • Hoist (height) of the flag: A = 1.0\n
  • Fly (width) of the flag: B = 1.9\n
  • Hoist (height) of the Union: C = 0.5385 (A \u00d7 7\/13, spanning seven stripes)\n
  • Fly (width) of the Union: D = 0.76 (B \u00d7 2\/5, two fifths of the flag width)\n
  • E = F = 0.0538 (C\/10, One tenth of the height of the Union)\n
  • G = H = 0.0633 (D\/12, One twelfth of the width of the Union)\n
  • Diameter of star: K = 0.0616\n
  • Height of stripe: L = 0.0769 (A\/13, One thirteenth of the flag height)\n<\/ul>\n

    I’m going to base all my numbers on the height (or hoist), which you can change at the top of the script.<\/p>\n

    \r\nint kHeight = 260;\r\n<\/pre>\n
    My colors come from the wikipedia specification.<\/p>\n
    \r\ncolor blueColor  = #3C3B6E;\r\ncolor whiteColor = #FFFFFF;\r\ncolor redColor   = #B22234;\r\n<\/pre>\n
    When setting the size of the sketch, I use the specified 1.9:1 aspect ratio.<\/p>\n
    \r\n  size(round(kHeight*1.9), kHeight);\r\n<\/pre>\n
    In the draw function, we set some useful measurements, that come from the specification. <\/p>\n
    \r\n  int  nbrStripes = 13;\r\n  float stripeHeight = height\/(float) nbrStripes;\r\n  float unionWidth = width * 2\/5.0;\r\n  float unionHeight= height * 7\/13.0;\r\n<\/pre>\n
    We first fill the frame with white, and then draw our 13 stripes.<\/p>\n
    \r\n  background(whiteColor);\r\n\r\n  fill(redColor);\r\n  for (int i = 0; i < nbrStripes; i += 2) {\r\n    rect(0,stripeHeight*i, width, stripeHeight);\r\n  }\r\n<\/pre>\n
    This produces the following image.<\/p>\n
    \n