Draw the Union Jack

Question

Preface

There are many "draw x flag" challenges, and upon searching it turns out there are no challenges to draw the union Jack! I feel like this would be a harder flag to draw but it should still be possible.

Challenge

Draw the Union Jack. It can be outputted to a file in any freely available graphics file format or drawn onto the screen.

• Code Golf rules apply, shortest code in bytes wins.
• Standard loopholes apply.
• No builtins for flag drawing allowed.

Dimensions shall be as below. Minimum size 600x300 pixels (or units if your language supports only scalable graphics.) Maximum error 1 pixel.

Colours shall be red, white and blue as defined by your language or its documentation, or #CC0000, #FFFFFF and #003399 per Wikipedia page.

Answer 1

BBC BASIC

Rev B, 234 bytes

Instead of drawing one white and one red cross, we draw 100 progressively narrower crosses, switching from white background to red foreground at a coordinate of 60.

p=20761m=1049w=600h=300F.i=-1TO1V.29,w;h;18;4,m;134*i;0;m;w*i;-233;p;0;466;m;0;67*i;m;-466;h*i;p;932;0;18;1,m;511*i;h*i;25;89*i;0;29977;0;0;m;w*i;-h*i;28953;0;45*i;
N.F.c=-100TO0q=25881-c DIV60*512V.m;-c;-h;q;c;h;m;-w;-c;q;w;c;
N.

Download interpreter free at http://www.bbcbasic.co.uk/bbcwin/bbcwin.html

Fully golfed, 249 bytes

Single byte VDU codes e.g 25,0 combined into double-byte little endian e.g 25; and maximum use of constants for common values. Keywords compressed to abbreviated form, e.g. FOR=>F. (interpreter expands automatically.)

p=20761q=26393r=25881m=1049c=100w=600h=300F.i=-1TO1V.29,w;h;18;4,m;134*i;0;m;w*i;-233;p;0;466;m;0;67*i;m;-466;h*i;p;932;0;18;1,m;511*i;h*i;25;89*i;0;29977;0;0;m;w*i;-h*i;28953;0;45*i;
N.V.m;-c;-h;q;c;h;2m;-w;-c;q;w;c;m;-60;-h;r;60;h;m;-w;-60;r;w;60;

Semigolfed

Raw VDU codes. In BBC BASIC, characters can be sent to the VDU controller like VDU65 (prints an A.) There are certain special characters particular to the BBC for graphics. These must be followed by several other bytes to specify coordinates, etc. Here we use PLOT=>VDU25, GCOL=>VDU18, ORIGIN=>VDU29.

  c=100w=600h=300                                      :REM constants 100,width,height
  FORi=-1TO1                                           :REM loop -1 and 1 (0 draws nothing)
    VDU29,w;h;                                         :REM set origin (bring inside loop for golfing reasons)
    VDU18;4                                            :REM change to blue and draw triangles
    VDU25,4,134*i;0;25,4,w*i;-233;25,81,0;466;25,4,0;67*i;25,4,-466;h*i;25,81,932;0;
    VDU18;1                                            :REM change to red and draw parallelograms
    VDU25,4,511*i;h*i;25,0,89*i;0;25,117,0;0;25,4,w*i;-h*i;25,113,0;45*i;
  NEXT
  VDU25,4,-c;-h;25,103,c;h;25,4,-w;-c;25,103,w;c;      :REM draw white background rectangles
  VDU25,4,-60;-h;25,101,60;h;25,4,-w;-60;25,101,w;60;  :REM draw red foreground rectangles

First we draw half the diagonal parts: 2 blue triangles and 2 red parallelograms. Then we change the scale from -1 to +1 and draw the other half. Finally we draw the horizontal and vertical parts on top: 2 white rectangles to form a white cross, then 2 red rectangles. The image after the first iteration of the loop is shown below, along with the final image.

Ungolfed code

