106
\$\begingroup\$

This year's UEFA Euro 2016 is over and besides a couple of negative headlines there has been a very positive surprise as well – the Iceland national football team. Let's draw their national flag.

Input

Well, obviously this challenge has no input.

Output

  • Draw the flag of Iceland in any applicable visual format of at least 100 x 72 pixels or 25 x 18 characters.
  • Save the output to a file or present it instantly – example formats are: images like png, jpg etc., vector graphics, draw on HTML canvas or even use non-whitespace characters for visualization.
  • Use these colors: blue: #0048e0, white: #ffffff and red: #d72828.
  • If your language doesn't support specific color values, use the standard values for red, blue and white from the ANSI color codes.
  • Draw the flag with the correct proportions, as shown in the figure below:

Boilerplate

  • You can write a program or a function. If it is an anonymous function, please include an example of how to invoke it.
  • This is so shortest answer in bytes wins.
  • Standard loopholes are disallowed.

Leaderboard

var QUESTION_ID = 85141; // Obtain this from the url
// It will be like https://XYZ.stackexchange.com/questions/QUESTION_ID/... on any question page
var ANSWER_FILTER = "!t)IWYnsLAZle2tQ3KqrVveCRJfxcRLe";
var COMMENT_FILTER = "!)Q2B_A2kjfAiU78X(md6BoYk";
var OVERRIDE_USER = 41859; // This should be the user ID of the challenge author.
var answers = [], answers_hash, answer_ids, answer_page = 1, more_answers = true, comment_page;function answersUrl(index) {return "https://api.stackexchange.com/2.2/questions/" +  QUESTION_ID + "/answers?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + ANSWER_FILTER;}function commentUrl(index, answers) {return "https://api.stackexchange.com/2.2/answers/" + answers.join(';') + "/comments?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + COMMENT_FILTER;}function getAnswers() {jQuery.ajax({url: answersUrl(answer_page++),method: "get",dataType: "jsonp",crossDomain: true,success: function (data) {answers.push.apply(answers, data.items);answers_hash = [];answer_ids = [];data.items.forEach(function(a) {a.comments = [];var id = +a.share_link.match(/\d+/);answer_ids.push(id);answers_hash[id] = a;});if (!data.has_more) more_answers = false;comment_page = 1;getComments();}});}function getComments() {jQuery.ajax({url: commentUrl(comment_page++, answer_ids),method: "get",dataType: "jsonp",crossDomain: true,success: function (data) {data.items.forEach(function(c) {if (c.owner.user_id === OVERRIDE_USER)answers_hash[c.post_id].comments.push(c);});if (data.has_more) getComments();else if (more_answers) getAnswers();else process();}});}getAnswers();var SCORE_REG = /<h\d>\s*([^\n,]*[^\s,]),.*?(-?\d+)(?=[^\n\d<>]*(?:<(?:s>[^\n<>]*<\/s>|[^\n<>]+>)[^\n\d<>]*)*<\/h\d>)/;var OVERRIDE_REG = /^Override\s*header:\s*/i;function getAuthorName(a) {return a.owner.display_name;}function process() {var valid = [];answers.forEach(function(a) {var body = a.body;a.comments.forEach(function(c) {if(OVERRIDE_REG.test(c.body))body = '<h1>' + c.body.replace(OVERRIDE_REG, '') + '</h1>';});var match = body.match(SCORE_REG);if (match)valid.push({user: getAuthorName(a),size: +match[2],language: match[1],link: a.share_link,});});valid.sort(function (a, b) {var aB = a.size,bB = b.size;return aB - bB});var languages = {};var place = 1;var lastSize = null;var lastPlace = 1;valid.forEach(function (a) {if (a.size != lastSize)lastPlace = place;lastSize = a.size;++place;var answer = jQuery("#answer-template").html();answer = answer.replace("{{PLACE}}", lastPlace + ".").replace("{{NAME}}", a.user).replace("{{LANGUAGE}}", a.language).replace("{{SIZE}}", a.size).replace("{{LINK}}", a.link);answer = jQuery(answer);jQuery("#answers").append(answer);var lang = a.language;if (! /<a/.test(lang)) lang = '<i>' + lang + '</i>';lang = jQuery(lang).text().toLowerCase();languages[lang] = languages[lang] || {lang: a.language, user: a.user, size: a.size, link: a.link, uniq: lang};});var langs = [];for (var lang in languages)if (languages.hasOwnProperty(lang))langs.push(languages[lang]);langs.sort(function (a, b) {if (a.uniq > b.uniq) return 1;if (a.uniq < b.uniq) return -1;return 0;});for (var i = 0; i < langs.length; ++i){var language = jQuery("#language-template").html();var lang = langs[i];language = language.replace("{{LANGUAGE}}", lang.lang).replace("{{NAME}}", lang.user).replace("{{SIZE}}", lang.size).replace("{{LINK}}", lang.link);language = jQuery(language);jQuery("#languages").append(language);}}
body { text-align: left !important}#answer-list {padding: 10px;width: 290px;float: left;}#language-list {padding: 10px;width: 290px;float: left;}table thead {font-weight: bold;}table td {padding: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/Sites/codegolf/all.css?v=617d0685f6f3"><div id="answer-list"><h2>Leaderboard</h2><table class="answer-list"><thead><tr><td></td><td>Author</td><td>Language</td><td>Size</td></tr></thead><tbody id="answers"></tbody></table></div><div id="language-list"><h2>Winners by Language</h2><table class="language-list"><thead><tr><td>Language</td><td>User</td><td>Score</td></tr></thead><tbody id="languages"></tbody></table></div><table style="display: none"><tbody id="answer-template"><tr><td>{{PLACE}}</td><td>{{NAME}}</td><td>{{LANGUAGE}}</td><td><a href="{{LINK}}">{{SIZE}}</a></td></tr></tbody></table><table style="display: none"><tbody id="language-template"><tr><td>{{LANGUAGE}}</td><td>{{NAME}}</td><td><a href="{{LINK}}">{{SIZE}}</a></td></tr></tbody></table>

If you can't find your answer, format your language and byte count as explained in the Leaderboard's "Info Section".


This challenge is inspired by Draw the national flag of france.

\$\endgroup\$
  • 19
    \$\begingroup\$ Far more challenging would be the flag of my country, who also did a lot better than expected in the Euros this year - Wales. :-) \$\endgroup\$ – Gareth Jul 11 '16 at 10:54
  • 23
    \$\begingroup\$ @Gareth I'm looking forward to a waterproof specification of the dragon. ;) \$\endgroup\$ – Martin Ender Jul 11 '16 at 11:04
  • 4
    \$\begingroup\$ It looks like the blue in the above image is darker than the actual #0048e0 \$\endgroup\$ – Luis Mendo Jul 11 '16 at 12:32
  • 10
    \$\begingroup\$ @MartinEnder Does carving it on a stone tablet count? That's waterproof. \$\endgroup\$ – immibis Jul 12 '16 at 11:11
  • 5
    \$\begingroup\$ @MartinEnder Mathematica will have one. \$\endgroup\$ – gcampbell Jul 12 '16 at 18:57

