87
\$\begingroup\$

As you probably know, there is a war going on in Ukraine. I noticed that it seems nobody has posted a Ukrainian flag challenge yet, so I thought I'd do it myself in support of Ukraine.

The Challenge

Here is the flag: Flag of Ukraine

  • The flag is divided horizontally across the middle into two equally sized stripes.
  • Stripe colors: (0, 87, 183) or #0057B7 (blue, top) and (255, 215, 0) or #FFD700 (yellow, bottom).
  • Colors must be exact if possible, otherwise use the closest available blue and yellow.
  • The image can be saved to a file or piped raw to STDOUT in any common image file format, or it can be displayed in a window.
  • The image must be sized at a 3:2 ratio, and at least 78 by 52 pixels.
  • Alternatively, output a block of text at least 78 characters wide made of non-whitespace characters that depicts the flag, using ANSI color codes to color it. (Use standard blue and yellow.)
  • Built-in flag images, flag-drawing libraries, or horrendously upscaling the Ukrainian flag emoji are prohibited.

This is , so shortest code wins!

\$\endgroup\$
16
  • 1
    \$\begingroup\$ If the ANSI color code option is chosen, what aspect ratio should we assume each character has? \$\endgroup\$
    – Nitrodon
    Mar 19, 2022 at 16:38
  • 2
    \$\begingroup\$ @des54321 It must be exact. \$\endgroup\$
    – Ginger
    Mar 19, 2022 at 18:53
  • 8
    \$\begingroup\$ Unless I'm misunderstanding the QBasic answer already posted, I think that answer has inexact colors due to limitations of the language, but it is certainly likely other ancient languages could also have too-limited color-spaces to display the correct colors \$\endgroup\$
    – des54321
    Mar 19, 2022 at 19:42
  • 3
    \$\begingroup\$ Related: codegolf.stackexchange.com/questions/230438/create-a-pride-flag \$\endgroup\$
    – tsh
    Mar 20, 2022 at 5:10
  • 2
    \$\begingroup\$ Just pointing out that the yellow in the image above is #fbd02a and the blue is #1a54b2, as opposed to the #ffd700 and #0057b7 specified in the text. \$\endgroup\$ Mar 21, 2022 at 22:48

84 Answers 84

1 2
3
5
\$\begingroup\$

Octave, 55 47 bytes

imagesc([5 5 5;4 4 4],[3,5])
colormap(prism(5))

image

My first time posting in Octave! There might be a way to display without having to use climits, or maybe even without changing the default colormap, but I have not found it yet.

Credits to cnln for the save!

\$\endgroup\$
2
  • 1
    \$\begingroup\$ I don't think you need climits=, as that is inferred from the third input. This saves 8 bytes. See here. \$\endgroup\$
    – cnln
    Apr 17 at 13:34
  • 1
    \$\begingroup\$ Was not expecting anyone to actually care about this post, so appreciate that! \$\endgroup\$
    – south
    Apr 18 at 4:46
4
\$\begingroup\$

Node JavaScript 84, 83, 77, 66

83 bytes

f=n=>`\x1b[48;5;${n}m${' '.repeat(78)}\x1b[m
`.repeat(13);console.log(f(33)+f(220))

draws the flag on terminal output, 1 byte saved thanks to @Samathingajig's suggestion to use an inline LF instead of '\n'.

You can try copying and pasting the code after the REPL prompt (brought up by running node in a terminal). Alternatively save the code to file and run it with node filename.

77 bytes

Another 6 bytes saved by replacing each occurence of \x1b (4bytes) with a single ASCII ESC character (1 byte). Due to character set limitations in HTML, you can run the code snippet to see the actual code and length. Save it to file and run with Node to see the flag:

js.value="f=n=>`\x1b[48;5;${n}m${' '.repeat(78)}\x1b[m\n`.repeat(13);console.log(f(33)+f(220))"
console.log("Length=%s", js.value.length);
<textarea id="js" style="width:90%"></textarea>