BBC basic remembers the last 2 locations of the graphics cursor. PLOT81 draws a triangle between the new coordinates specified and these last two locations. PLOT113 and PLOT117 draw a parallelogram in a similar way: three corners of the parallelogram have to be given in the order they are found going round the perimeter. The last three bits of the PLOT code define whether the given coordinates are absolute or relative, and whether foreground or background colour is used. The more significant bits define what type of shape is drawn (point, line, triangle, parallelogram, rectangle, etc.)

  ORIGIN600,300       :REM move the origin (which will be centre of flag) away from the corner of the screen.

  FORi=-1TO1          :REM at scales of -1 and 1, plot half each of the diagonal parts (i=0 plots nothing).
    GCOL0,4             :REM blue foreground colour
    PLOT4,134*i,0       :REM absolute move to peak of upper/lower triangle
    PLOT4,600*i,-233    :REM absolute move to left hand corner
    PLOT81,0,466        :REM relative move to right hand corner, plotting triangle

    PLOT4,0,67*i        :REM absolute move to peak of left/right triangle
    PLOT4,-466,300*i    :REM absolute move to lower corner
    PLOT81,932,0        :REM relative move to upper corner, plotting triangle

    GCOL0,1             :REM red foreground colour
    PLOT4,511*i,300*i   :REM absolute move to long edge of flag
    PLOT0,89*i,0        :REM relative move to corner of flag (top right / bottom left)
    PLOT117,0,0         :REM absolute move to centre of flag, plotting parallelogram (stripe)
    PLOT4,600*i,-300*i  :REM absolute move to corner of flag (bottom right / top left)
    PLOT113,0,45*i      :REM relative move to short edge of flag, plotting parallelogram (stripe)
  NEXT                :REM diagonal parts completed, now plot vertical/horizontal parts on top.

  PLOT4,-100,-300     :REM move to bottom left of vertical white stripe
  PLOT103,100,300     :REM move to top right corner, plot it in background colour (white)
  PLOT4,-600,-100     :REM move to bottom left corner of horizontal white stripe
  PLOT103,600,100     :REM move to top right corner, plot it in background colour (white)

  PLOT4,-60,-300      :REM move to bottom left of vertical red stripe
  PLOT101,60,300      :REM move to top right corner, plot it in foreground colour (red)
  PLOT4,-600,-60      :REM move to bottom left corner of horizontal red stripe
  PLOT101,600,60      :REM move to top right corner, plot it in foreground colour (red)

Answer 2

SVG, 298 bytes

score excludes 3 unnecessary newlines added for clarity.

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M67,0h466L0,267v-234L533,300h-466L600,33v232z" fill="blue"/>
<path d="M0,0v22L300,172L45,300h-45L600,0h-45L300,128L600,278v22z" fill="red"/>
<path d="M-10,110h270v-120h80v120h270v80h-270v120h-80v-120h-270z" fill="red" stroke="#fff" stroke-width="20"/>

Inspired by Siren's deleted answer (and in particular the saving in bytes from omitting </svg> at the end of the document), I came up with an SVG that is both dimensionally correct and slightly shorter.

It consists of a blue path and a red path (filled, without strokes) for the diagonal parts and a red path (filled, with 20 unit white border) for the final cross. Because of the thickness of the white border, the specified dimensions of the cross must exceed the required dimensions by 10 all around.

This works fine for me in Microsoft IE and Edge. Sometimes displays an "extra content at the end of the document" warning in Chrome.

Here's how it appears without and with the final cross. 8 points are required to describe the blue path, 10 points to describe the red path, and 12 points for the final cross. The intersections of straight lines within the first two paths do not have to be given.

Answer 3

Logo, 260 239 bytes

(XLogo Interpreter)

I used the Java-based XLogo interpreter since it was one of the few Logo implementations I could find which supports setting the output window size.

The XLogo editor normally saves files as procedures which are meant to be called. This program is written to be pasted into the immediate window instead. This saves about 9 bytes.

window setscreensize[600 300]setsc 4 lt atan 2 repeat 2[repeat 2[setpc 7 setpw 60 fd 400 setpw 20 lt 90 fd 10 lt 90 setpc 1 fd 400 lt 90 fd 10 rt 90]lt asin .8]home wrap setpw 100 setpc 7 repeat 2[repeat 2[fd 600 lt 90]setpw 60 setpc 1] ht

Since exact colors weren't required, I regolfed this to use built-in color numbers which saved several bytes. If you want to see a version with exact RGB colors, check the revisions. I also substituted a trigonometric calculation with a shorter equivalent.

Ungolfed with commentary

The only real trickery here is changing colors for the second pass of a loop, and taking advantage of the wrap feature which allows us to draw the horizontal stripes with very little effort. Since the flag height and width are both factors of 600, we can go forward 600 for either vertical or horizontal stripes and end up back at the center again. This avoids having separate cases for each, even if it does draw the vertical bar twice as often. We're saving code space, not clock-cycles.

