Happy Birthday, Finland!

Question

Introduction

As is known, in 2017, Finland celebrates its 100 years of independence. To mark the occasion, it is your job to produce a Finnish flag for everyone's enjoyment.

Challenge

Create a program or a function that produces the flag of Finland (the grey border is there for presentation purposes only):

Flag specifications

• The ratio of the flag is 18:11, with the cross being 3 units thick, giving a horizontal ratio set of 5:3:10 and a vertical ratio set of 4:3:4.
• The picture must be at least 180 x 110 pixels in size, or in case of ASCII art, 90 x 55 characters.
• There is no official RGB colour for the blue, but use the closest approximation of (0, 53, 128). If your system doesn't support RGB values, use blue.
• For the white colour, use RGB (255, 255, 255) or white.

Not so fast

As drawing the Finnish national flag would be simpler than last year's Icelandic challenge, we'll have to ramp up the difficulty a bit. Given that Finland's Independence Day is on 6 December, the decimal number 100 must appear somewhere on the flag when the date in Finland (UTC+02:00) is 2017-12-06 or later (your code should not assume that the machine it's running on is set to a particular timezone). Before the date, the number must not be there. The number must be printed in black (RGB (0, 0, 0) or black) but its placement and font parameters are up to you.

An example of such a render (again, ignore the border):

For testing purposes, it would be nice to include two additional versions of your solution, one with a fixed date in the past and one in the future.

Rules

Standard loopholes are forbidden, as are built-in flag images/libraries. Also, your code must not take any input.

Finns don't like small talk, and this is code-golf, so don't waste characters!

Answer 1

C (Windows), 361 bytes

#import<time.h>
#import<windows.h>
C(x){SetConsoleTextAttribute(GetStdHandle(-11),x);}F(I,N,l,a,n,d)time_t n;struct tm*d;{system("mode 90,65");time(&n);d=gmtime(&n);n=d->tm_year<<24|d->tm_mon<<16|d->tm_mday<<8|d->tm_hour;for(a=l=I=15;I++<70;a=l=I<35|I>49?15:9)for(N=n>1963656468&I<17?C(240),printf("100"):0;N++<90;a=N-25?a:9,a=N-40||l==9?a:15)C(a),putchar(70);}

Unrolled:

#import <time.h>
#import <windows.h>

C(x)
{
    SetConsoleTextAttribute(GetStdHandle(-11),x);
}

F(I,N,l,a,n,d) time_t n;struct tm*d;
{
    system("mode 90,65");

    time(&n);
    d = gmtime(&n);
    n = d->tm_year<<24 | d->tm_mon<<16 | d->tm_mday<<8 | d->tm_hour;

    for(a=l=I=15; I++<70; a=l=I<35|I>49?15:9)
        for(N=n>1963656468&I<17?C(240),printf("100"):0; N++<90; a=N-25?a:9,a=N-40||l==9?a:15)
            C(a), putchar(70);
}

Output:

Output when UTC time >= 2017-12-05-22-00:

Add the following in the code after d=gmtime(&n); to try it:

d->tm_year = 117;
d->tm_mon = 11;
d->tm_mday = 5;
d->tm_hour = 21;

Answer 2

PHP + SVG(HTML5), 147 137 123 bytes

SVG code by Neil

https://codegolf.stackexchange.com/a/149850/66061

<svg><path d=180v110 fill=#fff></path><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0 fill=#005580></path><?=time()<1512511200?:'<text x=9 y=15>100';

Update: Thanks to Shaggy for helping me save 10 bytes.

<svg><path d=180v110 fill=#fff /><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0 fill=#005580 /><?=time()<1512511200?:'<text x=9 y=15>100';

Update 2: Smart idea by Ismael Miguel, thanks for saving 14 bytes

<svg><path d=180v110 /><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0 fill=#005580 /><?=time()<1512511200?:'<text y=19>100';

Normal

After 6th Dec +2 hours

Answer 3

Röda, 252 250 bytes