79 Answers 79

4
\$\begingroup\$

GLSL, 266 265 bytes (non-competing)

Just for fun!

Only input it takes is the uniform which is the resolution of the texture it draws to. Needs an existing OpenGL context. The function r masks a rectangular area. The colors and the proportions are a bit off but looks believable.

#define r(p,w,h)step(abs(p.x),w)*step(abs(p.y),h)
uniform vec2 R;void main(){vec2 p=-1.+2.*gl_FragCoord.xy/R;p.y*=R.y/R.x*1.39;vec2 q=p;p.x+=.3;p=mod(p,2.)-1.;gl_FragColor.rgb=mix(mix(vec3(.83,.15,.15),vec3(1.),r(p,.9,.85)),vec3(0.,.28,.95),r(p,.8,.7))*r(q,1.,1.);}
\$\endgroup\$
  • 1
    \$\begingroup\$ Can you do #define r(p,w,h)step(abs(p.x),w)*step(abs(p.y),h)? \$\endgroup\$ – Erik the Outgolfer Jul 13 '16 at 9:49
  • \$\begingroup\$ Yes that works! Thank you! \$\endgroup\$ – Gábor Fekete Jul 13 '16 at 10:14
  • \$\begingroup\$ codegolf.stackexchange.com/a/85518/6485 — you might want to look at this answer (it's also in GLSL but even smaller) \$\endgroup\$ – Sarge Borsch Jul 16 '16 at 15:11
  • \$\begingroup\$ Thanks, I could help to save some bytes on that code. My solution works in a general GLSL context, his on shadertoy which has uniforms defined and has a change in the main function to work with arguments. \$\endgroup\$ – Gábor Fekete Jul 16 '16 at 16:30
4
\$\begingroup\$

PowerShell v2+, 379 340 289 286 bytes

nal n New-Object
Add-Type -A *.Dr*g,S*ms
$x='$g.FillRectangle((n Drawing.SolidBrush '
($f=n Windows.Forms.Form).Add_paint({$g=$args[1].Graphics;"$x'#0048e0'),0,0,100,72);$x white),28,0,16,72);$x white),0,28,100,16);$x'#d72828'),32,0,8,72);$x'#d72828'),0,32,100,8)"|iex})
$f.ShowDialog()

Linebreaks and semicolons count the same, so linebreaks left in for clarity. ;-)

So, drawing in PowerShell is not its strong suit -- it needs to use lengthy .NET assembly imports and GDI+ function calls.

Saved 39 bytes saved thanks to TessellatingHeckler's answer, and another 51 bytes thanks to Joey's impressive golfing commentary. Thanks to them both!

We start with creating a New-Alias n and assign it New-Object. We can thus reference just n instead of New-Object elsewhere in the program. Next is the import calls, with wildcards -- we're importing System.Drawing and System.Windows.Forms. We then create a variable $x that we use for several repeated calls in the future, so we're not needing to type it out every time.

The next line is the meat-and-potatoes of the program. We start with setting $f as a new Windows.Forms.Form and immediately call the Add_paint() routine on it.

Inside the paint routine, the first line is to create our graphics component, $g, that we'll use as our canvas. The next line is actually a constructed string that we pass to iex (similar to eval) so that we can leverage the $x variable from above. We're simply drawing the blue background, then two white rectangles, followed by two red rectangles. We adjust the values appropriately each time and pipe it to the Invoke-Expression.

The final line simply shows the dialog form as we've drawn it above.

Iceland Flag

Note that since we're creating a form object, and PowerShell is all about the pipeline, closing the pop-up form will pass along a System.Enum.DialogResult object of Cancel, since that's technically what the user did. Since we're not capturing or otherwise doing anything with that result, the word Cancel will be displayed to STDOUT when the program concludes, as it was left on the pipeline. That can be suppressed by adding >$a to the end of the last line, if so required, so the output redirects into a throwaway variable.