to UnionJack
  #Initialize the screen
  window  #Allow the turtle to overshoot the boundary without reappearing on the opposite side
  setscreensize[600 300]
  setsc 4  #blue background

  lt atan 2 #Turn left, preparing to draw first diagonal
  repeat 2 [ #Draw 2 sets of main diagonal bars
    repeat 2 [ #Each main bar is made of 2 spokes
      setpc 7 setpw 60 #Use a wide white pen
      fd 400 #Draw past the corner of the window
      setpw 20 #Make the pen narrow
      lt 90 fd 10 lt 90 #Do a 10px U-turn
      setpc 1 #Switch to a red pen
      fd 400 #Draw back to the center.
      lt 90 fd 10 rt 90 #Do a 10 px S curve back to center, ready to draw the opposite spoke
    ] #Finish spoke
    lt asin .8 #Turn for the next bar.
  ] #Finish bar
  home #Return to a sane heading
  wrap #Makes the turtle wrap to the opposite side if it overshoots the boundary
  setpw 100 setpc 7 #Wide white pen
  repeat 2 [ #Draw 2 crosses
    repeat 2 [ #Each cross has 2 stripes
      fd 600 #Overshoot the boundary so that we end up where we started at the center, leaving a stripe behind
      lt 90 #Rotate to draw the next stripe
    ] #Finish the stripe
    setpw 60 setpc 1 #Change to a narrow red pen
  ] #Finish cross
  ht #Hide the turtle
end

Answer 4

Processing, 312 bytes

This is the type of puzzle where Processing is pretty efficient.

int a=300,b=2*a,c=255,d=100;size(b,a);background(0,51,153);stroke(c);strokeWeight(60);line(0,a,b,0);line(0,0,b,a);stroke(c,0,0);strokeWeight(20);line(0,310,a,160);line(-22,0,a,160);line(a,139,b,-12);line(a,139,624,a);noStroke();fill(c);rect(250,0,d,b);rect(0,d,b,d);fill(c,0,0);rect(270,0,60,b);rect(0,120,b,60);

Results in:

Answer 5

Postscript (175 bytes)

00000000: 880a 880a 928b 3020 3092 6b30 881e 9263  ......0 0.k0...c
00000010: 883c 3330 9263 883c 3092 6392 1692 142f  .<30.c.<0.c..../
00000020: 727b 2e38 8800 3092 9d7d 9233 2f77 7b31  r{.8..0..}.3/w{1
00000030: 8801 3192 9d7d 9233 924e 3220 3192 8b30  ..1..}.3.N2 1..0
00000040: 202e 3220 2e36 929d 3020 3088 1e33 3092   .2 .6..0 0..30.
00000050: 8088 0f31 3592 ad34 3592 8834 7b77 8800  ...15..45..4{w..
00000060: 2d32 2e36 3888 1e35 2e33 3792 8072 8800  -2.68..5.37..r..
00000070: 3088 1e31 2e37 3992 8039 3092 887d 9283  0..1.79..90..}..
00000080: 924d 881e 3135 92ad 327b 7788 fb88 e288  .M..15..2{w.....
00000090: 0a36 3092 8039 3092 887d 9283 327b 7288  .60..90..}..2{r.
000000a0: fd88 e236 883c 9280 3930 9288 7d92 83    ...6.<..90..}..

Non-tokenized version:

10 10 scale
0 0 moveto
0 30 lineto
60 30 lineto
60 0 lineto
closepath
clip
/r {.8 0 0 setrgbcolor} def
/w {1 1 1 setrgbcolor} def
gsave
2 1 scale
0 .2 .6 setrgbcolor
0 0 30 30 rectfill
15 15 translate
45 rotate
4 {w 0 -2.68 30 5.37 rectfill r 0 0 30 1.79 rectfill 90 rotate} repeat
grestore
30 15 translate
2 {
w
-5 -30 10 60 rectfill
90 rotate
} repeat
2 {
r
-3 -30 6 60 rectfill
90 rotate
} repeat

Output:

Answer 6

HTML/CSS, 742 bytes

A very unclever CSS implementation using three HTML elements.

<style>body{margin:0;zoom:10}a,b{position:absolute;width:30px;height:30px;background:#012169;clip-path:inset(0)}a:after,a:before,b:after,b:before{position:absolute;content:'';width:60px;height:2px;background:#c00;border:0 solid #fff;border-width:3px 0 1px 0;transform-origin:0 3px}a:after,b:after{top:-3px;transform:rotate(26.56deg)}a:before,b:before{top:27px;transform:rotate(-26.56deg)}b{left:30px;transform:rotate(180deg)}i{position:absolute;background:#fff;width:60px;height:10px;top:10px}i:before{position:absolute;background:#c00;width:6px;height:30px;top:-10px;left:25px;border:0 solid #fff;border-width:0 2px 0 2px;content:''}i:after{position:absolute;top:2px;width:60px;height:6px;background:#c00;content:''}</style><a></a><b></b><i>

See it unminified on CodePen.

Answer 7

C (gcc), 248 229 224 bytes

-24 bytes thanks to @ceilingcat

#define p putchar(c?c-1
i=-151,j,I,J;main(c){for(puts("P6 600 300 255 ");++i<150;)for(j=-301;++j<300;p?0:255:204))c=(c=fmin(I=abs(i),J=abs(j)))<30?0:c<50?:(c=i*j>0?J-2*I:2*I-J)>0&c<35?0:c*c<2704?:2,p?51:255:0),p?153:255:0);}