{s={|w,h|[` width="$w" height="$h" `]}r=`><rect`f=`" fill="#003580"/`
[`<svg`,s(18,11),r,s(18,11),`fill="#fff"/`,r,s(18,3),`y="4$f`,r,s(3,11),`x="5$f>`]
[`<text y="9" font-size="2">100</text>`]if{}|[[exec("date","+%s")]&"">="1512511200
"]
[`</svg>`]}

Try it online!

Answer 4

C#, 407 400 277 bytes

Weird how ForegroundColor =0 is allowed

Saved 1 byte thanks to TuukkaX

Saved 67 bytes thanks to Adam

()=>{for(int x=0,y;x<90;x++)for(y=0;y<55;y++){BackgroundColor=(ConsoleColor)15;if(x>24&x<41|(y>19&&y<36))BackgroundColor=(ConsoleColor)9;SetCursorPosition(x,y);Write(' ');}if(new DateTime(2017,12,5,22,0,0)<DateTime.UtcNow){SetCursorPosition(1,1);ForegroundColor=0;Write(100);}}

ungolfed for testing:

using System;
using static System.Console;
class P
{
    static void Main()
    {
        Action func = () =>
        {
            for (int x = 0,y; x < 90; x++) for (y=0; y < 55; y++)
                {
                    BackgroundColor = (ConsoleColor)15;
                    if (x > 24 & x < 41 | (y > 19 && y < 36))
                        BackgroundColor = (ConsoleColor)9;
                    SetCursorPosition(x, y);
                    Write(' ');
                }

            if (new DateTime(2017, 12, 5, 22, 0, 0) < DateTime.UtcNow)
            {
                SetCursorPosition(1, 1); ForegroundColor =0; Write(100);
            }
        };
        func();
        ReadLine();
    }
}

for testing 100:

using System;
using static System.Console;
class P
{
    static void Main()
    {
        Action func = () =>
        {
            for (int x = 0,y; x < 90; x++) for (y=0; y < 55; y++)
                {
                    BackgroundColor = (ConsoleColor)15;
                    if (x > 24 & x < 41 | (y > 19 && y < 36))
                        BackgroundColor = (ConsoleColor)9;
                    SetCursorPosition(x, y);
                    Write(' ');
                }

            if (new DateTime(2017, 12, 2, 22, 0, 0) < DateTime.UtcNow)
            {
                SetCursorPosition(1, 1); ForegroundColor =0; Write(100);
            }
        };
        func();
        ReadLine();
    }
}

Answer 5

Python 2, 247 246 230 210 189 bytes

import time
print'P3',180,110,255
w,b='255 '*3,'0 52 128 ';B=['0 '*3,w][time.gmtime()<(2017,12,5,22)]
a=w*40+b*30+w*100
x=w*10+a;y,z=w+B+w+B*3+w+B*3+a,(w+B)*5+a
print y+z+y+x*37+b*5400+x*40

Try it online!

Prints a .ppm image:

Normal flag

Flag with 100

Answer 6

Mathematica, 129 bytes

If[AbsoluteTime@Date[]<3721507200,s="",s=100];Graphics@{s~Text~{9,9},RGBColor[0,.2,.5],{0,4}~(R=Rectangle)~{18,7},{5,0}~R~{8,11}}

before..

after..

you can always test it on Wolfram Sandbox
(paste the code and hit Shift-Enter)

Answer 7

Processing.org / Java 191 188 bytes

-3 bytes thanks to KevinCruijssen

import java.util.*;void setup(){size(180,110);background(-1);fill(0);if(new Date().getTime()>=15125256e6D)text("100",0,9);noStroke();scale(10);fill(#003580);rect(5,0,3,11);rect(0,4,18,3);}

Answer 8

Excel VBA, _{120 118} 117 Bytes

Anonymous VBE immediate window function that takes no input and outputs the the Finnish flag and if Finland is greater than 100 years old a 100 on that flag. This is done with respect to the Easter Timezone of the United States, as there is no way for Excel or Excel VBA to determine timezone without add-ins or accessing the internet.

Cells.RowHeight=48:Cells.Interior.Color=-1:[F1:H11,A5:R7].Interior.Color=8402176:If Now>=#12/5/17 19:0#Then[B2]=100

Output

If Finland is younger than 100 years old

If Finland is older than 100 years old

-2 Byte for changing If #12/5/17 19:00#<=Now Then[B2]=100 to If Now>=#12/5/17 19:0#Then[B2]=100

-1 Byte for use of Cells rather than [A1:R11]

Answer 9

Python 3, 143 141 135 bytes

Uses ANSI escape for colors, uses five spaces or " 100 " as a colored string so that I don't need to specially print "100" somewhere on the flag. Length 5 because of width, because 90/5 == 90//5. The string being used is getting defined in row 1. Then we iterate 55 round (height), on every iteration v is set to string with color [Blue, BrightWhite] and selected index is boolean row<20 or r>34. We multiply that result by 5 again (width dimensions: 25:15:50 so total width is 90). Then we print out v + Blue + Blue + Blue + v + v + Black where v is either Blue or BrightWhite. To clarify printing: width of v is 25 chars, width of Blue (e%44*3) is 15 and width of v*2 is 50. 25+15+50 is 90 which is the width and follows the dimensions required in the task! Quite messy summary but I guess it's better than nothing.

import time;e="\033[30;%dm "+[" "*4,"100 "][time.time()>1512511200]
for r in range(55):v=e%[107,44][19<r<35]*5;print(v+e%44*3+v*2+e%40)

Answer 10

MATLAB, 133 130 123 bytes

3 10 bytes sabed thanks for @flawr!

r=1:180;r(51:80)=0;imshow(r(11:120)'*r,[0 .2 .5;1 1 1])
if datenum(datetime('now','T','UTC+2'))>=737035 text(9,9,'100'),end

This uses [0, 51, 128] for the blue color. The size of the image is 180×110 pixels.

Sample run:

Sample run with the text (changing 737035 to 0 in the code so that the text is shown on any day):

Answer 11

JavaScript (ES5) + SVG(HTML5), 189 179 bytes

document.write('<svg><path d=M0,0h180v110H0z fill=#fff /><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0Z fill=#005580 />'+(Date.now()<15125112e5?'':'<text x=0 y=30 fill=#000>100'))

<body color=grey bgcolor=silver>

(HTML to show that the colour requirements are being met.) Edit: Saved 10 bytes thanks to @Shaggy. Outputs:

<body color=grey bgcolor=silver>

<svg><path d=M0,0h180v110H0z fill=#fff /><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0Z fill=#005580 />

<body color=grey bgcolor=silver>

<svg><path d=M0,0h180v110H0z fill=#fff /><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0Z fill=#005580 /><text x=0 y=30 fill=#000>100

Answer 12

Python 3 with Pillow, 213 212 211 characters (Unix) and 217 216 characters (Portable)

This is the Unix version. I realized after posting that the time returned by time() does not necessarily have its epoch on 1 Jan 1970, so it is not necessarily portable.

b=8402688;from PIL import Image,ImageDraw as d
j=Image.new('RGB',(180,110),~1);r=d.Draw(j);R=r.rectangle
R([50,0,79,109],b);R([0,40,180,69],b);import time
r.text((9,9),'100'*(time.time()>=0x5a273300),0)
j.show()

This is the portable code, 4 bytes more, it uses gmtime with tuple comparison so it should work reliably on Windows too.

import time
from PIL import Image,ImageDraw as d
b=8402688
j=Image.new('RGB',(180,110),~1)
r=d.Draw(j)
R=r.rectangle
R([50,0,79,109],b)
R([0,40,180,69],b)
r.text((9,9),'100'*(time.gmtime()>(2017,12,5,22)),0)
j.show()

The images are displayed in a window. Really difficult to make it consume less characters. Even time.time returns a float so >0x5a273299 would not be quite so correct, or >0x5a273300 would be off by a microsecond.

Answer 13

Java 342 368 361 321 317 (299+18) bytes

Golfed

import java.awt.*;()->new Frame(){{setBackground(Color.WHITE);setUndecorated(0<1);setSize(180,110);setVisible(0<1);}public void paint(Graphics g){g.setColor(new Color(0,53,128));g.fillRect(50,0,30,110);g.fillRect(0,40,180,30);g.setColor(Color.BLACK);if(System.currentTimeMillis()>15125112e5)g.drawString("100",9,9);}}

Ungolfed

import java.awt.*;
() -> new Frame() {
    {
        setBackground(Color.WHITE);                     //Color Objects ARE just RGB values
        setUndecorated(0 < 1);                          //Get's ride of title bar
        setSize(180, 110);             
        setVisible(0 < 1);
    }
    public void paint(Graphics g) {
        g.setColor(new Color(0, 53, 128));              //The special blue color
        g.fillRect(50, 0, 30, 110);
        g.fillRect(0, 40, 180, 30);
        g.setColor(Color.BLACK);
        if (System.currentTimeMillis() > 15125112e5)    //Time Condition
            g.drawString("100", 9, 9);
    }

Result

Credits

40 bytes saved by Olivier Grégoire for using lambda.
4 bytes saved by Kevin Cruijssen for Long formatting.
2 bytes saved by user902383 for hex formatting.

Answer 14

Tcl/Tk, 135 bytes

Must be run in the interactive shell

gri [can .c -bg #FFF]
lmap C {"52 2 82 112" "2 42 182 72"} {.c cr r $C -f #003580 -w 0}
if [clock se]>1512518520 {.c cr t 19 9 -te 100}

Before 2017/12/06 02:00 GMT

After 2017/12/06 02:00 GMT

Answer 15

bash and imagemagick, 135

((`date +%s`>1512511199))&&x=100
convert -size 150x80 xc: -background \#003580 -splice 30x30+50+40 -draw "fill black text 9,9 '$x'" x:

Answer 16

vim, 147

I really like this challenge ☺. © is escape.

sy on
set ft=c
hi Normal ctermfg=4 ctermbg=7
hi Number ctermfg=0 ctermbg=7
norm 90i ©26|15r█Y40pMVr█Y14Pk
if localtime()>1512511199
norm R100 

Answer 17

bash, 198

p()(printf "%-$1b$3" "\e[$2m")
r()(for i in `seq $1`;{ $2;})
a()(p 31 107
p 20 44
p 56 30\;107 "${1:-   }"
p 0 0 '
')
b()(p 95 44
p 0 0 '
')
r 20 a
r 15 b
r 19 a
((`date +%s`>1512511199))&&a 100||a

Answer 18

Imperative Tampio, 239 bytes (non-competing)

Kun iso sivu avautuu,se näyttää tekstin"<svg><path d=180v110 /><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0 fill=#005580 />"ja,jos nykyinen aika millisekunteina on suurempi kuin 1512511200000,niin se näyttää tekstin"<text y=19>100".

Kun iso sivu avautuu,se näyttää tekstin"<svg><path d=180v110 /><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0 fill=#005580 />"ja,jos nykyinen aika millisekunteina on suurempi kuin 1512511200000,niin se näyttää tekstin"<text y=19>100".

Online version

Translation:

When the big page opens, it will show the text "<svg><path d=180v110 /><path d=M0,40h50V0h30v40h100v30H80v40H50V70H0 fill=#005580 />" and, if the current time in milliseconds is greater than 1512511200000, it will show the text "<text y=19>100".

SVG was taken from this answer by th3pirat3 (and Neil, appearently).

This program is written in a new version of Tampio I have been working on. Those of you who know Finnish can see that it is almost readable. I marked the answer as non-competing because this language was published after this challenge.

To run this program, either go to the online version above that contains the compiled JS version of the program or download the compiler from its Github page. To compile the program, run python3 tampio.py -p program.itp >program.html.

Tampio is not a golfing language by any measure, but due to the better svg code, it actually beat Röda... I was a little surprised.

Answer 19

HTML + CSS + Javascript, 339 bytes

<style>#f{width:180px;height:110px;position:relative}.b{background-color:#003580;position:absolute}.v{left:27.78%;width:16.67%;height:100%}.h{top:36.36%;height:27.27%;width:100%}</style><div id="f"><div class="b v"></div><div class="b h"></div></div><script>if(Date.now()>1512525600000)document.getElementById('f').innerHTML+=100;</script>

Here's the same solution trimmed down to 260 bytes, which assumes your viewing port has the proper 18:11 ratio.

<style>.b{background-color:#003580;position:absolute}.v{left:27.78%;width:16.67%;height:100%}.h{top:36.36%;height:27.27%;width:100%}</style><div class="b v"></div><div class="b h"></div><script>if(Date.now()>1512525600000)document.body.innerHTML+=100;</script>

You can knock a 0 off of the timestamp in either solution to see the "100" appear.

Answer 20

HTML + Javascript, 329 bytes

I shamelessly stole the date-checking part from @jstnthms. Basically I just write crude html table with correct row/col ratios, th being the blue parts. Tested on IE and Chrome, also at mee.fi -site.

<body onload="h=[4,3,4];w=[5,3,10];m=50;s='<style>*{border-spacing:0;padding:0;}th{background:#003580;}</style><table>';for(y in h){s+='<tr height='+(m*h[y])+'>';for(x in w){c=(y==1||x==1)?'h':'d';s+='<t'+c+' width='+(m*w[x])+'>'+(x+y<1&&Date.now()>15125112e5?'100':'')+'</t'+c+'>';}s+='</tr>';}s+='</table>';document.write(s);">

Answer 21

Perl 5, 139 bytes

($w,$b,$r)=map"\e[${_}m","47;30",44,0;$_=$w.$"x25 .$b.$"x15 .$w.$"x50 .$r.$/;$_=$_ x12 .s/7/4/gr x9 .$_ x12;time<1512511200||s/   /100/;say

to be launched

perl -E '($w,$b,$r)=map"\e[${_}m","47;30",44,0;$_=$w.$"x25 .$b.$"x15 .$w.$"x50 .$r.$/;$_=$_ x12 .s/7/4/gr x9 .$_ x12;time<1512511200||s/   /100/;say'

ratio was changed because of character ratio height/width = 1.66 (5/3) otherwise with original ratio :

($w,$b,$r)=map"\e[${_}m","47;30",44,0;$_=$w.$"x25 .$b.$"x15 .$w.$"x50 .$r.$/;$_=$_ x20 .s/7/4/gr x15 .$_ x20;time<1512511200||s/   /100/;say

Answer 22

Racket 6.10 with 2htdp/image, 202 bytes

(let*([w 180][h 110][p(λ(w h x y o)(place-image(rectangle w h'solid(color 0 53 128))x y o))][b(p w 30 90 55(p 30 h 60 55(empty-scene w h)))])(if(>(current-seconds)1512536400)(overlay(text"100"9'b)b)b))

Ungolfed:

(let* (
       [flag-width 180]
       [flag-height 110]
       [place-rect (λ (width height x-pos y-pos other-pos)
                     (place-image
                      (rectangle width height 'solid (color 0 53 128))
                      x-pos y-pos other-pos))]
       [flag (place-rect
              flag-width 30 90 55
              (place-rect
               30 flag-height 60 55
               (empty-scene flag-width flag-height)))]
       )
  (if (> (current-seconds) 1512536400)  ; If Finland is 100 years old
      (overlay (text "100" 9 'b) flag)  ; add "100" to the flag
      flag))                            ; otherwise just the flag

Answer 23

Small Basic, 300 bytes

A Script that takes no input and outputs to the TextWindow object.

GraphicsWindow.BrushColor=0
If Clock.Year*10000+Clock.Month*100+Clock.Day>=20171206Then
GraphicsWindow.DrawText(0,0,"100")
EndIf
GraphicsWindow.Height=275
GraphicsWindow.Width=450
GraphicsWindow.BrushColor="#003580
GraphicsWindow.FillRectangle(0,100,450,75)
GraphicsWindow.FillRectangle(125,0,75,275)

Try it at SmallBasic.com! Requires IE/Silverlight

Output

Shown after the Finland's 100th independence day.

Answer 24

the previously made code has been golfed down to the following:

HTML, CSS and JavaScript, 1599 bytes

var d1=new Date(1917,11,6);
var d2=new Date();
var difference = d2.getFullYear()-d1.getFullYear();
if(difference===100 && d2.getDate()===d1.getDate() && d2.getMonth()===d1.getMonth()) {
 document.getElementById("bottom-right").innerHTML=d2.getFullYear()-d1.getFullYear();
}

#flag{
background-color: #FFF;
width: 540px;
height: 330px;
border: 6px solid gray;
margin: 10% auto;
}
.surround{
background-color: #003580;
width: 90px;
height: 120px;
margin: 0px 300px 0px 150px;
}
.middle{
background-color: rgb(0, 53, 128);
width: 540px;
height: 90px;
}

<head>
<title>Happy Birthday, Finland</title>
<link rel="stylesheet" type="text/css" href="decor.css">
</head>
<body>
<div id="flag"><div class="surround"></div><div class="middle"></div><div class="surround"></div></div>
<script type="text/javascript" src="date.js"></script>
</body>

Answer 25

JavaScript ES6, 532 bytes

Decided to try using a Base64 image to see how short I could get it. Not a winner, but interesting nonetheless.

document.write(`${Date.now()>1512525600000?'<i style=position:fixed>100</i>':''}<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAABuAQMAAAC0pqs4AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX///8ANYAaS5LoAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EMBRcAAPqLykEAAAAxSURBVEjHY2AAA/v///8zYAGj4qPio+KDWfw/VvBhVHxUfEiKD7b8NSo+Kj4qTrQ4AHKtsHq12fKCAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTEyLTA1VDIzOjAwOjAwKzAxOjAwkDJOKAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0xMi0wNVQyMzowMDowMCswMTowMOFv9pQAAAAASUVORK5CYI>`)

Answer 26

HTML + JavaScript, 247 bytes

<table cellspacing=0 cellpadding=0><tr height=40><td width=50><td width=30 bgcolor=003580><td width=100><tr height=30><td colspan=3 bgcolor=003580><tr height=40><td><td bgcolor=003580><td><script>Date.now()>15125112e5&&document.write(100)</script>