\$\endgroup\$
  • \$\begingroup\$ If you pinch the start of my script here: codegolf.stackexchange.com/a/59110/571 - you can drop to a single Add-Type call, and reuse the same string for adding the System.Windows.Forms type and creating the object. \$\endgroup\$ – TessellatingHeckler Jul 12 '16 at 0:27
  • \$\begingroup\$ @TessellatingHeckler Oh, that's excellent. I tweaked it around a little bit more and squeezed a few additional bytes out. Additionally, dropped the height/width setting of the form - the default (at least v4 on Win8.1) seems fine. \$\endgroup\$ – AdmBorkBork Jul 12 '16 at 12:39
  • \$\begingroup\$ @Joey Wow, thanks for the massive golf. I left the nal in so it's for v2+, so it's at 289 now. \$\endgroup\$ – AdmBorkBork Jul 15 '16 at 12:54
  • \$\begingroup\$ @Joey True, but if I surround it in quotes or prepend two grave accents, it's still two bytes each. Saved the quotes for white, though. \$\endgroup\$ – AdmBorkBork Jul 15 '16 at 13:51
  • \$\begingroup\$ @AdmBorkBork the Add-Type can be shortened to Add-Type -A S*ms \$\endgroup\$ – root Jul 9 '17 at 1:34
4
\$\begingroup\$

Python Turtle, 176 bytes

Another Python Turtle implementation but this time based on stamping instead of drawing:

from turtle import*
shape("square")
c=color
c("navy")
z=shapesize
z(18,25)
s=stamp
s()
c("white")
z(4,25)
s()
bk(70)
seth(90)
s()
c("#d72828")
z(2,18)
s()
home()
z(2,25)
done()

Using stamping, and not making it easily scalable, saves about 60 bytes of code.

enter image description here

The fun part is you can replace the "square" polygon option with the "turtle" polygon option in the shape() call and get an ecogroovy logo:

enter image description here

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

Excel VBA, 126 112 111 Bytes

This is an immediates window function that outputs to the Application.ThisWorkbook.Activesheet object

Golfed:

Cells.RowHeight=48:[A1:G7,A12:G18,L1:Y7,L12:Y18].Interior.Color=-2078720:[A9:Y10,I1:J18].Interior.Color=2631895

Ungolfed:

Sub MakeIcelandicFlag()
    Let Cells.RowHeight = 48
    Let Range("A1:G7,A12:G18,L1:Y7,L12:Y18").Interior.Color = -2078720
    Let Range("A9:Y10,I1:J18").Interior.Color = 2631895
End Sub

-14 Bytes by converting Range(/*Address*/) calls to [/*Address*/]calls

-1 Byte for converting Cells.ColumnWidth=2to Cells.RowHeight=48

Output:

I'm the Flag!

\$\endgroup\$
  • \$\begingroup\$ I think the red strips have to be 2 cells wide - see 5th bullet in question \$\endgroup\$ – MildlyMilquetoast Jan 5 '17 at 3:58
  • \$\begingroup\$ @Mistah Figgins it has been corrected, Thanks for the catch! \$\endgroup\$ – Taylor Scott Jan 5 '17 at 4:06
3
\$\begingroup\$

HTML+CSS, 276 258 254 234 bytes

Ridiculously quite long compared to the SVG+JS solution.

*{position:fixed;background:#fff}e,f{background:#d72828}a{background:#0048e0}c{top:36px;height:16px}d{left:36px;width:16px}e{top:40px;height:8px}f{left:40px;width:8px;}d,f,a{height:72px;top:8px}a,c,e{left:8px;width:100px
<a><c><d><e><f

\$\endgroup\$
  • 1
    \$\begingroup\$ *{position:fixed} should do it. And it's 18 bytes shorter than a,a *{display:block;position:fixed}. \$\endgroup\$ – insertusernamehere Jul 11 '16 at 21:02
  • 1
    \$\begingroup\$ @insert Indeed, thanks for that. The other way I was working with failed though. \$\endgroup\$ – nicael Jul 11 '16 at 21:09
  • \$\begingroup\$ This should save you another 12 bytes: *{position:fixed;background:#fff}e,f{background:#d72828}a{background:#0048e0}c{top:36px;height:16px}d{left:36px;width:16px}e{top:40px;height:8px}f{left:40px;width:8px}d,f{top:8px}c,e{left:8px}a,c,e{width:100px}d,f,a{height:72px, fiddle. \$\endgroup\$ – insertusernamehere Jul 11 '16 at 21:20
  • 1
    \$\begingroup\$ @insert Thanks again, saved 20 with your hints :) \$\endgroup\$ – nicael Jul 11 '16 at 21:59
  • \$\begingroup\$ @insertusernamehere: looks fine here, but when copied to a regular document (in every Browser I have installed on all my machines: Windows 10, Ubuntu, Android, iPhone), fis not displayed. \$\endgroup\$ – Titus Jul 12 '16 at 10:49
3
\$\begingroup\$

Python 3.5 + Tkinter, 235 bytes:

from tkinter import*;C=Canvas(Tk(),height=126,width=175,bg='#d72828');C.pack();X=lambda*a:C.create_rectangle(a,fill='#0048E0',outline='#fff',width=7);X(0,0,8,8);X(0,11,8,19);X(11,0,26,8);X(11,11,26,19);C.scale('all',0,0,7,7);mainloop()

Really long, but happy with it regardless. Basically creates a canvas with a red background and then draws 4 blue rectangles with white borders over the background in the 4 corners. After the drawing is all done, the canvas is enlarged by a scale factor of 7. Displays the completed flag in a new window on a canvas with the dimensions 175 x 126.

Image of Output:

Output

\$\endgroup\$
3
\$\begingroup\$

bash, 239 161 bytes

took the closest colors I could find in ANSI
golfed by a third (an amazing 78 bytes) with manatwork´s tips

a="${u=${e=\e[48;5};20m}${s=       }${w=$e;231m} ${r=$e;124m}  $w $u$s$s${n=\e[0m
}"
printf "${t=$a$a$a$a$a$a$a}${b=$w$s $r  $w $s$s$n}${c=$r$s    $s$s$n}$c$b$t"