<!-- Click on Run Code Snippet to see the code-->

  • Run the 77 byte version as a file:

    Raw ANSI color escapes in pasted source appear to be filtered out (sanitized?) before node's REPL prompt echoes or evaluates code, resulting in no flag being drawn.

  • Ansi 8-bit color codes were used because 24 bit codes were not effective in terminals tested.

  • Tested in linux terminal and Windows CMD.exe terminal. GitHub's bash terminal for windows used Cyan and Yellow instead of the colors specified.

  • The 3:2 aspect ratio is approximate and may vary according to the font metrics of the terminal font.

enter image description here


flag.js (66 bytes)

f=h=>`${h[0].repeat(78)}
`.repeat(26)
console.log(f`💙`+f`💛`)
  • Run from file in node and redirect stdout to a text file

      node flag > flag.txt
    
  • Load the text file in a browser with dark mode selected (preferably).

To preview run the following code snippet (it has an additional line to provide a "console.log" functions to mimic writing to stdout), full screen the snippet window and reduce page zoom as required to make the flag fit within the window.

console.log = s=> document.querySelector('code').textContent+=s;

f=h=>`${h[0].repeat(78)}
`.repeat(26)
console.log(f`💙`+f`💛`)
pre, code{height: 100%; width: 100%; background:black}
<pre><code></code></pre>

\$\endgroup\$
4
  • \$\begingroup\$ You can replace \n with the literal newline character to save 1 byte, since template literals allow for multiline strings \$\endgroup\$ Mar 24, 2022 at 0:56
  • \$\begingroup\$ @Samathingamajig Hi - and thanks again. I actually came across that when testing changing \x1b to ESC characters but "fixed" it to go back to \n without realizing it would be valid(LOL). Now at 77 bytes, best... \$\endgroup\$
    – traktor
    Mar 24, 2022 at 1:43
  • \$\begingroup\$ "This now needs to be saved to a file in order to run with Node - the linefeed was not parsed correctly when pasted after the REPL prompt." It works for me when I just paste it. I guess it depends on the terminal/OS (the 83 byte version) \$\endgroup\$ Mar 24, 2022 at 2:05
  • \$\begingroup\$ @Samathingamajig Interesting: I've had it error using CMD.exe terminal but it worked when retested. Ming64 terminal (GitHub"s bash terminal for windows) failed once but worked after a retry. I'd say "results may vary" without being sure if it was me or the computer. Both of these terminals (or REPL code) filter out the ANSI color escape sequences from input when pasting the 77 byte code into the terminal, without echoing the sequences on the command line or using them during evaluation. \$\endgroup\$
    – traktor
    Mar 24, 2022 at 3:26
4
\$\begingroup\$

Haskell, 83 81 69 bytes

My first haskell submission.

This code defines a function that prints the flag to stdout using ansi escape codes.

n?s=[1..n]>>s
putStr$"43">>= \c->13?(78?("\27[4"++c:"m \27[m")++"\n")

enter image description here

\$\endgroup\$
4
\$\begingroup\$

PHP Imagick (209 chars)

Draw and output the image to the browser (Imagick is a native PHP extension).
No line break are needed for execution :

header('Content-Type:image/png');
$d=new\ImagickDraw();
$d->setFillColor('#0057B7');
$d->rectangle(0,0,990,330);
$i=new\Imagick();
$i->newImage(990,660,'#FFD700');
$i->setImageFormat('png');
$i->drawImage($d);
echo$i;

Programming Golf Ukrainian Flag with PHP Imagick

\$\endgroup\$
4
\$\begingroup\$

Ly, 39 bytes

99*:3*&s*:[r009r,]+[r990r,]+'Po9lf2*f3r

Try it online!

This code pushes RGB values compatible with PPM ASCII formatted image into the stack, then creates a minimum PPM header before exiting. The numbers on the stack are printed automatically when the code exits.

Generate width/height numbers, figure out "half the pixels" count

 99*         - Push "81" on stack (will be 1/2 height, 1/3 width)
    :        - Duplicate top of stack
     3*      - Multiple by 3 (yields width)
       &s    - Save stack to backup (needed later for header)
         *   - Multiple to get "half the pixels"
          :  - Duplicate top of stack

Generate blue pixels, pushed onto the stack

 [      ]+  - Loops one per pixel
  r         - Reverse stack
   009      - Push "0 0 9" onto stack
      r     - Reverse to get pixel count back to top
       ,    - Decrement counter

