{"id":146,"date":"2011-11-08T16:43:28","date_gmt":"2011-11-09T00:43:28","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=146"},"modified":"2011-11-12T00:35:36","modified_gmt":"2011-11-12T08:35:36","slug":"how-to-draw-the-union-jack","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/11\/how-to-draw-the-union-jack\/","title":{"rendered":"How to Draw the Union Jack"},"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=\"Italy\">Italy<\/a><\/p>\n<p>Here&#8217;s my sketch for the Union Jack or Union Flag, which is the flag of the United Kingdom.  The figure also appears on the flag of Australia, which we&#8217;ll tackle next.<\/p>\n<div class=\"\" style=\"width:500px;\">\n<div class=\"figborder\" style=\"width:500px;\"><script type=\"application\/processing\">\/\/ United Kingdom (Union Flag \/ Union Jack) - Jim Bumgardner\n  \n\/\/ Reference: http:\/\/en.wikipedia.org\/wiki\/Union_Flag\n  \nint kHeight = 250;          \/\/ Flag will still draw correctly if height is changed.\nfloat aspectRatio = 2\/1.0; \/\/ Flag will still draw correctly if aspect ratio is changed (try 3\/2.0)\n\nsize((int) (kHeight*aspectRatio), kHeight);\nnoStroke();\nsmooth();\n\ncolor blueColor = color(0,36,125);\ncolor whiteColor = color(255,255,255);\ncolor redColor = color(207,20,43);\n\nfloat fatRedCrossWidth= height\/5.0;\nfloat thinRedCrossWidth = height\/15.0;\nfloat whiteDiagonalCrossWidth = height\/5.0;\nfloat fatWhiteCrossWidth = height\/3.0;\n\n\/\/ Background blue field\nfill(blueColor);\nrect(0,0, width, height);\n\n\/\/ White Diagonal Cross (not too hard, because it's centered on corners)\nstroke(whiteColor);\nstrokeCap(PROJECT);\nnoFill();\nstrokeWeight(whiteDiagonalCrossWidth);\nline(0,0,width,height);\nline(0,height,width,0);\n\n\/\/ Thin Red Diagonal Lines (the most complicated bit, because each one is offset)\n\n\/\/ This is the ratio of the diagonal stripe's height on the y-axis to it's cross section\nfloat yRatio = 1\/sin(radians(90)-atan2(height,width));\n\n\/\/ This is the amount to move the (centered stripe) so it lines up with corner, creating pinwheel effect.\nfloat offsetY = thinRedCrossWidth*yRatio\/2;  \n\nstroke(redColor);\nstrokeWeight(thinRedCrossWidth);\nline(0,0+offsetY,width\/2,height\/2+offsetY);           \/\/ top left stripe\nline(width,0-offsetY,width\/2,height\/2-offsetY);       \/\/ top right stripe\nline(width,height-offsetY,width\/2,height\/2-offsetY);  \/\/ bot right stripe\nline(0,height+offsetY,width\/2,height\/2+offsetY);      \/\/ bot left stripe\nstrokeWeight(1);\nnoStroke();\n\n\/\/ Fat White Cross\nfill(whiteColor);\nrect(0,height\/2-fatWhiteCrossWidth\/2, width, fatWhiteCrossWidth);\nrect(width\/2-fatWhiteCrossWidth\/2,0, fatWhiteCrossWidth, height);\n\n\/\/ Fat Red Cross\nfill(redColor);\nrect(0,height\/2-fatRedCrossWidth\/2, width, fatRedCrossWidth);\nrect(width\/2-fatRedCrossWidth\/2,0, fatRedCrossWidth, height);\n\n<\/script><\/div>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=flags\/Flag_of_United_Kingdom\">source<\/a><\/div>\n<\/div>\n<p>I&#8217;ve designed this sketch so that if either the height, or the aspect ratio of the flag is changed, it will still draw correctly.  <\/p>\n<pre>\r\nint kHeight = 250;\r\nfloat aspectRatio = 2\/1.0;\r\n\r\nsize((int) (kHeight*aspectRatio), kHeight);\r\n<\/pre>\n<p>You can change the height, or the aspect ratio, and the flag will still draw correctly.  Every measurement is based solely on the flag&#8217;s height.  Even the flag&#8217;s width is determined by its aspect ratio. <\/p>\n<p>I chose an aspect ratio of 2:1, which is the official aspect ratio for this flag, according to the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Union_Flag\">specification of the Union Jack on Wikipedia<\/a>. This flag is wider than the French and Italian flags, which use a 3:2 aspect ratio.<\/p>\n<p>The Wikipedia article includes the following helpful diagram.<\/p>\n<p><img decoding=\"async\" src=\"\/img\/uj_specifications.png\" \/><\/p>\n<p>I took some useful measurements from the above specfication:<\/p>\n<pre>\r\nfloat fatRedCrossWidth= height\/5.0;\r\nfloat thinRedCrossWidth = height\/15.0;\r\nfloat whiteDiagonalCrossWidth = height\/5.0;\r\nfloat fatWhiteCrossWidth = height\/3.0;\r\n<\/pre>\n<p>In the specification, the flag has a height of 30, and the fat red cross has a width of 6. Since 6 = 30\/5, I can set the variable <i>fatRedCrossWidth<\/i> to height\/5.  Since height is an integer, I used the floating point value 5.0 to insure there is no integer rounding.  I used similar logic to determine the other measurements, all derived from the height of the flag.<\/p>\n<p>Figures A through E show the five steps involved in drawing this flag.<\/p>\n<p><img decoding=\"async\" src=\"\/img\/uj_sequence.png\" \/><br \/>\nFigure 1<\/p>\n<p>First, we simply fill the whole drawing with blue (figure 1a).<\/p>\n<pre>\r\n\/\/ Background blue field\r\nfill(blueColor);\r\nrect(0,0, width, height);\r\n<\/pre>\n<p>Then we draw the white diagonal X (figure 1b).  This isn&#8217;t too hard because the X is centered on the corners.  I could have drawn these lines as filled quad shapes, rather than lines, but it is more concise to draw them as fat lines.  I use strokeWeight to set the line thickness to correspond to the desired width.<\/p>\n<pre>\r\n\/\/ White Diagonal X\r\nstroke(whiteColor);\r\nstrokeCap(PROJECT);\r\nnoFill();\r\nstrokeWeight(whiteDiagonalCrossWidth);\r\nline(0,0,width,height);\r\nline(0,height,width,0);\r\n<\/pre>\n<p>Now comes the hard part.  At first glance, the thin red diagonal X (figure 1c) is just like the white one, but if you look closely, you&#8217;ll see the 4 arms are offset to create a pinwheel effect (you can see in figure 1c that they don&#8217;t actually meet in the middle).  The tricky part is figuring out how much to vertically offset them.  If I were simply constructing a flag from pieces of fabric, this would be a no-brainer &#8212; I&#8217;d just line them up with the corners, but working out how much to move them in pixels requires a bit of geometric deduction.<\/p>\n<p><img decoding=\"async\" src=\"\/img\/uj_figure2.png\" \/><br \/>\nFigure 2.<\/p>\n<p>In figure 2, I&#8217;ve drawn an extra large red stripe to illustrate the problem.  If I were to simply draw the each stripe centered on the corner, as shown, the top of the stripe would be centered over the corner.  In the specification, the top-left stripe is moved down so that the top edge of the stripe lines up with the corner.  Each stripe is moved this way.  The amount each stripe needs to move (up or down) is the length of the line DE, which is exactly half the height of line AB (marked as <i>h<\/i>).  At the outset, I don&#8217;t know the length of <i>h<\/i>, however.  The specification <i>does<\/i> give us the length of <i>o<\/i>, however: <i>o<\/i> is 2\/30th (or 1\/15th) the height of the flag.  I can also determine the angle of the diagonal, since I know the width and height of the flag.  Given these two pieces of information, I can determine the height of <i>h<\/i> by applying some known properties of angles and triangles.<\/p>\n<p>In my right triangle, <i>h<\/i>, <i>a<\/i>, and <i>o<\/i> refer to the hypotenuse, adjacent and opposite sides to the angle A, respectively.  The basic rules of trig state that<\/p>\n<div class=\"equation\">\nsin(angle) = Opposite \/ Hypotenuse<br \/>\ncos(angle) = Adjacent \/ Hypotenuse<br \/>\ntan(angle) = Opposite \/ Adjacent\n<\/div>\n<p>I can manipulate the first formula to produce<\/p>\n<div class=\"equation\">\nHypotenuse = Opposite \/ Sin(angle)\n<\/div>\n<p>I know the value of <i>o<\/i>, but what is the angle A? At first glance I don&#8217;t know, but I can figure it out.  First of all, I know the angle of the diagonal red line against the top border of the box.  It is a line which connects the top\/left corner to the bottom right corner, so its angle can be computed using atan2() which is like a magic formula for converting cartesian coordinates to angles.  In this case, the angle of the diagonal is given by atan2(height, width).  <\/p>\n<p>Since line <i>h<\/i> goes straight down, and line <i>a<\/i> goes at the same angle as the diagonal, the angle A must be the 90-degree compliment of that angle, given by radians(90) &#8211; atan2(height, width).  Now I can plug those values into the hypotenuse formula to get the value of <i>h<\/i>.<\/p>\n<div class=\"equation\">h = o \/ sin( radians(90) &#8211; atan2(height, width)) )<\/div>\n<p>We can determine <i>h<\/i> relative to <i>o<\/i> by setting <i>o<\/i> to 1 (or <i>normalizing<\/i> it).  I&#8217;ve done this in the following source code to compute yRatio.  We then use half of yRatio in order to figure out how much to move the line down (corresponding to the length of DE).  This is stored in the variable <i>offsetY<\/i> which is used on each corner to move the line up or down by the correct amount.<\/p>\n<pre>\r\nfloat yRatio = 1\/sin(radians(90)-atan2(height,width));\r\nfloat offsetY = thinRedCrossWidth*yRatio\/2;  \r\nstroke(redColor);\r\nstrokeWeight(thinRedCrossWidth);\r\nline(0,0+offsetY,width\/2,height\/2+offsetY); \/\/ top left\r\nline(width,0-offsetY,width\/2,height\/2-offsetY); \/\/ top right\r\nline(width,height-offsetY,width\/2,height\/2-offsetY); \/\/ bot right\r\nline(0,height+offsetY,width\/2,height\/2+offsetY); \/\/ bot left\r\n<\/pre>\n<p>Then we draw the fat white cross (figure 1d) and the fat red cross (figure 1e).  Those are just simple centered rects.<\/p>\n<pre>\r\nnoStroke();\r\n\r\n\/\/ Fat White Cross\r\nfill(whiteColor);\r\nrect(0,height\/2-fatWhiteCrossWidth\/2, width, fatWhiteCrossWidth);\r\nrect(width\/2-fatWhiteCrossWidth\/2,0, fatWhiteCrossWidth, height);\r\n\r\n\/\/ Fat Red Cross\r\nfill(redColor);\r\nrect(0,height\/2-fatRedCrossWidth\/2, width, fatRedCrossWidth);\r\nrect(width\/2-fatRedCrossWidth\/2,0, fatRedCrossWidth, height);\r\n<\/pre>\n<p>I should also mention that the colors I chose also come from the Wikipedia article:  <\/p>\n<pre>\r\ncolor blueColor = color(0,36,125);\r\ncolor whiteColor = color(255,255,255);\r\ncolor redColor = color(207,20,43);\r\n<\/pre>\n<p>Like some other Wikipedia flag specifications the article offers Pantone colors, RGB equivalents, and &#8220;Web Safe&#8221; colors.  Even though you may be programming for the web, <i>never use the websafe colors<\/i>.  Websafe colors are from a palette of 256 colors that was developed for 8-bit displays back in the 1990s.  There are few enough of these computers left that you can safely ignore them.<\/p>\n<p>Prev: <a href=\"\/blog\/2011\/10\/how-to-draw-the-italian-flag\/\">Italy<\/a><\/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: Italy Here&#8217;s my sketch for the Union Jack or Union Flag, which is the [&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":[5,6],"class_list":["post-146","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-easy","tag-flag"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/146","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=146"}],"version-history":[{"count":10,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/146\/revisions"}],"predecessor-version":[{"id":216,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/146\/revisions\/216"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}