ungolfed (184 bytes + comments)

u='\e[48;5;20m'             # color blUe
r='\e[48;5;124m'            # color Red
w='\e[48;5;231m'            # color White
#presets:
n="\e[0m\n"                 # No color + New line
s='       '                 # 7*chr(32)

# lines:
a="$u$s$w $r  $w $u$s$s$n"  # blue-white-red-white-blue
b="$w$s $r  $w $s$s$n"      # white-red-white
c="$r$s    $s$s$n"          # all red

# output:
t="$a$a$a$a$a$a$a"          # 7* line $a
printf "$t$b$c$c$b$t"

output pretty distorted due to character aspect ratio:

\$\endgroup\$
  • 1
    \$\begingroup\$ You could pack it to 159 characters without changing the base principle: pastebin.com/8YKAR7Mn (^[ is a literal escape character counted as 1). Regarding those function declarations, see Dennis's related tip in Tips for golfing in Bash. \$\endgroup\$ – manatwork Jul 13 '16 at 7:56
  • \$\begingroup\$ @manatwork: A) Wow didn´t know about the variable definition in strings. B) ^[ doesn´t seem to work - what bash version is that? C) Same for the function definitions: a(){for i ...} => unexpected "{for" (a()(...) works) \$\endgroup\$ – Titus Jul 13 '16 at 9:53
  • \$\begingroup\$ A) See ${parameter:=word} in man bash. B) ^[ is the graphic image of the escape character. In command line and Vim you enter it with Ctrl+v, Esc, in MCEdit and Emacs with Ctrl+Q, Esc. (In MCEdit you may need a second Esc too, depending on configuration.) C) You have to add delimiters where required by syntax – a space after { and a ; before the }: a(){ for i ...;}. \$\endgroup\$ – manatwork Jul 13 '16 at 10:27
  • \$\begingroup\$ so basically you used magic. That's pretty amazing tbh. \$\endgroup\$ – Bjorn Tipling Apr 9 '17 at 22:19
3
\$\begingroup\$

Lua + LÖVE, 212 characters

f="fill"l=love
g=l.graphics
c=g.setColor
r=g.rectangle
l.window.setMode(100,72)function
l.draw()g.setBackgroundColor(0,72,224)c(-1,-1,-1)r(f,28,0,16,72)r(f,0,28,100,16)c(215,40,40)r(f,32,0,8,72)r(f,0,32,100,8)end

Sample output:

flag on Iceland

\$\endgroup\$
3
\$\begingroup\$

Vim, 49 keystrokes

25i<Ctrl+k>:S<Esc>yy17pqal<Ctrl+v>G$khhqr<Space>j@akhr<Ctrl+k>?SGV8kdggP<Ctrl+v>G15ld$p

I'm certain it could be golfed more, but there you have it. I spent some extra keystrokes on the :S (MEDIUM SHADE) and ?S (DARK SHADE) digraphs for a result I'm pretty happy with:

Icelandic flag in Vim

Explanation:

25i<Ctrl+k>:S<Esc>yy17p  " Draw 18 lines of "blue" blocks
qa                       " Start recording macro "a"
  l<Ctrl+v>G$khh           " Visual-block select the inner rectangle
q                        " Stop recording
r<Space>                 " Replace rectangle with spaces
j@akh                    " Select next inner rectangle
r<Ctrl+k>?S              " Replace rectangle with "red" blocks
GV8kdggP                 " Cut the last 9 lines and paste them before the first line
<Ctrl+v>G15ld$p          " Cut the first 16 columns and paste them after the last column

If I have some time later I'll try to record a GIF of it in action.

\$\endgroup\$
  • 1
    \$\begingroup\$ I love seeing vim answers since there is a good chance you'll discover something new in the huge feature set of vim. This time for me: digraphs. Not as big a revelation as discovering o in visual mode, but still a useful thing to know. \$\endgroup\$ – algmyr Jul 30 '16 at 18:59
2
\$\begingroup\$

JavaFX, 527 bytes

import javafx.scene.*;import javafx.scene.paint.*;import javafx.scene.shape.Rectangle;public class I extends javafx.application.Application{public void start(javafx.stage.Stage s){Color w=Color.WHITE;Paint z=Paint.valueOf("#d72828");Group g=new Group();Scene n=new Scene(g,250,180,Color.valueOf("#0048e0"));g.getChildren().addAll(r(70,0,40,180,w),r(0,70,250,40,w),r(0,80,250,20,z),r(80,0,20,180,z));s.setScene(n);s.show();}Rectangle r(int x,int y,int w,int h,Paint p){Rectangle r=new Rectangle(x,y,w,h);r.setFill(p);return r;}}

Two red rectangles on two white rectangles on a blue background.

Ungolfed:

import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.Rectangle;

public class I extends javafx.application.Application {
    public void start(javafx.stage.Stage s) {
        Color w = Color.WHITE;
        Paint z = Paint.valueOf("#d72828");
        Group g = new Group();
        Scene n = new Scene(g, 250, 180, Color.valueOf("#0048e0"));
        g.getChildren().addAll(
            r(70, 0, 40, 180, w),
            r(0, 70, 250, 40, w),
            r(0, 80, 250, 20, z),
            r(80, 0, 20, 180, z));
        s.setScene(n);
        s.show();
    }