Try it online!

Outputs a PPM image.

Answer 8

Python 2, 265 bytes

r="D\0\0"
b="\0\x173"
w="U"*3
N=20*(270*w+60*r+270*w)
L=190*[b]+60*[w]+40*[r]+20*[w]+190*[b]
j=''.join
F=lambda p:j([j(L[150-p*100+i:150+p*150+i:p])+20*w+60*r+20*w+j(L[345-p*145-i:345+p*105-i:p])for i in range(0,200,2)])
print"P6 600 300 85 "+F(-1)+N+36000*r+N+F(1)

Output as binary PPM, usage:

python golf_unionjack.py > unionjack.ppm

L represents a vertical slice of the diagonal parts and F uses the (sort of) symmetry to save code and calculate the indices for upper and lower part.

Answer 9

M2000 Interpreter

Copy program to a module and execute it. Draw 4 flags with various styles (also utilize RATIO 3/5 and 1/2).

// https://en.wikipedia.org/wiki/Flag_of_the_United_Kingdom
// https://www.flagcolorcodes.com/united-kingdom
CLS 5,0

module UnionFlag(X1=3000, Y1=1000, z=10000, RATIO=.6) {
RED=#C8102E
BLUE=#012169
WHITE=#FFFFFF
z50=z div 50
z1=int(z*RATIO)
z130=z1 div 30


MOVE X1,Y1
PATH {
    POLYGON 0, z+twipsX, 0, 0, z1+twipsY, -z-twipsX, 0, 0,-z1-twipsY
};
PEN BLUE {POLYGON BLUE, z+twipsX, 0, 0, z1+twipsY, -z-twipsX, 0, 0,-z1-twipsY}
MOVE X1+Z/2,Y1+Z1/2
P=ATN(Z1/Z)/180*PI
Z2=SQRT(Z1**2+Z**2)
STEP ANGLE P, -Z2/2
STEP ANGLE P+PI/2, -Z130*3
PEN WHITE {POLYGON WHITE, ANGLE P, Z2, P+PI/2, Z130*6, P, -Z2, P+PI/2, -Z130*6}
STEP ANGLE P+PI/2, Z130
PEN RED {POLYGON RED, ANGLE P, Z2/2, P+PI/2, Z130*2, P, -Z2/2, P+PI/2, -Z130*2}
STEP ANGLE P+PI/2, Z130*2
STEP ANGLE P, Z2/2
PEN RED {POLYGON RED, ANGLE P, Z2/2, P+PI/2, Z130*2, P, -Z2/2, P+PI/2, -Z130*2}
MOVE X1+Z/2,Y1+Z1/2
oldp=p
p=pi/2-p
STEP ANGLE P-PI/2, -Z2/2
STEP ANGLE P, Z130*3
PEN WHITE {POLYGON WHITE, ANGLE P+pi/2, -Z2, P, -Z130*6, P+pi/2,Z2, P, Z130*6}
STEP ANGLE P, -Z130*3
PEN RED {POLYGON RED, ANGLE P+pi/2, -Z2/2, P, -Z130*2, P+pi/2,Z2/2, P, Z130*2}
STEP ANGLE P, Z130*2
STEP ANGLE P+PI/2, -Z2/2
PEN RED {POLYGON RED, ANGLE P+pi/2, -Z2/2, P, -Z130*2, P+pi/2,Z2/2, P, Z130*2}
p=oldp
MOVE X1+Z/2,Y1+Z1/2


STEP -z50*5, -z1/2
PEN white {POLYGON white, z50*10, 0, 0,z1, -z50*10, 0, 0, -z1}
STEP z50*5-z/2, z1/2
STEP 0, -z130*5
PEN white {POLYGON white, z, 0, 0, 10*z130, -z, 0, 0, -10*z130}
STEP z/2, z130*5


STEP -z50*3, -z1/2
PEN red {POLYGON red, z50*6, 0, 0,z1, -z50*6, 0, 0, -z1}
STEP z50*3-z/2, z1/2
STEP 0, -z130*3
PEN red {POLYGON red, z, 0, 0, 6*z130, -z, 0, 0, -6*z130}
STEP z/2, z130*3
path {}; 
}
unionFlag 1000,8100, 15000, 0.5
unionFlag
unionFlag 16000,1000, 8000
unionFlag 18000,9000, 8000, 0.5
a$=key$