Generate yellow pixels, pushed onto the stack

 [      ]+  - Loops once per pixel
  r         - Reverse stack
   990      - Push "9 9 0" onto stack
      r     - Reverse to get pixel count back to top
       ,    - Decrement counter

Print PPM header

 'Po          - Print "P"
    9         - Push 9 as "max RGB value"
     l        - Load "width and height" from backup cell
      f       - Flip top two entries (width, height)
       2*     - Double to get the height
         f    - Flip top two entries back
          3   - Push 3, the "PPM image type"
           r  - Reverse stack, stack prints automatically
\$\endgroup\$
4
\$\begingroup\$

BBC BASIC, 72 bytes

V. 19,0,16,255,215|25,97,78;26;25,4,78;27;19,0,16,0,87,183;25,97,-78;26;

Output

Output

\$\endgroup\$
4
\$\begingroup\$

Python + Pygame (122 bytes)

import pygame.display as p
s=p.set_mode((78,52))
s.fill((0,87,183),(0,0,78,26))
s.fill((255,215,0),(0,26,78,26))
p.flip()

Briefly flashes the flag on the screen before exiting.

enter image description here

\$\endgroup\$
4
\$\begingroup\$

C# (.NET Framework), 163 chars

Shorter version of Björn Larsson's answer.

void Draw(){var f=new Bitmap(78,52);for(int y=0;y<52;y++)for(int x=0;x<78;x++)f.SetPixel(x,y,Color.FromArgb(y>25?255:0,y>25?215:87,y>25?0:183));f.Save("f.bmp");}

Effective version with explanation:

using System.Drawing;

namespace Ukraine {
    internal class Program {
        static void Main() {
            // Create a bitmap.
            var f = new Bitmap(78, 52);

            // Iterate over the bitmap's pixels.
            for (int y = 0; y < 52; y++) {
                for (int x = 0; x < 78; x++) {
                    f.SetPixel(                  // Set the pixel...
                        x, y,                    // at the current x and y...
                        Color.FromArgb(
                            y > 25 ? 255 : 0,    // selecting the R value with a ternary expression...
                            y > 25 ? 215 : 87,   // selecting the G value with a ternary expression...
                            y > 25 ? 0 : 183)    // and selecting the B value with a ternary expression.
                        );
                }
            }

            // Save the bitmap.
            f.Save("f.bmp");
        }
    }
}

Produces an image in the exe's folder:

enter image description here

\$\endgroup\$
3
  • \$\begingroup\$ Welcome to Code Golf! One thing to note is that snippets are not allowed by our rules, so you would have to wrap this in a full program (all the Main stuff and whatnot). \$\endgroup\$
    – Seggan
    Jul 7, 2022 at 16:27
  • 1
    \$\begingroup\$ A function would also be allowed \$\endgroup\$
    – mousetail
    Jul 7, 2022 at 16:30
  • \$\begingroup\$ @Seggan C# supports top-level code nowadays. \$\endgroup\$
    – naffetS
    Sep 25, 2022 at 18:37
4
\$\begingroup\$

JavaScript (Node.js), 94 bytes

Prints a solid flag (or not quite, depending on your font) in the specified rgb colors.

for(i=1;i<4108;i++)process.stdout.write(i%79?`\x1b[38;2;${i<2054?'0;87;183':'255;215;0'}m█`:`
`)
\$\endgroup\$
4
\$\begingroup\$

Ruby with Shoes, 96 characters

Shoes.app(width:78,height:52){background rgb 0,87,183
stroke fill rgb 255,215,0
rect 0,26,78,52}

Sample output:

flag of Ukraina

\$\endgroup\$
4
\$\begingroup\$

FLTK, 153 characters

Function{}{}{Fl_Window{}{xywh{9 9 78 52}}{Fl_Box{}{xywh{0 0 78 26}box FLAT_BOX color 0x0057b7ff}Fl_Box{}{xywh{0 26 78 52}box FLAT_BOX color 0xffd700ff}}}

Ungolfed:

