{"id":217,"date":"2011-11-12T01:52:31","date_gmt":"2011-11-12T09:52:31","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=217"},"modified":"2011-11-17T03:02:18","modified_gmt":"2011-11-17T11:02:18","slug":"how-to-draw-the-australian-flag","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/11\/how-to-draw-the-australian-flag\/","title":{"rendered":"How to Draw the Australian 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\/11\/how-to-draw-the-union-jack\/\">Union Jack<\/a><\/p>\n<p>Okay, in previously tutorials I have covered all the ingredients that go into the Australian flag, specifically:<\/p>\n<p><a href=\"\/blog\/2011\/11\/how-to-draw-the-union-jack\/\">How to draw the Union Jack<\/a><\/p>\n<p><a  href=\"\/blog\/2011\/11\/stars-and-asters\/\">Stars and Asters<\/a><\/p>\n<p>Here&#8217;s my sketch of flag of Australia, the specification of which you&#8217;ll find <a href=\"http:\/\/en.wikipedia.org\/wiki\/Flag_of_Australia\">in Wikipedia<\/a>.<\/p>\n<p><script type=\"application\/processing\">\/\/ Australia\n\n\/\/ http:\/\/en.wikipedia.org\/wiki\/File:Flag_of_Australia_template.svg\n\nint kHeight = 250; \/\/ The only number that needs changing\n\n\/\/ The RGB red and blue specified in the Wikipedia entry are super saturated, and don't look\n\/\/ good to me, so I commented them out in favor of the Pantone equivalents listed here.\n\/\/ http:\/\/www.umsiko.co.za\/links\/color.html\n\n\/\/ color blueColor = color(0,0,139);     \/\/ RGB recommendation\n\/\/ color whiteColor = color(255,255,255); \/\/ RGB recommendation\n\/\/ color redColor = color(255,0,0);      \/\/ RGB recommendation\n\ncolor blueColor = color(0,38,127);     \/\/ Pantone 280C\ncolor whiteColor = color(255,255,255); \/\/ Pantone Safe\ncolor redColor = color(234,4,55);      \/\/ Pantone 185C\n\nPGraphics unionJack;\n\nvoid setup()\n{\n  size(kHeight*2, kHeight);\n  noStroke();\n  smooth();\n  noLoop();\n\n  unionJack = createGraphics(width\/2, height\/2, P2D);\n  unionJack.beginDraw();\n  drawUnionJack(unionJack);\n  unionJack.endDraw();\n}\n\nvoid drawUnionJack(PGraphics pg)\n{\n  int w = pg.width;\n  int h = pg.height;\n\n  float fatRedCrossWidth= h\/5.0;\n  float thinRedCrossWidth = h\/15.0;\n  \n  float whiteDiagonalCrossWidth = h\/5.0;\n  float fatWhiteCrossWidth = h\/3;\n\n  \/\/ Background blue field\n  pg.smooth();\n  pg.noStroke();\n\n  pg.fill(blueColor);\n  pg.rect(0,0, pg.width, pg.height);\n  \n  \/\/ White Diagonal Cross\n  pg.stroke(whiteColor);\n  pg.strokeCap(PROJECT);\n  pg.noFill();\n  pg.strokeWeight(whiteDiagonalCrossWidth);\n  pg.line(0,0,w,h);\n  pg.line(0,h,w,0);\n  \n  \/\/ Thin Red Diagonal Lines (the most complicated bit, because each one is offset)\n  float yRatio = 1\/sin(radians(90)-atan2(h,w));\n\n  \/\/ This is the amount to move the (centered stripe) so it lines up with corner, creating pinwheel effect.\n  float offsetY = thinRedCrossWidth*yRatio\/2;  \n\n  pg.stroke(redColor);\n  pg.strokeWeight(thinRedCrossWidth);\n  pg.line(0,0+offsetY,w\/2,h\/2+offsetY);           \/\/ top left stripe\n  pg.line(w,0-offsetY,w\/2,h\/2-offsetY);       \/\/ top right stripe\n  pg.line(w,h-offsetY,w\/2,h\/2-offsetY);  \/\/ bot right stripe\n  pg.line(0,h+offsetY,w\/2,h\/2+offsetY);      \/\/ bot left stripe\n  pg.strokeWeight(1);\n  pg.noStroke();\n  \n  \/\/ Thin Red Diagonal Cross pinwheel segments...\n  pg.fill(redColor);\n  pg.beginShape();\n  pg.vertex(0,0);\n  pg.vertex(w\/2, h\/2);\n  pg.vertex(w\/2+cos(PI-PI\/4)*thinRedCrossWidth,h\/2+sin(PI-PI\/4)*thinRedCrossWidth);\n  pg.vertex(0+cos(PI-PI\/4)*thinRedCrossWidth,0+sin(PI-PI\/4)*thinRedCrossWidth);\n  pg.endShape(CLOSE);\n  \n  pg.beginShape();\n  pg.vertex(w,0);\n  pg.vertex(w\/2, h\/2);\n  pg.vertex(w\/2+cos(PI+PI\/4)*thinRedCrossWidth,h\/2+sin(PI+PI\/4)*thinRedCrossWidth);\n  pg.vertex(w+cos(PI+PI\/4)*thinRedCrossWidth,0+sin(PI+PI\/4)*thinRedCrossWidth);\n  pg.endShape(CLOSE);\n  \n  pg.beginShape();\n  pg.vertex(0,h);\n  pg.vertex(w\/2, h\/2);\n  pg.vertex(w\/2+cos(PI\/4)*thinRedCrossWidth,h\/2+sin(PI\/4)*thinRedCrossWidth);\n  pg.vertex(0+cos(PI\/4)*thinRedCrossWidth,h+sin(PI\/4)*thinRedCrossWidth);\n  pg.endShape(CLOSE);\n  \n  pg.beginShape();\n  pg.vertex(w,h);\n  pg.vertex(w\/2, h\/2);\n  pg.vertex(w\/2+cos(-PI\/4)*thinRedCrossWidth,h\/2+sin(-PI\/4)*thinRedCrossWidth);\n  pg.vertex(w+cos(-PI\/4)*thinRedCrossWidth,h+sin(-PI\/4)*thinRedCrossWidth);\n  pg.endShape(CLOSE);\n  \n  \n  \/\/ Fat White Cross\n  pg.fill(whiteColor);\n  pg.rect(0,h\/2-fatWhiteCrossWidth\/2, w, fatWhiteCrossWidth);\n  pg.rect(w\/2-fatWhiteCrossWidth\/2,0, fatWhiteCrossWidth, h);\n  \n  \/\/ Fat Red Cross\n  pg.fill(redColor);\n  pg.rect(0,h\/2-fatRedCrossWidth\/2, w, fatRedCrossWidth);\n  pg.rect(w\/2-fatRedCrossWidth\/2,0, fatRedCrossWidth, h);\n}\n\nvoid drawAster(int nbrPoints, float cx, float cy, float odiam, float idiamRatio)\n{\n  float orad = odiam \/ 2;\n  float irad = orad * idiamRatio;\n\n  pushMatrix();\n  translate(cx, cy);\n  rotate(radians(-90)); \/\/ Point upwards  \n\n  float  a = TWO_PI \/ nbrPoints;\n\n  beginShape();\n  for (int i = 0; i < nbrPoints; ++i) {\n    vertex( cos( a * i) * orad, sin( a * i) * orad);\n    vertex( cos( a * (i+.5)) * irad, sin( a * (i+.5)) * irad);\n  }\n  endShape(CLOSE);\n  popMatrix();\n}\n\nvoid draw()\n{\n  background(blueColor);\n  image(unionJack, 0, 0);\n\n  fill(whiteColor);\n\n  drawAster( 7, width\/4.0, height*3\/4.0, width*3\/20.0, 4\/9.0); \/\/ Commonwealth star\n  drawAster( 7, width*3\/4.0, height*5\/6.0, width*1\/14.0, 4\/9.0); \/\/ Alpha Crucis\n  drawAster( 7, width*5\/8.0, height*7\/16.0, width*1\/14.0, 4\/9.0); \/\/ Beta Crucis\n  drawAster( 7, width*3\/4.0, height*1\/6.0, width*1\/14.0, 4\/9.0); \/\/ Gamma Crucis\n  drawAster( 7, width*31\/36.0, height*89\/240.0, width*1\/14.0, 4\/9.0); \/\/ Delta Crucis\n  drawAster( 5, width*4\/5.0, height*13\/24.0, width*1\/24.0, 4\/9.0); \/\/ Epsilon Crucis\n}\n\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=flags\/Flag_of_Australia\">source<\/a><\/div>\n<p>So, first, let&#8217;s talk about colors.  Although the Union Jack of the United Kingdom looks very similar, color-wise, the Australian government has specified different colors for this flag.  They recommend both Pantone colors, for physical flags, and RGB colors for flags on websites.  Here you can see what both look like:<\/p>\n<div class=\"exc\"><img decoding=\"async\" src=\"\/img\/australia_colors.png\" \/><\/div>\n<p>I don&#8217;t particularly like the government recommended RGB colors, which I find to be over-saturated.  So I decided to go-against the Australian government and use RGB equivalents of their recommended Pantone colors.  I think they look nicer.  You can use whatever colors you want &#8211; I provided both sets in the sketch.  Just for reference, here&#8217;s what the Union Jack recommended colors look like:<\/p>\n<div class=\"exc\"><img decoding=\"async\" src=\"\/img\/unionjack_colors.png\" \/><\/div>\n<p>Now onto the Union Jack.  My first thought was to take my existing Union Jack code, and drop it into a function, which takes w and h (width and height) as arguments, so I can draw a Union Jack any size.  Then I would pass in width\/2 and height\/2 to get the correctly sized Union Jack.  This would have worked except for one problem, as you can see in the following buggy flag:<\/p>\n<div class=\"exc\"><img decoding=\"async\" src=\"\/img\/australia_badflag.png\" \/><\/div>\n<p>If you look closely, you&#8217;ll see the white and red diagonal stripes extend too far out, and aren&#8217;t cropped to the square.  This is due to the lazy way I originally implemented the Union Jack &#8211; I drew those stripes as thick lines and allowed the frame of the sketch to crop them out.<\/p>\n<p>I could have fixed this by changing the way I drew the lines, drawing them as quadrilateral outlines, rather than thick lines.  This would have worked, but I decided to go another route, so I could demonstrate how to draw into an offscreen bitmap.<\/p>\n<p>What I did was to create an offscreen PGraphics object which is the size I want, and then I draw the Union Jack into that.  This causes the diagonal stripes to be cropped to the size of the PGraphics object, which is one quarter the area of my main window.  Then, I copy that PGraphics image into my larger drawing window.<\/p>\n<p>Here&#8217;s the code to set it up.<\/p>\n<pre>\r\n  unionJack = createGraphics(width\/2, height\/2, P2D);\r\n  unionJack.beginDraw();\r\n  drawUnionJack(unionJack);\r\n  unionJack.endDraw();\r\n<\/pre>\n<p>The drawUnionJack() function that I created is essentially the same code from my Union Jack tutorial, but modified to draw into the offscreen buffer.  Take a look at the <a href=\"\/showexample.php?ex=flags\/Flag_of_Australia\">complete source code<\/a>, to view it.<\/p>\n<p>To draw the Australian flag, I first fill the background with my blue color, then I copy my previously prepared Union Jack using the image() function to draw it at 0,0:<\/p>\n<pre>\r\n  background(blueColor);\r\n  image(unionJack, 0, 0);\r\n<\/pre>\n<p>Then I draw my stars, using the drawAster() function I covered in the <a href=\"\/blog\/2011\/11\/stars-and-asters\/\">previous tutorial on drawing stars<\/a>.   The Australian Flag specification on Wikipedia specifies precisely how big these stars are (both inner and outer radii) and where they are placed.  I&#8217;ve duplicated those measurements here.<\/p>\n<pre>\r\n  \/\/ Commonwealth star\r\n  drawAster( 7, width\/4.0, height*3\/4.0, width*3\/20.0, 4\/9.0); \r\n  \/\/ Alpha Crucis\r\n  drawAster( 7, width*3\/4.0, height*5\/6.0, width*1\/14.0, 4\/9.0); \r\n  \/\/ Beta Crucis\r\n  drawAster( 7, width*5\/8.0, height*7\/16.0, width*1\/14.0, 4\/9.0); \r\n  \/\/ Gamma Crucis\r\n  drawAster( 7, width*3\/4.0, height*1\/6.0, width*1\/14.0, 4\/9.0); \r\n  \/\/ Delta Crucis\r\n  drawAster( 7, width*31\/36.0, height*89\/240.0, width*1\/14.0, 4\/9.0); \r\n  \/\/ Epsilon Crucis\r\n  drawAster( 5, width*4\/5.0, height*13\/24.0, width*1\/24.0, 4\/9.0); \r\n<\/pre>\n<p>And voila, we have an Australian flag!  Insert marsupial jokes here. At this point, I would suggest trying to draw the American Flag, using the techniques I&#8217;ve covered so far (the only tricky part is tiling the stars right).  I&#8217;ll show you my method in the next flag tutorial.<\/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: Union Jack Okay, in previously tutorials I have covered all the ingredients that go [&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":[8,14],"class_list":["post-217","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-intermediate","tag-stars"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/217","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=217"}],"version-history":[{"count":8,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/217\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/217\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}