18
\$\begingroup\$

Challenge

Create the image of a pride flag (rainbow flag), i.e. a six coloured striped flag (from top to bottom): red, orange, yellow, green, blue, and violet.

Output

enter image description here

Example (R)

barplot(rep(1, 6), horiz = TRUE, axes = FALSE, space = 0, border = NA, col = c("darkviolet", "blue", "darkgreen", "yellow", "orange", "red"))

Rules

  • The algo should actually create the image, not just load an existing one.
  • You may use any colors reasonably recognizable as "red", "orange", "yellow, "green", "blue", and "violet".
  • The flag may either be scalable (such as an SVG, or output that scales to window size) or at least size 200px by 300px.
  • All coloured areas should be of the same size.

Every answer must include the resulting picture!

Credits: this post was inspired by the following post: Draw the flag of Tennessee.

\$\endgroup\$
2
  • \$\begingroup\$ OK I have reopened this and cleared the comments. I would still personally prefer if both this question and the linked question actually gave guidelines for colors beyond it just looks right. But since there is a precedent I think we will just see how it plays out. \$\endgroup\$
    – Wheat Wizard
    Jun 26 at 15:29
  • 1
    \$\begingroup\$ "All coloured areas should be of the same size." What about if the image isn't a multiple of 6 pixels tall? \$\endgroup\$
    – EasyasPi
    Jun 26 at 19:00

22 Answers 22

6
\$\begingroup\$

Red, 73 bytes