Function {} {} {
    Fl_Window {} {
        xywh {9 9 78 52}
    } {
        Fl_Box {} {
            xywh {0 0 78 26}
            box FLAT_BOX
            color 0x0057b7ff
        }
        Fl_Box {} {
            xywh {0 26 78 52}
            box FLAT_BOX
            color 0xffd700ff
        }
    }
}

Sample output:

flag of Ukraina

\$\endgroup\$
4
\$\begingroup\$

C (MSVC) + Win32, 106 bytes

r[4];p(c){FillRect(GetDC(0),r,CreateSolidBrush(c));}main(){*r=600;r[1]=200;p(12344064);r[3]=400;p(55039);}

Draws the flag onto the top window: enter image description here

\$\endgroup\$
4
\$\begingroup\$

Python (Thonny 4.0 REPL), 419 bytes

print("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAAC3CAMAAAAGjUrGAAAAD1BMVEUAW7v/1QAAVb+ln3n/2QAG3wIgAAAAzUlEQVR4nO3QsQGAMAzAsBT4/2b2eO0onaAZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACASx62ednmY5vD5qSclJNyUk7KSTkpJ+WknJSTclJOykk5KSflpJyUk3JSTspJOSkn5aSclJNyUk7KSTkpJ+WknJSTclJOykk5KSflpJyUk3JSTspJOSkn5aSclJNyUk7KSTkpJ+WknJSTclJOykk5KSflpJyUk3JSTspJOSkn5aSclJNyUk7KSTkpJ+WknJSTclJOykk5KSflpH7zk2pa0LCuDAAAAABJRU5ErkJggg==")

Longer than a standard answer but ok. Thonny supports printing images if they’re in base64 form.

enter image description here

\$\endgroup\$
1
  • \$\begingroup\$ Your first answer is valid, if a little long (although I'd change the title to something like "Python 3 (Thonny REPL), 419 bytes"; your second answer isn't valid as it's not actually a program which outputs the image. (And the image isn't correctly formatted anyway.) \$\endgroup\$
    – Ginger
    Dec 27, 2022 at 17:10
4
\$\begingroup\$

Nibbles, 26.5 bytes (53 nibbles)

"P3 78 52 255 ".\`\~`D256^2028$ FFD7000057B7

Outputs a plain PPM file of 78x52 pixels, depicting the Ukrainian flag using exact colours.

"P3 78 52 255 "         # prepend the string "P3 78 52 255 " onto:
     `D256              # extract data in base 256,
  `\~                   # and divide into 2 chunks,
 \                      # reverse them,
.                       # and map over each
          ^2028$        # repeating it 2028 times. 
FFD7000057B7            # The data.

enter image description here enter image description here

\$\endgroup\$
4
\$\begingroup\$

Pikchr, 52 51 48 bytes

up
box ht.25color-1fill gold
box same fill 22455

Output

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.32 76.32">
<path d="M2,74L110,74L110,38L2,38Z" style="fill:rgb(255,215,0);"></path>
<path d="M2,38L110,38L110,2L2,2Z" style="fill:rgb(0,87,183);"></path>
</svg>

Explanation

  • up: The objects will be laid out from bottom to top.
  • box: Draws a box (rectangle).
  • ht .25: The box will be 0.25 inches tall. The default box width is 0.75 inches, which gives us the desired ratio of 3:1.
  • color -1: The box will have no outline.
  • fill gold: The box will be colored using the standard HTML color gold, which happens to be the color of the yellow stripe.
  • box: Draws another box.
  • same: The box will inherit all properties from the previous object.
  • fill 22455: The number is 57B7 in hexadecimal, so the color of the box will be #0057B7.
\$\endgroup\$
4
\$\begingroup\$

Minecraft Function, 58 Bytes

fill 1 1 1 78 26 1 yellow_bed
fill 1 27 1 78 52 1 blue_bed

Creates the Ukrainian flag using blue and yellow beds. Go to the coordinates 0, 0, 0 and it should be visible. I recommend running it in a flat/superflat world with version 1.18 or later.

Image

\$\endgroup\$
4
\$\begingroup\$

Prism v0.2a, 5 bytes

Prism is a small esolang I developed in the last couple of days.

