Draw the Progress Pride flag

Question

Challenge

Create the image of a progress pride flag.

Output

Progress pride flag

Dimensions

Dimensions

Rules

• Your program must create the image and not just load it from a website

• The colours can be just your language's default if it is very difficult / impossible to load RGB values, else they should be: red: (255,0,0), orange: (255,140,0), yellow: (255,240,0), green: (0,138,40), (dark) blue: (0,80,255), purple: (120,0,140), black: (0,0,0), brown: (100,50,20), (light) blue: (110,220,240), pink: (255,180,200), white: (255,255,255)

• The flag can be a scaled up version of the one shown, but the dimensions given are the smallest size allowed. An error of 1 pixel is allowed.

• Please include an image of the output of your program.

This post was (somewhat) inspired by this one.

• Arnauld: but the dimensions given are the smallest size allowed -> graphical-output challenges are good candidates for answers on old-school systems such as Commodore 64/128, Atari ST, Apple ][, etc. But 1059x672 is too large for them. :-/
• Level River St: @Arnauld I've given an answer in BBC BASIC, but it's on an enhanced emulator with higher resolution and more colours. The original BBC BASIC considered coordinates of 1280x1024 for the screen but the actual resolution was less (and varied depending on the screen mode selected.) This was one of many features included to allow for future expansion.

Answer 1

C (GCC), (削除) 192 (削除ここまで) 176 bytes

char*r="binary stuff (see ATO)";i,j;main(x){write(1,"P6 1059 672 255 ",16);for(;i<672;++i)for(j=0;j<1059;++j)write(1,r+((x=abs(i-336)+j)<504?6+x/84:i/112)*3,3);}

-16 bytes thanks to @ceilingcat

Attempt this online! (you must set encoding to Base64)

Outputs a PPM image.

• hdrz: Just to understand: The ATO link says the binary stuff is 239 bytes. Why it’s not included in the answers total?
• matteo_c: I linked a wrong ATO (I didn't set base64 as encoding)
• matteo_c: I wasn't able to link an ATO with base64 preselected: in base64 it's 239 bytes, decoded it's 176
• hdrz: Thanks, obviously it should be base64, I should have guessed
• ceilingcat: I think the first write() can be a printf()

Answer 2

Java 8, (削除) 475 (削除ここまで) 449 bytes

import java.awt.*;v->new Frame(){public void paint(Graphics g){int i=0,t=84;for(;i<6;g.fillRect(168,i++*112+25,891,112))g.setColor(new Color(i<3?255:i/5*120,i%5<1?0:i%2>0?141-i:240/~-i,i>4?140:i>3?255:i/3*40));for(i=0;i<4;g.fillPolygon(new int[]{0,0,(i+2)*t,i/3*t,i<1?0:~-i*t,(i+3)*t},new int[]{109-i*t,193-i*t,361,(i<3?6+i:8)*t+25,i++<1?613:697,361},6))g.setColor(new Color(i>1?i%3*50:255-i*145,i>1?i%3*25:180+i*40,i>1?i%3*10:200+i*40));}{show();}}

Assumes it's run in Windows-10 or 11. If it's run in Windows 7, where the title bar was slightly larger, the +25 in the code should be +30.

enter image description here

Explanation:

General explanation:

It'll first draw the six regular pride flag bars in the correct colors, off-set by 168 pixels towards the right to use the default white background for the triangle, so we won't have to draw it.
It'll then draw the progress pride polygons on top of it.

One thing to note: Java AWT, or at least the most golfable use of it, requires all x,y-coordinates to be calculated. Luckily that wasn't too hard for this flag, but it has caused quite some trouble in other more round-shaped graphical-output challenges I've done, like this one..

Code explanation:

import java.awt.*; // Required import for Frame/Graphics/Color
v-> // Method with empty unused parameter and Frame return
 new Frame(){ // Create a Frame (window for graphical output)
 public void paint(Graphics g){
 // Overwrite its default paint method:
 int i=0, // Index-integer, starting at 0
 t=84; // Temp-integer set to 84, to save bytes
 for(;i<6 // Loop `i` in the range [0,6):
 ; // After every iteration:
 g.fillRect( // Draw a rectangle
 168,i++*112+25,// at x,y position 168,112i+25
 // where the +25 is to account for the title-bar
 // and the 168 is for the white triangle
 891,112)) // of 891 pixels wide and 112 pixels high
 g.setColor(new Color(i<3?255:i/5*120,i%5<1?0:i%2>0?141-i:240/~-i,i>4?140:i>3?255:i/3*40));
 // Change the RGB-color based on `i`
 for(i=0;i<4 // Loop `i` again in the range [0,4):
 ; // After every iteration:
 g.fillPolygon( // Draw a polygon
 new int[]{0,0,(i+2)*t,i/3*t,i<1?0:~-i*t,(i+3)*t},
 // with x-coordinates
 new int[]{109-i*t,193-i*t,361,(i<3?6+i:8)*t+25,i++<1?613:697,361},
 // and y-coordinates
 6)) // of which there are 6 each
 g.setColor(new Color(i>1?i%3*50:255-i*145,i>1?i%3*25:180+i*40,i>1?i%3*10:200+i*40));}
 // Change the RGB-color based on `i`
 { // And in an inner initializer block:
 show();}} // Show the frame

Loop 1:

Index i	Rectangle {x,y}-coordinate 168,i++*112+25	RGB color i<3?255:i/5*120, i%5<1?0:i%2>0?141-i:240/~-i, i>4?140:i>3?255:i/3*40
0	168,25	\$\color{#FF0000}{\text{255,0,0}}\$
1	168,137	\$\color{#FF8C00}{\text{255,140,0}}\$
2	168,249	\$\color{#FFF000}{\text{255,240,0}}\$
3	168,361	\$\color{#008A28}{\text{0,138,40}}\$
4	168,473	\$\color{#0050FF}{\text{0,80,255}}\$
5	168,585	\$\color{#78008C}{\text{120,0,140}}\$

Loop 2:

Index i	Polygon {x,y}-coordinates 0,0,(i+2)*t,i/3*t,i<1?0:~-i*t,(i+3)*t 109-i*t,193-i*t,361,(i<3?6+i:8)*t+25,i++<1?613:697,361	RGB color i>1?i%3*50:255-i*145, i>1?i%3*25:180+i*40, i>1?i%3*10:200+i*40
0	{0,109},{0,193},{168,361},{0,529},{0,613},{252,361}	\$\color{#FFB4C8}{\text{255,180,200}}\$
1	{0,25},{0,109},{252,361},{0,613},{0,697},{336,361}	\$\color{#6EDCF0}{\text{110,220,240}}\$
2	{0,-59},{0,25},{336,361},{0,697},{84,697},{420,361}	\$\color{#643214}{\text{100,50,20}}\$
3	{0,-143},{0,-59},{420,361},{84,697},{169,697},{504,361}	\$\color{#000000}{\text{0,0,0}}\$

Answer 3

BBC Basic (削除) 210 (削除ここまで) 190 bytes

Golfing mainly comprises removal of unnecessary whitespace and use of abbreviations for keywords. At one point VDU25,0 is condensed to a single 16-bit value V.25; (the ; delimiter denotes that the preceding value is a 16-bit value instead of 8-bit.). At another, VDU25,101 is replaced with the higher level command PLOT101

MODE27h=672F.i=1TO33j=i MOD3IFj=1V.19,7,16
V.(ASCM."8 < 0S o(SP S< S 4*6ドルLPSDHSSS",i,1)-32)*5MOD257
IFj N.
IFi<19PLOT101,i MOD2*1782+336;h*i/9ELSEV.25;h;-h;25,81,-h;-h;25,97,-168;h*2;
N.

Download interpreter at https://www.bbcbasic.co.uk/bbcwin/download.html

This interpreter has certain features not included in the original BBC basic. It allows for larger screen modes and more colours. MODE 27 is 1280x960 pixels but the coordinate system is double that at 2560x1920.

The original BBC basic had (depending in screen mode) a maximum of 16 logical colours displayed at one time (to save memory) but there was facility to change these colours to any 18-bit physical colour using VDU19. This would instantaneously change the colour of all pixels of that colour on the screen (which was useful for fast animation.) This interpreter works differently. On execution of a VDU19 colours of existing pixels do not change, only newly drawn ones, and full 24-bit colour is supported.

Selecting the colour is a major part of this code, with 33 different RGB values. Most of them are divisible by 5, so I compressed them into printable ASCII by dividing by 5 and adding 32. The one exception is 138 for the green, which is taken as a larger number mod 257

Stripes are drawn using absolute coordinates with x=1059*2=2118 at the right and x=168*2=336 at the left. This leaves the graphics cursor in the correct position at the top right of the black chevron. 19VDU25,101,i MOD2*1782+336 causes the graphics cursor to zigzag from the default location in the bottom left corner of the screen to the top left corner of the red bar. The code 101 is for a rectangle defined by its opposite corners.

Chevrons are drawn using relative coordinates as a house-shape rotated 90 degrees, comprising a triangle and a rectangle. Subsequent chevrons overdraw the house shape to produce the correct chevron shape.

The graphics cursor is already at top right from the previous operation. It moves diagonally to the centre right point VDU25,0,h;-h;, then a triangle is drawn linking the last two positions of the graphics cursor to the bottom right VDU25,81,-h;-h;. The shape is completed by drawing a rectangle to the top left VDU25,97,-168;h*2; which leaves the cursor in the correct position for the next chevron.

After the brown chevron, certain parts of the final three chevrons are off the left side of the screen and are therefore not plotted.

First working version

MODE27
h=672
FORi=1TO33
j=i MOD3
IFj=1VDU19,7,16
VDU(ASCMID$("8 < 0S o(SP S< S 4*6ドルLPSDHSSS",i,1)-32)*5MOD257
IFj NEXT
IFi<19VDU25,101,i MOD2*1782+336;i/9*h;ELSEVDU25,0,h;-h;25,81,-h;-h;25,97,-168;h*2;
NEXT

Commented Code

MODE27 :REM select screen mode with 2560x920 logical coordinates, 1280x960 pixels
h=672 :REM half the logical height of the flag
FORi=1TO33 :REM iterate R,G,B through 11 colours
j=i MOD3 :REM if i MOD 3 = 1 tell VDU controller to expect a redefiniton of default logical colour 7 
IFj=1VDU19,7,16 :REM (below) extract R,G or B value from 1-indexed string, send to VDU controller
VDU(ASCMID$("8 < 0S o(SP S< S 4*6ドルLPSDHSSS",i,1)-32)*5MOD257
IFj NEXT :REM if i MOD 3 is not 0 draw nothing yet 
IFi<19VDU25,101,i MOD2*1782+336;i/9*h;ELSEVDU25,0,h;-h;25,81,-h;-h;25,97,-168;h*2;
NEXT :REM (above) if i MOD 3 = 0 draw a bar if i<19, otherwise draw a chevron.

enter image description here

Answer 4

Uiua, 113 characters

F←↯6_×ばつ133⊸=×ばつ5-@#
÷256⨬⋅∘(⊡:F"VVV###7-'9OSVGK")⊸≠0/+⊞&l×ばつ84↘2⇡7≡≡/+⌵-¤¤336_0⇡↯¤2⊸△しろさんかく▽112≡↯1059F"V##V?#VS##$+#3V;#?"

Try it here! (extend the run time limit so it actually works!)

enter image description here

The Progress Pride Polygons are placed where x+y in a coordinate system with a centered x-Axis is less than the specified width between the left edge and the polygon's right corner. I had to build a special case into F to handle 138 green, which is not a multiple of 5.

• jan: The builtin constants containing the colors to various LGBTQ-representation flags are all slightly different from the specification :(

Answer 5

PostScript, (削除) 156 (削除ここまで) ... 115 bytes

00000000: 3020 3087 6101 3232 3492 7f28 ffff ffff 0 0.a.224..(....
00000010: b4c8 6edc f064 3214 0000 00ff 0000 ff8b ..n..d2.........
00000020: 00ff f000 0089 4800 50ff 7800 8b29 7b32 ......H.P.x..){2
00000030: 3535 9236 7d92 4936 7b92 9d30 2030 8761 55.6}.I6{..0 0.a
00000040: 0133 3892 8030 8870 3392 3692 ad7d 9283 .38..0.p3.6..}..
00000050: 3136 3888 9092 ad31 3335 9288 357b 929d 168....135..5{..
00000060: 3020 3087 e703 9238 9280 8814 3230 92ad 0 0....8....20..
00000070: 7d92 83 }..

Before tokenization:

0 0 353 224 rectclip
<FFFFFFFFB4C86EDCF0643214000000FF0000FF8B00FFF0000089480050FF78008B>{255 div}forall
6{setrgbcolor 0 0 353 38 rectfill 0 112 3 div translate}repeat
168 -112 translate 135 rotate
5{setrgbcolor 0 0 999 dup rectfill 20 20 translate}repeat

output

Answer 6

cat tape | Brainfuck > out.ppm , 140 + 461 bytes

tape is a binary file, so here is xxd -p tape with some extra line breaks:

8c00780e0301000100
ff50009d0201000100
288a002d0201000100
00f0ff9d02ff000100
008cff0e03ff000100
0000ff7e03ff000101
000000540000000101
143264540000000101
f0dc6e000001000101
c8b4ff000000000101
ffffff000000000101
ff0054011c0238013802700200037002380438021c0454
ff20353532203237362039353031203650fe

you can paste this into tape.xxd and run xxd -r -p tape.xxd tape to generate it (on my linux at least). The program is:

++[-->,++]<+[-.<+]-<+[-[>>[-]-<[-]--<+[-<+]-<[-<[-<<<<[->>>+<<<<.<.<.>>>]>[->>>+<<<<-[-<.<.<.>>>]>]>>[-<<<+>>>]>[-<<<+>>>]+<<[-<<+>>>+<]<<+[>>]>>>[-<<<+>+>+>]>-[+<-]<[-<+>]<<<->>>>>+<]>[-<+>]+<<<<<<<<<]+[+[-->++]-->+]-<<-]+<[-[-[-[>[-]-<[-]-[-<+]-<<<<-[+<<<<<<<<<-]+->>>>>>>>>++[+[-->++]-->+]<++]>[[-]<[-]-[-<+]-<<<<[-]+[-->++]>]<]>[[-]-<[-]-[-<+]-<[<<<<<<<<<]+>>>>>>>>[+[-->++]-->+]<++>]<]>[[-]-<[-]-[-<+]-<<<<+[-<<<<<<<<<+]<<<<<<<<<->+[+[-->++]-->+]<++>]<]<+]

Giving this code that input makes it output a PPM file that looks like this:

The 1059x672 Flag that my brainfuck + tape program generates.

The program will first write the input from tape onto the tape, then output most of the last line, which is PPM header data about size and color depth.

To write this program, I conceptualized the flag as a bunch of horizontal stripes that change in position and width on every row of pixels. Some of the stripes are 0 pixels wide at some points in time. A stripe in memory is one of the 9-wide things at the start of tape.

Every line, every stripe that has nonskip (cell 8) and nonstop (cell 9) be 1 is drawn using its counter (cell 4 low, cell 5 high) and color (cells 1-3). Then, its delta byte (cell 6) gets added on to the counter, which is in base 255 instead of 256, by the way. After the line is done, a counter gets decremented in the second-to-last line, starting at the "top". ("the top": I imagined the finite end of the tape to be the bottom and the other one the top because I designed the tape mirrored and didn't want to confuse myself when implementing. Conveniently, this also goes in the opposite direction from how tape is displayed above) After some line, the counter will reach zero. Then, the associated command before it, from 0 to 4, will be executed. Then, the counter before that gets used for the next few lines, except if it is 255, then the program stops.

++[-->,++] read in binary file
< +[-.<+]- print until first FF 
< for every command counter except if it is FF do 
+[-
 for every line
 [
 >>[-]-<[-]--< make landing pad
 draw the line then add the delta:
 +[-<+]-< go to the first color struct
 [- while stop set temp unset it
 <[- if nonskip set temp unset it EZD0o0 
 <<<< go to ones
 for low byte of counter
 [->>>+<<< <.<.<.>>>] 
 >
 for high byte of counter
 [->>>+<<<
 <- set low byte of counter to FF which will make up for the missing 00 to FE underflow transition base FF would normally have 
 for 255 (in low byte of counter) 
 [- <.<.<.>>>]>
 ]
 reset counters
 >>[-<<<+>>>]>[-<<<+>>>]
 + set the 1 in EZD010
 << go to delta
 [-<<+>>>+<] moveadd delta onto ones and close scratch cell 0
 <<+ temp inc ones 
 Overflow No Overflow 
 [>>] oZ0D10 EZoD10 (after line)
 >>>[-<<<+>+>+>] DZDo10 EZ0D1o
 > -[+<-] DZD0o0 EZ0Do0 (blue never contains 1)
 < [-<+>] DZDo00 EZDo00
 <<<- redec ones
 >>>> go to nonskip
 temp inc nonstop >+<
 ]>+ inc nonstop possibly further
 -[-<+>]+ if nonstop is 2 reset nonskip
 <<<<< <<<< continue 
 ]
 +[- ++[-->++]-- > +]- go back up to the landing pad (dont start on FF)
 <<- decrement the command counter
 ]
 + have counter be 1 now named not prevent running code flag
 < execute the command 
 every command implementation will start and end on the same cell: command 4 on the command cell and the others on the nprc cell
 every command will unset the nprc cell and the command cell
 [
 -[
 -[
 -[ CCCCo1 
 >[-]-<[-]-- make landing pad FE FF
 command 4: move the nearest positive delta one towards the top 
 +[-<+]- < go to colors 
 <<< go to delta
 -[+<<<<< <<<<-]+ - find nearest positive delta and unset it
 >>>>> >>>> + set the one above
 +[- ++[-->++]-- > +]- + go back (not being on FF but landing there on the landing pad; then unsetting it)
 <++ unset FE
 ]
 >[
 [-]<[-]-- make landing pad FE 00
 command 3: set the delta on white to minus
 +[-<+]- < go to colors 
 <<< go to delta
 [-]- set to minus
 ++[-->++]-- ++ go back to command cell FE and unset it
 > nprc 
 ]<
 ]
 >[
 [-]-<[-]-- make landing pad FE FF
 command 2: set the topmost stripe with nonstop unset to nonstop and set the one above that to skip
 +[-<+]- < go to colors 
 [<<<<< <<<<]+ find nonstop unset and set it
 >>>>> >>>- unset above nonskip
 +[- ++[-->++]-- > +]- + go back (not being on FF but landing there on the landing pad; then unsetting it)
 <++> unset command cell FE
 ]<
 ]
 >[
 [-]-<[-]-- make landing pad FE FF
 command 1: move the nearest negative delta one towards the bottom
 +[-<+]- < go to colors 
 <<< go to delta
 +[-<<<<< <<<<+]- + find negative delta and unset it
 <<<<< <<<< - set the one below
 > go to scratch 0
 +[- ++[-->++]-- > +]- + go back (not being on FF but landing there on the landing pad; then unsetting it)
 <++> unset command cell FE
 ]<
 ]
 < move to next counter 
 + FF means stop
]

Answer 7

Python + Pylab, 294 bytes

Nothing beats nostalgia for me like the deprecated, Matlab-mimicking interactive plotting interface of 2010's then nascent IPython+Notebook environment that became today's "Jupyter Notebook" juggernaut that dominates the AI training scene.

from pylab import*
W,E=1059,enumerate
figure(0,(10.6,6.7))
for k,c in E('r #ff8c00 #fff000 #008a28 #0050ff #78008c'.split()):fill([0,W,W,0],2*[0]+2*[112*(6-k)],c)
for k,c in E('k #643214 #6edcf0 #ffb4c8 w'.split()):fill([0,Y:=84*(2-k),Y+336,Y,0],[0,0,336,672,672],c)
axis('off');xlim(0,W);box()

Nothing special to see here, except the occasional shortening because of matplotlib's base colors (black, white, red). And as the plotting library has helpful defaults, I spend some better part of 100 bytes of disabling them, and re-specifying the figure size.

Progress pride flag as plotted by Pylab code