view/tight[style s: box 315x35 below s red s#fa0 s#ff0 s#0f0 s#00f s#808]

enter image description here

Works in Red console. To run as a standalone program, we must add in front:

Red[needs view]

I don't know, whether this has to be counted.

\$\endgroup\$
1
  • \$\begingroup\$ I don't think the Red[] header has to be counted. \$\endgroup\$
    – user
    Jun 26 at 17:53
5
\$\begingroup\$

DOS 80186 .COM executable, 31 30 bytes

xxd:

00000000: b0 13 cd 10 68 00 a0 07 31 ff be 18 01 ac b9 80  ....h...1.......
00000010: 2a f3 aa 3c 05 75 f6 c3 28 2a 2c 02 20 05        *..<.u..(*,. .

Commented assembly:

        ; NASM syntax
        [cpu 186]
        [org 0x100]
start:
        ; Set DOS to mode 13h for 320x200, 256 colors
        ; Since we know the DOS startup state, we can just set AL.
        mov     al, 0x13 ; 0x0013
        int     0x10
        ; Set ES to point to the video ram segment
        push    0xa000
        pop     es
        ; Set DI to point to the start of video ram
        xor     di, di
        ; Set SI to our lookup table
        mov     si, colors
.loop:
        ; Load color from lookup table
        lodsb
        ; Roughly 1/6 of the screen
        ; ceil(200 / 6) * 320
        mov     cx, 10880
        ; For all CX iterations, store byte to video ram
        rep     stosb
        ; Check for last byte in lut and loop if it is not
        ; that.
        cmp     al, 5
        jnz     .loop
.ret:
        ; Return to DOS, leaving a pretty but annoying flag on
        ; the screen that requires a manual mode reset.
        ret
 
        ; Lookup table for the default 256 color palette.
colors:
        ;   R   O   Y   G   B   P
        db 40, 42, 44,  2, 32,  5

I'm not sure if this is valid, as the last stripe is technically a bit shorter than the others, but 200 is not a multiple of 6 so it is unavoidable at this size.

Screenshot (the C:\CODE> part is simply the DOS prompt overwriting it after exiting)

enter image description here

  • 1 byte: stosb already stores to the es segment. What a dummy.
\$\endgroup\$
0
3
\$\begingroup\$

TikZ, 164 bytes

\documentclass[tikz]{standalone}\begin{document}\tikz{\foreach\u\c in{1/purple,2/blue,3/green,4/yellow,5/orange,6/red}{\fill[\c](,\u)rectangle(9,7);}}\end{document}

Pretty simple.

\documentclass[tikz]{standalone}\begin{document}\tikz{ % boilerplate
% For every color and index ascending from the bottom.
\foreach\u\c in{1/purple,2/blue,3/green,4/yellow,5/orange,6/red}{
   % Draw a filled rectangle in that color from (0,u) to the upper right corner
   \fill[\c](,\u)rectangle(9,7);
}
}\end{document} %boilerplate

Result

\$\endgroup\$
5
  • \$\begingroup\$ I think the last color should be "violet". While I agree that the OP does not properly specify how the colors should be displayed, it looks more reddish to me. \$\endgroup\$
    – user100690
    Jun 26 at 16:11
  • \$\begingroup\$ @RecursiveCo. tikz calls that color purple, so IMO it's purple. It looks different from the flag, but it definitely still looks purple. \$\endgroup\$
    – Wheat Wizard
    Jun 26 at 16:12
  • \$\begingroup\$ I would say the green on my flag looks even more different from the provided flag, than the difference between the purples. \$\endgroup\$
    – Wheat Wizard
    Jun 26 at 16:14
  • \$\begingroup\$ Ok, that's fine! Also note your PFP looks like the pride flag. ;) \$\endgroup\$
    – user100690
    Jun 26 at 16:19
  • 3
    \$\begingroup\$ @RecursiveCo. Hmm, it does look somewhat like the pride flag, what a coincidence. Definitely couldn't be because it's June. :P \$\endgroup\$
    – user
    Jun 26 at 16:30
3
\$\begingroup\$

QBasic, 78 bytes

SCREEN 9
FOR i=0TO 5
READ c
LINE(0,i*40)-(400,239),c,BF
NEXT
DATA 4,6,14,2,9,5

The orange looks more like brown, in my opinion, but it's the closest QBasic has (it's the dark version of yellow). Here's the output when run on DOSBox at Archive.org:

QBasic flag output

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

JavaScript - 165 bytes

The snippet works in the console.

console.log(...["red","orange","#ff0","green","#00f","violet"].reduce((a,c)=>{a[0]=a[0]+'%c0';return [...a,`background:${c};color:${c};padding:35px 400px;`];},['']))

enter image description here

EDIT:

Used Chrome Version 91.0.4472.114 (Official Build) (x86_64) for creating the image.

\$\endgroup\$
3
  • \$\begingroup\$ Is this browser/version dependent? If yes, better specify it. In Firefox 88.0 looks a bit different: i.stack.imgur.com/aQnLo.png \$\endgroup\$
    – manatwork
    Jun 28 at 21:02
  • \$\begingroup\$ @manatwork thanks for drawing my attention to this. I wasn't expecting browser dependency. \$\endgroup\$ Jun 28 at 21:06
  • \$\begingroup\$ After some investigation, it looks like Firefox defaults to display:inline and Chrome/Edge forces inline-block (ignoring any display we specify). Putting display:inline-block makes both the same (but for golf, display:block is shorter). After some experimentation, my best cross-browser is then console.log(...["f00","f80","ff0","0f0","00f","808"].reduce((a,c)=>{a[0]+='%c ';return[...a,`background:#${c};display:block;padding:2%26%`]},[''])) For just Firefox we can remove the padding, for just Chrome/Edge we can remove the display. \$\endgroup\$ Jun 30 at 22:43
3
\$\begingroup\$

Postscript, 42 bytes

Hand tokenised (42 bytes including showpage, 40 bytes without).

00000000: 36 88 09 32 5b 30 20 2e 31 92 38 30 88 f7 88 f7  6..2[0 .1.80....
00000010: 5d 7b 8e 05 88 33 3c e3 00 7d 8d 00 33 20 63 6f  ]{...3<..}..3 co
00000020: 6c 6f 72 69 6d 61 67 65 92 a1                    lorimage..

No tokenisation (62 bytes including showpage, 53 bytes without):

6 9 2[0 .1 .1 0 -9 -9]{<88333ce30>}false 3 colorimage
showpage

This renders to about 3.2 by 2.1 cm (0.8" by 1.25"). The size is limited by the constants '.1'. Making the flag bigger requires a smaller number which will need one extra byte (two bytes in the untokenised version).

The tokenised version is the same as the untokenised version except the ".1 .1" is encoded as ".1 dup" to save a byte.

GSView window redering Postscript pride flag

\$\endgroup\$
1
  • \$\begingroup\$ Welcome to Code Golf! Nice first answer. \$\endgroup\$ Jul 1 at 2:10
3
\$\begingroup\$

Japt, 91 57 bytes

The latest entry in my series of making Japt do things it shouldn't be able to do!

Ol"%c "²³$,...$`fÇÛÆèÆǾb`roT ò3 Ëi`padÜA:2%26%;baå®":#

Test it (Open your browser's console. Only tested in Chrome.)

Original solution

$flags$
`fÇÛÆèÆǾb`roT ò3 £$V.before(V.cloneNode(),V.style.border=V.style.background='#'+X

Test it

\$\endgroup\$
1
  • 1
    \$\begingroup\$ +1 for putting the flag in Flags. \$\endgroup\$
    – Makonede
    Jun 28 at 20:56
3
\$\begingroup\$

C, 69 bytes

I don't have comment privileges yet, so I'm adding this as another answer. This is an improvement on @weirdsmiley's answer.

#define p(s)puts("\e["#s"m█");
main(){p(91)p(31)p(93)p(32)p(34)p(35)}

Try it on godbolt

I added the the \e[ and m to the p macro because it was used 6 times in each macro invocation. Also the \e[0m (which resets the color) can be removed because the color is overwritten again before each puts.

If there was a way to make the 91 and 93 start with a 3, then it might save a few bytes by being able to remove the 3 from the 30s.

I'm new to codegolf, so I'm sure if this is 69 or more bytes (because of the character).

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

Python 3 + Turtle, 183 bytes

from turtle import*
for x in "red orange yellow green blue violet".split():fillcolor(x);begin_fill();exec("fd(200);lt(90);fd(20);lt(90);"*2);end_fill();rt(90);fd(20);lt(90)
mainloop()

enter image description here

The turtle pointer by default starts at cartesian coordinates (0,0) so the image is in the 4th quadrant.

\$\endgroup\$
8
  • \$\begingroup\$ You're gonna get mad at me for this, but I have a pygame answer ready. \$\endgroup\$
    – user100690
    Jun 26 at 16:51
  • \$\begingroup\$ @RecursiveCo. never mind. Go post it! \$\endgroup\$
    – wasif
    Jun 26 at 16:51
  • \$\begingroup\$ How long is your answer in pygame? \$\endgroup\$
    – user100690
    Jun 26 at 16:53
  • \$\begingroup\$ @RecursiveCo. is not ready yet \$\endgroup\$
    – wasif
    Jun 26 at 16:54
  • 2
    \$\begingroup\$ Save yourself some bytes by using "f00 fa0 ff0 4f0 00f 808".split():fillcolor("#"+x) instead of "red orange yellow green blue violet".split():fillcolor(x) \$\endgroup\$
    – RGS
    Jun 26 at 18:05
2
\$\begingroup\$

Pygame, 171 bytes

from pygame import*
d=display
e=99
s=d.set_mode((e*9,e*6))
m=[255]
l=[0]
i=0
for c in[m+l*2,m+[e]+l,m*2+l,l+m+l,l+l+m,[e,0,e]]:draw.rect(s,c,(0,i*e,e*9,e));i+=1
d.update()

Here's the flag generated: enter image description here

\$\endgroup\$
3
  • \$\begingroup\$ l=[0];i=0 can be l=i,=[0] (and possibly you can use 255, 0, (e,) instead of [255] [0] [e], but I can't test that easily atm) \$\endgroup\$
    – pxeger
    Jun 26 at 17:26
  • \$\begingroup\$ @pxeger Thanks! How does the ,= trick work? And also (e,) should be placed where? \$\endgroup\$
    – user100690
    Jun 28 at 7:57
  • \$\begingroup\$ It's l = (i,) = [0]; the i is unpacked from the list. The (e,) should go in place of [e] in m+[e]+l \$\endgroup\$
    – pxeger
    Jun 28 at 11:12
2
\$\begingroup\$

SVG, 254 bytes HTML, 181 173 165 bytes

By moving from SVG to HTML, I can get away with not specifying a bunch of things and leaving some tags open.

  • Saved ~ 70 bytes thanks to Wheat Wizard.
  • Saved 8 + 8 bytes thanks to pxeger.

<svg><rect y=0 fill=red /><rect y=1 fill=#fa0 /><rect y=2 fill=#ff0 /><rect y=3 fill=#4f0 /><rect y=4 fill=blue /><rect y=5 fill=#808><style>rect{width:8px;height:1px

After zooming in a lot, you can see

enter image description here

\$\endgroup\$
11
  • 1
    \$\begingroup\$ I don't think you need the xmlns. There should be a tips for golfing in SVG somewhere. \$\endgroup\$
    – Wheat Wizard
    Jun 26 at 16:30
  • 1
    \$\begingroup\$ And technically speaking since SVG is scalable you shouldn't need the viewbox either. It will just look really tiny, but you can scale it up. \$\endgroup\$
    – Wheat Wizard
    Jun 26 at 16:32
  • \$\begingroup\$ Well, you are more or less right, I guess. If I remove the xmlns, then I think the SVG no longer works as a standalone SVG file (at least not on my browsers) but I can change the file to an HTML file, and then removing xmlns and viewBox are just fine. \$\endgroup\$
    – RGS
    Jun 26 at 16:34
  • \$\begingroup\$ And I don't think you need quotes for a lot of things. The numbers at least you can get by with the quotes removed. I'd have to check on colors. \$\endgroup\$
    – Wheat Wizard
    Jun 26 at 16:34
  • 1
    \$\begingroup\$ I meant fill, not color then. This works for me though (Firefox 90.0b6). Also you can remove the last } in the CSS \$\endgroup\$
    – pxeger
    Jun 26 at 18:28
2
\$\begingroup\$

K (oK) + iKe, 79 bytes

w:300
h:200
{(0,x*34;,("red";"#fa0";"#ff0";"#0f0";"#00f";"#808")x;(34;w)#0)}'!6

Try it online!

Draws a static bitmap with 300x200px area.

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

Nim-lang, 862 bytes

import pixie
let m=newImage(300,160)
m.fill(rgba(255,255,255,255))
let c=newContext(m)
c.strokeStyle="#FF5C00"
c.lineWidth=27
let a=newContext(m)
a.strokeStyle="#FF8C00"
a.lineWidth=27
let e=newContext(m)
e.strokeStyle="#FFE900"
e.lineWidth=27
let d=newContext(m)
d.strokeStyle="#006400"
d.lineWidth=27
let z=newContext(m)
z.strokeStyle="#00008B"
z.lineWidth=27
let rn=newContext(m)
rn.strokeStyle="#4B0082"
rn.lineWidth=27
let
  t=vec2(0,14)
  s=vec2(300,14)
let 
  q=vec2(0,41)
  r=vec2(300,41)
let
  ql=vec2(0,68)
  br=vec2(300,68)
let
  qb=vec2(0,95)
  bn=vec2(300,95)
let
  qq=vec2(0,122)
  bb=vec2(300,122)
let
  qt=vec2(0,149)
  by=vec2(300,149)
c.strokeSegment(segment(t,s))
a.strokeSegment(segment(q,r))
e.strokeSegment(segment(ql,br))
d.strokeSegment(segment(qb,bn))
z.strokeSegment(segment(qq,bb))
rn.strokeSegment(segment(qt,by))
m.writeFile("l.png")

enter image description here

Using the Nim library pixie. If you have Nim and Nimble installed, a quick nimble install pixie should let you run it perfectly! It outputs to l.png. I am inexperienced with Pixie and Nim, so if I did anything wrong, please let me know.

\$\endgroup\$
3
  • 1
    \$\begingroup\$ Welcome to Code Golf! Nice first answer. \$\endgroup\$ Jun 27 at 19:43
  • \$\begingroup\$ I'm guessing that the 4 space indent on each line is a formatting error, not part of the code, so I've removed it. Feel free to rollback if this is in error :) \$\endgroup\$ Jun 27 at 21:24
  • \$\begingroup\$ Yes, the indent was accidental. I will edit it. \$\endgroup\$
    – NimUser
    Jun 27 at 21:49
2
\$\begingroup\$

Wolfram Language (Mathematica), 142 139 bytes

BarChart[1~Table~6,BarOrigin->Left,ChartStyle->{Purple,Blue,Green,Yellow,Orange,Red},BarSpacing->0,Axes->0>1,ChartBaseStyle->EdgeForm@None]

ChartBaseStyle->EdgeForm@None removes the faint black lines that would normally separate each bar.

-3 bytes thanks to att.

enter image description here

\$\endgroup\$
2
  • 1
    \$\begingroup\$ False->0>1, EdgeForm[None]->EdgeForm@None \$\endgroup\$
    – att
    Jun 27 at 23:15
  • \$\begingroup\$ @att Thanks, appreciate the assist. I've admired many of your clever MMA golfs. \$\endgroup\$
    – theorist
    Jun 27 at 23:42
2
\$\begingroup\$

Python 3, 108 89 85 80 bytes

print("P3 300 204 9")
for x in range(6):print(*"900960990070009707"[x::6]*10200)

Try it online!

Huge change (-22 chars) thanks to ovs, and -5 more from Wheat Wizard!

The output is an ASCII PPM image file, which is easy to generate but incredibly inefficient space-wise. So even at 300x204 pixels it's too larger for TIO, so it's truncated if you run the code there.

Here's an explanation.

print("P3 300 204 9")                        # Print the PPM header (1)
for x in range(6): ...                       # For each distinct color
... print(*"900960990070009707"[x::6]*10200) # Print 10200 copies of the RGB value (2)

(1) - P3 means it's an RGB image, 300 204 are the dimensions and the last number if the max RGB value 9 in this case so that we can use single digit values.

(2) - The RGB values are single byte since the color depth in the header is given as 9. The string 900960990070009707 holds the 3 digit RGB values for each of the 6 rows.

The image uploader won't accept a PPM file so I loaded it into GIMP and exported it as a PNG to include it.

enter image description here

\$\endgroup\$
4
  • 1
    \$\begingroup\$ And if you reorder the color string, [x//10200*3:][:3] can be shortened to [x//10200::6] \$\endgroup\$
    – ovs
    Jun 27 at 22:32
  • \$\begingroup\$ Nice idea to use the * unpacking in the print line. I never thought of that... \$\endgroup\$
    – cnamejj
    Jun 27 at 22:43
  • 1
    \$\begingroup\$ This should save 5 bytes. \$\endgroup\$
    – Wheat Wizard
    Jun 28 at 7:31
  • \$\begingroup\$ Great idea to make the loop print all the RGB's for a given color and not just one pixel, thanks! \$\endgroup\$
    – cnamejj
    Jun 28 at 7:42
2
\$\begingroup\$

C, 171 bytes 118 bytes 100 bytes

EDIT: Saved 53 bytes thanks to Wheat Wizard and 14 bytes thanks to ceilingcat

#define p(s) printf(#s"█\e[0m\n");
main(){p(\e[91m)p(\e[31m)p(\e[93m)p(\e[32m)p(\e[34m)p(\e[35m)}

Try on godbolt!

NOTE: Output differs a little according to Godbolt's UI.

Here is the output from my native machine.

enter image description here

\$\endgroup\$
4
  • 2
    \$\begingroup\$ Since the challenge has no required aspect ration you can save length by just using 1 . \$\endgroup\$
    – Wheat Wizard
    Jun 28 at 14:08
  • \$\begingroup\$ Ahh! That's good news! \$\endgroup\$ Jun 28 at 14:15
  • 1
    \$\begingroup\$ I also got to learn that having a return type is not necessary in --C90! \$\endgroup\$ Jun 28 at 16:55
  • 1
    \$\begingroup\$ Suggest p(s)puts(#s"█\e[0m") instead of p(s) printf(#s"█\e[0m\n") \$\endgroup\$
    – ceilingcat
    Jul 1 at 2:31
2
\$\begingroup\$

R + ggplot2,150 bytes - https://cran.r-project.org/web/packages/ggplot2/index.html

library(ggplot2);ggplot(data.frame(y=1:6),aes(y=y))+theme_void()+geom_bar(fill=c("#9400D3","#0000FF","#006400","#FFFF00","#FFA500","#FF0000"),width=1)

the output image enter image description here

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

HTML, 330 245 bytes

Saved 7 bytes thanks to Wheat Wizard!

Saved 78 bytes thanks to Recursive Co.!

<div style="background:red">&nbsp;</div><div style="background:#F60">&nbsp;</div><div style="background:#CF0">&nbsp;</div><div style="background:#0F0">&nbsp;</div><div style="background:blue">&nbsp;</div><div style="background:#C0F">&nbsp;</div>

\$\endgroup\$
6
  • \$\begingroup\$ For basically every color other than red and blue the hex is going to be shorter. e.g. #f80 is shorter than orange \$\endgroup\$
    – Wheat Wizard
    Jun 26 at 16:19
  • \$\begingroup\$ @WheatWizard Thanks, I didn't realize you could use 3 character hex codes! \$\endgroup\$
    – user
    Jun 26 at 16:20
  • \$\begingroup\$ Bytesavings: remove doctype, all &nbsp;s, shortening background-colors to background, using hex codes with single letters, removing quotes and using /> to close tags, and no need for the html and body tags. \$\endgroup\$
    – user100690
    Jun 26 at 16:21
  • \$\begingroup\$ @RecursiveCo. Thanks! I tried making the divs empty before, but they don't show up without text inside them, for some reason. \$\endgroup\$
    – user
    Jun 26 at 16:27
  • 3
    \$\begingroup\$ @vonjd just click "run code snippet" \$\endgroup\$
    – pxeger
    Jun 26 at 17:29
1
\$\begingroup\$

R, 80 65 bytes

Edit: golfing-down the example in the question turned-out to be shorter than my own first attempt... doh...

barplot(rep(1,6),,0,ho=T,axe=F,bo=NA,co=rainbow(12)[c(10,8,4:1)])

Try it at rdrr.io!

Original 80-byte version

plot(0,,,1:2,c(1,7),,,,"","",,F);rect(1,7:2,2,6:1,,,rainbow(12)[c(1:4,8,10)],NA)

Try it at rdrr.io!

enter image description here

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

ConTeXt, 112 bytes

It produces PDF, hence scalable, output:

\startMPpage for i=0upto5:draw(0,-i)--(5,-i)withcolor hsvtorgb(i*(25+6i),1,1)withpen pensquare;endfor\stopMPpage

enter image description here

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

HTML & CSS — 207 bytes

enter image description here

hr{height:30px;margin:0;border:0}hr{background:red}*+hr{background:orange}*+*+hr{background:yellow}*+*+*+hr{background:green}*+*+*+*+hr{background:blue}*+*+*+*+*+hr{background:violet}
<hr><hr><hr><hr><hr><hr>

\$\endgroup\$
3
  • 1
    \$\begingroup\$ You can change all but last hr in each sequence with *, like *+*+*+*+*+hr{background:violet}. You can save some bytes by writing the entire CSS in one line. \$\endgroup\$
    – manatwork
    Jul 1 at 22:02
  • \$\begingroup\$ @manatwork Wow... Didn't know that ;) You helped me saved 15 bytes! Thanks! \$\endgroup\$ Jul 1 at 22:10
  • \$\begingroup\$ You can change all the hrs in the CSS to *. Also, other than red & blue, using 3 digit hex values for the colours will be shorter. \$\endgroup\$
    – Shaggy
    Jul 8 at 11:17
1
\$\begingroup\$

JavaScript, 107 bytes

console.log(`%c `.repeat(6),...`f00fa0ff00f000fb0b`.match(/.../g).map(c=>`background:#${c};padding:2%26%`))

Open your browser's console and run the snippet below.

console.clear()
console.log(`%c `.repeat(6),...`f00fa0ff00f000fb0b`.match(/.../g).map(c=>`background:#${c};padding:2%26%`))

\$\endgroup\$

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.