    Rectangle r(int x, int y, int w, int h, Paint p) {
        Rectangle r = new Rectangle(x, y, w, h);
        r.setFill(p);
        return r;
    }
}

(Weirdly, if I change it to import javafx.scene.shape.*; it won't compile with Java 1.8.0_92. I'm not sure if that's a bug.)

\$\endgroup\$
2
\$\begingroup\$

Ruby with Shoes, 150 149 characters

Shoes.app(width:100,height:72){background'0048e0'
stroke fill'fff'
rect 28,0,15,72
rect 0,28,99,15
stroke fill'd72828'
rect 32,0,7,72
rect 0,32,99,7}

Thanks to:

Sample output:

flag on Iceland

\$\endgroup\$
  • \$\begingroup\$ Can't do fill'fff' instead of fill white for -1? \$\endgroup\$ – Erik the Outgolfer Jul 13 '16 at 12:10
  • \$\begingroup\$ Doh. You are right, @EʀɪᴋᴛʜᴇGᴏʟғᴇʀ. I remembered having some issues with shortening hex color codes earlier and not tried it this time. \$\endgroup\$ – manatwork Jul 13 '16 at 12:28
2
\$\begingroup\$

FLIF, 48 bytes

I'm surprised that no (bitmap) image formats have been used as answers here. A well compressed PNG comes in at a respectable 132 bytes (thanks to tools like pngout, pngcrush and optipng). However, I encountered another intriguing format that does even better! Using FLIF (Free Lossless Image Format) and some manual trimming I got down to 48 bytes:

4c46 4649 3133 6400 4800 4023 eb51 1272
9034 113b 7727 a2b6 fdac dc4e c1ae 6cf8
4a00 fc03 2064 7772 dc38 97a7 63f2 0a03

Viewing the image with viewflif gives the expected output:

Iceland flag, screenshot of rendered FLIF file

EDIT: Added link to FLIF web site.

\$\endgroup\$
2
\$\begingroup\$

SVG+HTML, 134

<svg><path d="m0,2h100v72H0"fill="#0048e0"/><path d="M0 32H30V0h12V32h60v12H42V76H30V44H0"fill='#d72828'stroke="#fff"stroke-width='4'>

Cheated a bit in that the rectangle is slightly offset so that I can use a second path with a red fill and white outline to draw the cross. This emerged as an idea while making suggestions to golf nicael's SVG+JS answer further and ended up as a complete rewrite of the SVG in question. In fact, this is pure SVG anyway, it just needs the HTML parser, so has to be put into an HTML file.

\$\endgroup\$
2
\$\begingroup\$

HTML+CSS, 225 bytes

I liked Nicael's answer, but I found a way to draw the bars in less bytes.

   *{position:fixed;width:100px;margin:0}a{background:#0048E0;height:72px}b,c{box-shadow:0 0 0 4px #FFF;}b,c,d{background:#D72828}b,d{width:8px;left:32px}b{height:72px}c{height:8px;top:32px}d{height:16px;top:28px
<a><b></b><c><d>

\$\endgroup\$
  • \$\begingroup\$ box-shadow is a nice idea. \$\endgroup\$ – Joey Jul 15 '16 at 7:49
2
\$\begingroup\$

HTML+CSS, single element, 321

<p style="width:100;height:72;background:linear-gradient(0deg,transparent 44.4%,#D72828 44.5%,#D72828 55.6%,transparent 55.7%),linear-gradient(90deg,transparent 28%,#fff 28.1%,#fff 32%,#D72828 32.1%,#D72828 40%,#fff 40.1%,#fff 44%,transparent 44.1%),linear-gradient(0deg,#0047E0 38.9%,#fff 39%,#fff 61.1%,#0047E0 61.2%)">

Needs quirks mode to run, so the snippet below has the errors fixed:

<p style="width:100px;height:72px;background:linear-gradient(0deg,transparent 44.4%,#D72828 44.5%,#D72828 55.6%,transparent 55.7%),linear-gradient(90deg,transparent 28%,#fff 28.1%,#fff 32%,#D72828 32.1%,#D72828 40%,#fff 40.1%,#fff 44%,transparent 44.1%),linear-gradient(0deg,#0047E0 38.9%,#fff 39%,#fff 61.1%,#0047E0 61.2%)">

\$\endgroup\$
2
\$\begingroup\$

R/ggplot2, 273 bytes 270 bytes

Since we have a couple base R answers we obviously need a ggplot answer. One of the few areas where base might be better ;)

library(ggplot2);ggplot(data.frame(a=c(0,7,0,8,0),b=c(25,11,25,10,25),c=c(0,0,7,0,8),d=c(18,18,11,18,10),e=paste(c(1,2,2,3,3))),aes(xmin=a,xmax=b,ymin=c,ymax=d,fill=e))+geom_rect()+scale_fill_manual(values=c('#0048e0','white','#d72828'),g=F)+theme_void();ggsave('o.png')

Output

Iceland

Ungolfed

library(ggplot2)

ggplot(
  data.frame(xmin = c(0,  7,  0,  8,  0),
             xmax = c(25, 11, 25, 10, 25),
             ymin = c(0,  0,  7,  0,  8),
             ymax = c(18, 18, 11, 18, 10),
             fill = paste(c(1, 2, 2, 3, 3)))
) +
aes(xmin = xmin, xmax = xmax, ymin = ymin, ymax = ymax, fill = fill)+
geom_rect() +
scale_fill_manual(values = c('#0048e0', 'white', '#d72828'), g = FALSE) +
theme_void()

ggsave('o.png')

Edit: Thanks to plannapus for suggesting a way to shorten the fill specification.

\$\endgroup\$
  • \$\begingroup\$ I don't actually use ggplot2 often but isn't it possible to fill argument fill with integers rather than character strings? As in c(1,2,2,3,3)? If not, you can still coerce them into characters with paste, and it'd still be shorter: paste(c(1,2,2,3,3)) is 19 bytes instead of the 22 of c('a','b','b','c','c'). \$\endgroup\$ – plannapus Jul 15 '16 at 8:19
  • \$\begingroup\$ Can't be numeric or it will try fill with a gradient. Paste is a very good idea though! \$\endgroup\$ – Mhairi McNeill Jul 15 '16 at 9:30
2
\$\begingroup\$

SVG pattern, 250

<svg><pattern id="a"width=9 height=9 patternUnits="userSpaceOnUse"patternTransform="translate(55,55),scale(10)"><path d="M0,0H7V7H0" fill="#0048e0"/><path d="M8,0V9M9,8H0"stroke="#d72828"fill="none"/></pattern><path d="M0,0H125V90H0" fill="url(#a)"/>

A square blue path, a red stroke (of default stroke-width) and all that scaled and offset into another path. Needs to be placed into HTML to work.

\$\endgroup\$
  • \$\begingroup\$ Welcome to PPCG! \$\endgroup\$ – Erik the Outgolfer Jul 15 '16 at 13:08
2
\$\begingroup\$

Java with ANSI escape codes, 278 bytes

interface R{static void main(String[]a){String x=o(0,0)+"\n",l=o(4,7)+o(7,1)+o(1,2)+o(7,1)+o(4,14)+x,t=l+l+l+l+l+l+l,r=o(1,12)+o(1,13)+x,q=o(7,8)+o(1,2)+o(7,15)+x;System.out.print(t+q+r+r+q+t);}static String o(int c,int l){return"\33[4"+c+"m"+"               ".substring(0,l);}}
\$\endgroup\$
  • \$\begingroup\$ Remove the space after the class name, shorten the name of the args parameter to a single character, reduce the octal escape to \33 and don't count the unnecessary trailing newline character. That brings your count down to 282. \$\endgroup\$ – Joey Jul 15 '16 at 9:49
  • \$\begingroup\$ Change the class to an interface and remove the public from the method declaration. You can also remove the space after the return. This brings it down to 278. \$\endgroup\$ – Joey Jul 15 '16 at 10:01
  • \$\begingroup\$ Thanks you Joey, I added your ideas, now I am at 278 bytes, great job! =) \$\endgroup\$ – slady Jul 19 '16 at 10:27