It's not (yet) available as a pre-compiled executable, so you'll have to compile it yourselves to test this program.

Anyway, since 80% of the bytes in this program aren't printable characters, here is a hexdump of the program, made with xxd -g 1:

00000000: c0 aa 58 02 9e                                   ..X..

The program does two things:

  1. It resizes the canvas and the window from the default 256x256 to 256x170;
  2. It draws two horizontal stripes with 4-bit colors 9 and e.

As of version 0.2a, Prism only supports 4-bit colors, and thus I picked the two aforementioned colors as they were the closest available.

You can run this program (or any other Prism program) by using prism draw <filename>.

result

\$\endgroup\$
4
\$\begingroup\$

Actionscript 3, 94 89 bytes

Here comes our national flag in Actionscript and this is my first submission in this language, since my usual languages have been already taken. The code throws an error, but it will compile a SWF anyway. I took the inspiration from an answer to another challenge.

  • spared 5 bytes by replacing hexadecimal 0xe0057B7 for 22455 and 0xeffd700 for 16766720.

var g=graphics,f=g.beginFill,r=g.drawRect;f(22455);r(0,0,99,33); f(16766720);r(0,33,99,33)

Flag 66 x 99 px

Glory to Ukraine!

\$\endgroup\$
2
  • 1
    \$\begingroup\$ Glory to Ukraine indeed! 🇺🇦 \$\endgroup\$ Apr 17 at 11:47
  • 1
    \$\begingroup\$ @The Empty String Photographer the usual response is "Heroiam Slava!" / "Glory to the heroes!" \$\endgroup\$ Apr 17 at 12:06
3
\$\begingroup\$

HTML, 200 Bytes

<mark style="background-color:blue"id="a"></mark><mark id="b"></mark><script>document.getElementById("a").innerHTML=document.getElementById("b").innerHTML=(" ".repeat(78)+"<br>").repeat(26)</script>

Those poor Ukrainians... 😔

You should click on the link to render the full page after running the code.

Prints the Ukrainian flag (although it's missing a trident unfortunately) using <mark> tags to render the colours. Uses a script to insert the text. Uses U+2001 EM QUAD as a blank character.

\$\endgroup\$
1
  • \$\begingroup\$ You can use background in place of background-color. \$\endgroup\$
    – corvus_192
    Sep 10, 2023 at 16:57
2
\$\begingroup\$

Chipmunk BASIC, 116 bytes

Chipmunk Basic v368b2.02 on MacOS. This fun wee lang adjusts RGB values by a factor0.392157.

graphics 0
graphics color 0,34,72
graphics fillrect 0,0,132,44
graphics color 100,84,0
graphics fillrect 0,44,132,88
\$\endgroup\$
2
\$\begingroup\$

Uiua, 34 bytes

&ims÷255⊂∩(↯26_78_3)0_87_183 255_215_0

Try it in the pad!

Explanation

0_87_183 255_215_0: Push the RGB values on the stack

∩(…): Apply this function to both values:

  • ↯26_78_3: Reshape them so they become stripes

&ims÷255⊂: Join them together and divide by 255, then show as an image

\$\endgroup\$
1
\$\begingroup\$

SVG - Scalable Vector Graphics. 151 bytes

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><path d="M0 0H3V1H0ZM0 1H3V2H0Z" fill="#005BBB"/><path d="M0 1H3V2H0Z" fill="#FFD500"/></svg>

Try it online

\$\endgroup\$
1
\$\begingroup\$

Python 3, 152 bytes

A repurposing of my answer to the Pride flag challenge, with some small improvements to the visuals.

from curses import*
s=initscr();start_color();y=1
for x in[12,11,0]:w=newwin(13,78,~-y*13,0);init_pair(y,1,x);w.bkgd(' ',color_pair(y));w.refresh();y+=1

The flag of Ukraine, in a terminal window

\$\endgroup\$
0
\$\begingroup\$

JSL (JMP Scripting Language), 110 bytes

NewWindow("",Graph(FillColor({1,43/51,0});Rect(0,33,99,66,1);FillColor({0,29/85,183/255});Rect(0,66,99,99,1)))

enter image description here

\$\endgroup\$
1 2
3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.