2
\$\begingroup\$

Javascript console, 242 bytes

c='background:#';r=c+'d72828;';b=c+'0048e0;';w=c+'fff;';console.log(('%c  '[E='repeat'](25)+'\n')[E](18),...((t=(v='b'[E](7))+'wrrw'+v+v)[E](7)+(o=(j='w'[E](7))+'wrrw'+j+j)+'r'[E](50)+o+t[E](7)).replace(/(.)/g,a=>eval(a)).slice(0,-1).split`;`)

enter image description here

\$\endgroup\$
2
\$\begingroup\$

GLSL + shadertoy, 193 190 187 179 bytes

void mainImage(out vec4 f,vec2 p){vec2 a=abs(p/iResolution.xy*vec2(25,18)-9.);int c=int(min(a.x,min(a.y,2.)));f=vec4(c==0?vec3(215,40,40):c==1?vec3(255):vec3(0,72,224),255)/255.;}

The aspect ratio will be correct as long as the window/screen size is 25:18.
Can be tested at https://www.shadertoy.com/new
I wanted to use an array lookup in the last statement, but it seems I can't really make an array of vectors :/
Additional thanks going to @GáborFekete for tips for further golfing. Screenshot: Screenshot

\$\endgroup\$
  • 1
    \$\begingroup\$ You can save 3 bytes by removing the in keyword in the mainImage argument. \$\endgroup\$ – Gábor Fekete Jul 16 '16 at 16:08
  • \$\begingroup\$ Oh yeah, forgot about it. Thank you! \$\endgroup\$ – Sarge Borsch Jul 16 '16 at 16:09
  • \$\begingroup\$ Also remove trailing zeros in floating values. And I'm not sure if it works on all browsers and OSes but try to assign only the .rgb values of the variable f. \$\endgroup\$ – Gábor Fekete Jul 16 '16 at 16:23
  • \$\begingroup\$ trailing zeroes are necessary, without them there are "incompatible types" errors. (maybe it also works slightly differently depending on implementation) also I guess the second suggestion would be UB, but maybe I'll try later \$\endgroup\$ – Sarge Borsch Jul 16 '16 at 16:53
  • 1
    \$\begingroup\$ I meant write 2. instead of 2.0. \$\endgroup\$ – Gábor Fekete Jul 16 '16 at 17:30
2
\$\begingroup\$

TRS-80 Color Computer BASIC, 133 bytes

This one is a little off on the widths, but some of that is due to characteristics of the semi-graphics mode. In the emulator, the screen is 512x384 even though the actual programming is lower resolution. This color mode only supports 8 colors plus black, and the algorithm is a sort of threshold heat map which is using math to determine the color value to use if it gets within a certain range of the cross axes. The number 3 is blue, 5 is white, and 4 is red. Logical TRUE is -1, and FALSE is 0, so I leveraged that to add two to blue to make white, and subtract one to made red. I could have golfed further and removed some decimals sacrificing accuracy to gain 16 bytes.

1FORY=0TO31:FORX=0TO63:C=3-2*((ABS(21.5-X)<5.5)OR(ABS(15.5-Y)<4.5))+((ABS(21.5-X)<3.5)OR(ABS(15.5-Y)<2.5)):SET(X,Y,C):NEXT:NEXT:GOTO1

enter image description here Ungolfed, and more conventional styling:

10 FOR Y=0 TO 31
20 FOR X=0 TO 63
30 C=3-2*((ABS(21.5-X)<5.5) OR (ABS(15.5-Y)<4.5)) + ((ABS(21.5-X)<3.5) OR (ABS(15.5-Y)<2.5))
40 SET(X,Y,C)
50 NEXT X
60 NEXT Y
70 GOTO 10

I used the JS Mocha online interpreter, which made me feel all warm and fuzzy and want to take my CoCos out of the attic.

Technically, I didn't need to have the last GOTO statement (6 bytes), but I left it in to keep the final result from scrolling off the screen a couple of lines as soon as it finished drawing.

\$\endgroup\$
2
\$\begingroup\$

Maple 231 bytes

macro(t=thickness,w=white,c=color):
plots:-display(
plot([],background=blue),
plot(9,0..25.2,t=48,c=w),
plot([9,y,y=0..18.2],t=48,c=w),
plot(9,0..25.2,t=24,c=red),
plot([9,y,y=0..18.2],t=24,c=red),
scaling=constrained,view=[0..25,0..18]);

Added newlines for readability. This code uses a couple of aliases for repeated terms. Iceland->Maple

Another method, which is slightly cleaner and produces a slightly more crisp image but longer (285 without aliases) is:

plots:-display(
plottools:-rectangle([0,8],[25,10],color=red),
plottools:-rectangle([8,0],[10,18],color=red),
plottools:-rectangle([0,7],[25,11],color=white),
plottools:-rectangle([7,0],[11,18],color=white),
plottools:-rectangle([0,0],[25,18],color=blue),
style=polygon,scaling=constrained);
\$\endgroup\$
2
\$\begingroup\$

Python Turtle, 233 bytes

from turtle import*
import tkinter as _
_.ROUND=_.BUTT
S=8
c=color
w=width
h=18*S
c("navy")
w(h)
fd(25*S)
c("white")
w(4*S)
home()
pu()
goto(9*S,-9*S)
lt(90)
pd()
fd(h)
c("#d72828")
w(S+S)
bk(h)
pu()
home()
pd()
fd(25*S)
ht()
done()

enter image description here

One feature of this implementation is that I sacrificed 15 bytes to make it scalable so you can set S to anything from 1:

enter image description here

to however large you wish. If you want to run it under Python 2, simply change tkinter to Tkinter.

\$\endgroup\$
2
\$\begingroup\$

Postscript 148 characters (84 bytes when using binary shortcuts)

First of all, there are two versions: One optimized for characters, and one optimized for binary shortcuts.

Golfed character version:

/s{setrgbcolor}def/R{rectfill}def 0.843 0.157 0.157 s 0 8 25 2 8 0 2 18 R R 0 0.282 0.878 s 0 0 7 7 0 11 7 7 8 copy R R 11 0 translate 2 1 scale R R

Less golfed version (character optimised):

/s {setrgbcolor} def 
/R {rectfill} def
0.843 0.157 0.157 s
0 8 25 2
8 0 2 18
R
R
0 0.282 0.878 s
0 0 7 7
0 11 7 7
8 copy
R
R
11 0 translate
2 1 scale
R
R

Less golfed version (binary optimised):

0.843 0.157 0.157 setrgbcolor
0 8 25 2
8 0 2 18
rectfill
rectfill
0 0.282 0.878 setrgbcolor
0 0 7 7
0 11 7 7
8 copy
rectfill
rectfill
11 0 translate
2 1 scale
rectfill
rectfill

Hex of the binary representation version:

30 2E 38 34 33 20 30 2E 31 35 37 20 30 2E 31 35 37 92 9D 30 20 38 88 19 32 88 08 30 20 32 88 12 92 80 92 80 30 20 30 2E 32 38 32 20 30 2E 38 37 38 92 9D 30 88 00 37 88 07 30 88 0B 37 88 07 38 92 19 92 80 92 80 88 0B 30 92 AD 32 20 31 92 8B 92 80 92 80

\$\endgroup\$
  • \$\begingroup\$ rectfill can take an array of numbers and draw multiple rectangles with one call. This can get it down to 139 bytes (by also changing the 8 copy to a dup). Also leading zeroes are not needed on the floats which brings it down to 134 \$\endgroup\$ – Geoff Reedy Nov 1 '16 at 14:27
2
\$\begingroup\$

C - Win32 GDI 180 bytes

#include <Windows.h>
main(i,x,y,h,v){for(i=0;i<180000;i++)h=(x=i%500)/20,v=(y=i/500)/20,SetPixelV(GetDC(0),x,y,h>7&&h<10||v>7&&v<10?2631895:h>6&&h<11||v>6&&v<11?16777215:9910272);}

Very slowly draws the flag onto the desktop:

enter image description here

\$\endgroup\$
  • \$\begingroup\$ Why SetPixelV ? Can't it be SetPixel ? \$\endgroup\$ – sergiol Jul 8 '17 at 11:22
2
\$\begingroup\$

Tcl/Tk, 180 162 158

pack [canvas .c -w 100 -he 72 -bg #0048e0]
proc D {L f\ d72828} {.c cr r $L -w 0 -f #$f}
D "28 2 44 74" fff
D "2 28 102 44" fff
D "32 2 40 74"
D "2 32 102 40"

enter image description here

Stupid margin at the end forced me to use 102 instead of 99; I could save two bytes.

\$\endgroup\$
  • 1
    \$\begingroup\$ Visible at the right on i.imgur.com/m0bCgwT.png — you will see a vertical blue line where it shouldn't be. \$\endgroup\$ – sergiol Jul 9 '17 at 15:40
  • 1
    \$\begingroup\$ @insertusernamehere On an unrelated thing, I finally discovered the origin of the "stupid margin"; the highlightthickness attribute of canvas is by default 2 (instead of 0) — stackoverflow.com/a/4311134/383779 \$\endgroup\$ – sergiol Sep 3 '17 at 9:57
2
\$\begingroup\$

Befunge, 126 124 bytes

99>+1-:00p0 >:01-\100g>:::9`\55+`+\8\v
@_^#!:,+55$_^#`*46:+1<|!`\0:\*+`\7\+`<
"[",5g,4g,3g," m",:,,^>$1+2/::39*,
174
404
010

2 bytes golfed thanks to Zacharý

This is a text solution using ANSI escape sequences to set the colours. It outputs 50x18 characters rather than 25x18 (doubling the horizontal resolution), since that more closely matches the required dimensions when the characters aren't square. If you prefer the 25x18 resolution, though, you can simply replace the :, on line 3 with two spaces.

Sample Output

Rendering of the Iceland flag

(exact colours may vary depending on the operating system)

\$\endgroup\$
  • \$\begingroup\$ I know that this is over a year old, but 9*,"[",5g,4g,3g," m",,^>$1+2/::3 would save 2 bytes on the third line if you use the 25x18 resolution. \$\endgroup\$ – Zacharý Jul 16 '18 at 17:25
  • \$\begingroup\$ It seems that this works for -4 bytes! \$\endgroup\$ – Zacharý Jul 16 '18 at 17:37
  • \$\begingroup\$ @Zacharý I don't think the 25x18 version really counts, because it's not the right shape, but that trick you used to compress the top loop is rather brilliant. Thanks. \$\endgroup\$ – James Holderness Nov 28 '18 at 18:51
  • \$\begingroup\$ Thanks, golfing syntax is what I do best on other people's code \$\endgroup\$ – Zacharý Nov 28 '18 at 20:44
2
\$\begingroup\$

TI-Basic (TI-84 Plus CE), 76 74 bytes

9→Ymax
-9→Ymin
16→Xmax
-9→Xmin
AxesOff
For(A,-9,9,.2
DrawF A/(X2>4 and A2>4),10
DrawF A/not(X2>1 and A2>1),11
End

This was created independently of charredgrass's answer.

-2 bytes from lirtostat

TI-Basic is a tokenized language. Ymax, Ymin, Xmax, Xmin, and AxesOff are two-byte tokens; all other tokens used are one-byte tokens.

Possibly non-competing due to color values (blue 0x0000FF, white 0xFFFFFF, red 0xFF0000).

It takes quite a while to run, but it works.

9→Ymax                           # 5 bytes, adjust window
-9→Ymin                          # 6 bytes
16→Xmax                          # 6 bytes
-9→Xmin                          # 6 bytes
AxesOff                          # 3 bytes, remove axes
For(A,-9,9,.2                    # 11 bytes, for each Y-value, -9 to 9, by 0.2
DrawF A/(X2>4 and A2>4),10       # 20 18 bytes, draw a blue point if Y^2>4 and X^2>4
DrawF A/not(X2>1 and A2>1),11    # 18 bytes, draw a red point if Y^2 or X^2 is less than 1
End                              # 1 byte
\$\endgroup\$
  • 1
    \$\begingroup\$ (X^2>4)/(A^2>4) -> X^2>4 and A^2>4? \$\endgroup\$ – lirtosiast Dec 1 '18 at 4:54
2
\$\begingroup\$

PostScript, 152 150 bytes

Golfed version:

9 9 scale 0 .282 .878 setrgbcolor 0 0 25 18 rectfill 1 setgray[0 7 25 4 7 0 4 18]rectfill .843 .157 .157 setrgbcolor[0 8 25 2 8 0 2 18]rectfill showpage

Ungolfed version:

9 9 scale                     % over-all scaling
0 .282 .878 setrgbcolor       % set blue color
0 0 25 18 rectfill            % blue rectangle
1 setgray                     % set white color
[0 7 25 4 7 0 4 18] rectfill  % white cross
.843 .157 .157 setrgbcolor    % set red color
[0 8 25 2 8 0 2 18] rectfill  % red cross
showpage

Result:

result

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

Perl, 128 bytes

$b=" 0 9 27"x28;$w=" 31"x12;$r=" 26 5 5"x8;
$t="$b$w$r$w$b$b"x28;
$m=($w x8 .$r.$w x15)x4;
print"P3 100 72 31",$t,$m,$r x100,$m,$t;

(newlines added for readability, and not counted)

This is a straightforward compression of a PPM image. A PPM is supposed to have a line length of 70 or less, but in practice all readers will accept this image that's all on a single line. If you want to be properly portable, replace the first space in each of $b, $w and $r with a newline.

I've assumed that the RGB values supplied are in sRGB coordinates, so no need to apply any gamma correction for PPM.

\$\endgroup\$
  • 2
    \$\begingroup\$ Picture! :) (Please include one.) \$\endgroup\$ – user9206 Jul 12 '16 at 13:58
  • \$\begingroup\$ It's a bit too long for a data: URL. \$\endgroup\$ – Toby Speight Jul 12 '16 at 14:03
  • 1
    \$\begingroup\$ @TobySpeight Upload to imgur first, then post it here, no need for data: URLs. \$\endgroup\$ – Erik the Outgolfer Jul 13 '16 at 9:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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