47
\$\begingroup\$

This! is an RGB colour grid...

Basic RGB grid

Basically it's a 2-dimensional matrix in which:

  • The first row, and the first column, are red.
  • The second row, and the second column, are green.
  • The third row, and the third column, are blue.

Here are the colours described graphically, using the letters R, G, and B.

row and column diagram

Here's how we calculate the colour of each space on the grid is calculated.

  • Red + Red = Red (#FF0000)
  • Green + Green = Green (#00FF00)
  • Blue + Blue = Blue (#0000FF)
  • Red + Green = Yellow (#FFFF00)
  • Red + Blue = Purple (#FF00FF)
  • Green + Blue = Teal (#00FFFF)

The Challenge

  • Write code to generate an RGB colour grid.
  • It's code golf, so attempt to do so in the smallest number of bytes.
  • Use any programming language or markup language to generate your grid.
  • Things I care about:
    • The result should graphically display an RGB grid with the defined colours.
  • Things I don't care about:
    • If the output is an image, HTML, SVG or other markup.
    • The size or shape of the colour blocks.
    • Borders, spacing etc between or around the blocks.
    • It definitely doesn't have to have labels telling you what the row and column colours should be.
\$\endgroup\$
  • 2
    \$\begingroup\$ Can we output an mage object native to our language, for example a Bitmap object in C#? \$\endgroup\$ – Embodiment of Ignorance Apr 16 at 21:13
  • 1
    \$\begingroup\$ @EmbodimentofIgnorance sounds fine to me. \$\endgroup\$ – AJFaraday Apr 16 at 22:08
  • 11
    \$\begingroup\$ I'm waiting for the solution in Piet \$\endgroup\$ – manassehkatz Apr 17 at 0:25
  • 4
    \$\begingroup\$ @manassehkatz Is it just possible that hard-coding the data would be better golf than executing it? \$\endgroup\$ – AJFaraday Apr 17 at 8:09
  • 3
    \$\begingroup\$ Not that it really matters, but I'd personally have used cyan and magenta instead of teal and purple (or anything else). As far as I know, these are the official terms used in printing or subtractive color models such as CMYK. \$\endgroup\$ – Arnauld Apr 19 at 7:26

52 Answers 52

34
\$\begingroup\$

Bash, 44

  • 2 bytes saved thanks to @NahuelFouilleul
  • 2 bytes saved thanks to @manatwork
printf "${f=^[[3%dm.}$f$f
" 1 3 5 3 2 6 5 6 4

Here, blocks are . characters. ^[ is a literal ASCII escape character (0x1b).

enter image description here

You can recreate this script as follows:

base64 -d <<< cHJpbnRmICIke2Y9G1szJWRtLn0kZiRmCiIgMSAzIDUgMyAyIDYgNSA2IDQ= > rgbgrid.sh
\$\endgroup\$
  • 11
    \$\begingroup\$ what the heck? please explain :) \$\endgroup\$ – flawr Apr 17 at 7:28
  • 1
    \$\begingroup\$ can save 2 bytes using shell expansion printf ${f=\\e[3%dm.}$f$f\\n 1 3 5 3 2 6 5 6 4 \$\endgroup\$ – Nahuel Fouilleul Apr 17 at 7:28
  • 1
    \$\begingroup\$ This one really brightened my day, thank you! \$\endgroup\$ – AJFaraday Apr 17 at 8:29
  • 4
    \$\begingroup\$ printf \\e[3%dm. 1' expands to \\e[31m. which is the ANSI escape code for red and so on and . is the character to print. \$\endgroup\$ – Fredrik Pihl Apr 17 at 11:10
  • 3
    \$\begingroup\$ Continuing with @NahuelFouilleul's suggestion, double quote it: printf "${f=^[[3%dm.}$f$f␤" 1 3 5 3 2 6 5 6 4 (Where ^[ is a literal escape character=1 byte and ␤ a literal new line character=1 byte.) \$\endgroup\$ – manatwork Apr 17 at 12:39
26
\$\begingroup\$

8088 assembly, IBM PC DOS,  44  43 bytes

Listing:

BE 0122     MOV  SI, OFFSET CTBL    ; load color bar table into [SI]
        LOOP_COLOR: 
B9 0001     MOV  CX, 1              ; display 1 char and clear CH (changed by INT 10H:3)
AC          LODSB                   ; load next color byte 
8A D8       MOV  BL, AL             ; move new color to BL
3C 10       CMP  AL, 010H           ; if this is third color in row: SF=0, CF=0 
                                    ; else if last color: SF=1, CF=0
                                    ; else continue on same row: CF=1
B8 09DB     MOV  AX, 09DBH          ; AH=9 (write char with attr), AL=0DBH (a block char) 
CD 10       INT  10H                ; call PC BIOS, display color block
B4 03       MOV  AH, 3              ; get cursor position function
CD 10       INT  10H                ; call PC BIOS, get cursor
72 04       JC   NEXT_COL           ; if not last in row, move to next column 
78 09       JS   EXIT               ; if last color, exit 
B2 FF       MOV  DL, -1             ; otherwise move to first column and next row 
        NEXT_COL:
42          INC  DX                 ; move to next column (and/or row)
B4 02       MOV  AH, 2              ; set cursor position function 
CD 10       INT  10H                ; call PC BIOS, set cursor position
EB E2       JMP  LOOP_COLOR         ; loop to next color byte 
        EXIT:
C3          RET                     ; return to DOS
CTBL    DB  0CH, 0EH, 1DH, 0EH, 0AH, 1BH, 0DH, 0BH, 91H ; color table

This uses the IBM PC BIOS INT 10H video services to write the color grid to the screen. Unfortunately the only way to write a specific color attribute requires also writing code to place the cursor in the next correct location, so there's a lot of extra code for that.

Here's the output running on an IBM PC CGA (in 40x25 text mode to make it bigger).

enter image description here

Download and test RGBGRID.COM for DOS.

\$\endgroup\$
  • 1
    \$\begingroup\$ Will this work in dos, prib not but would be cool if it did. \$\endgroup\$ – marshal craft Apr 17 at 5:24
  • \$\begingroup\$ @marshalcraft Yes, in fact this will only work in DOS, or using a DOS emulator such as DOSBox, pcjs.org, etc. I've added a link to download the executable so you can give it a try. \$\endgroup\$ – 640KB Apr 17 at 12:56
  • \$\begingroup\$ Windows comes with limited dos emulator, probably now called command prompt, which I probably should have said, would be cool if it worked with cmd or PowerShell haha. \$\endgroup\$ – marshal craft Apr 17 at 16:24
  • 1
    \$\begingroup\$ @marshalcraft You are correct, however since it's for DOS it's a 16-bit executable, and if you have a 32-bit version of Windows it should actually run as it has a 16-bit runtime environment. However a 64-bit edition of Windows won't run it as it only has a 32-bit runtime. \$\endgroup\$ – 640KB Apr 17 at 16:33
  • 1
    \$\begingroup\$ God this is a cool answer \$\endgroup\$ – Samy Bencherif Apr 30 at 8:55
24
\$\begingroup\$

Wolfram Language (Mathematica), 41 bytes

Image@Outer[Plus,#,#,1]&@IdentityMatrix@3

enter image description here


Wolfram Language (Mathematica), 68 bytes

Mathematica has built-ins for all these colors.

Image@{{Red,Yellow,Magenta},{Yellow,Green,Cyan},{Magenta,Cyan,Blue}}

enter image description here

\$\endgroup\$
18
\$\begingroup\$

80386 machine code, IBM PC DOS, 38 bytes

hex:

B0 13 CD 10 68 00 A0 1F 66 C7 06 00 00 28 2C 24
00 66 C7 06 40 01 2C 30 34 00 66 C7 06 80 02 24
34 20 00 CD 16 C3

asm:

mov al,13h
int 10h ; initialize vga 13h mode (320x200x256 colors)
push 0a000h
pop ds ; push video buffer address to ds
mov dword ptr ds:0, 242c28h ; print 3 pixels
mov dword ptr ds:320, 34302ch ; print 3 pixels
mov dword ptr ds:640, 203424h ; print 3 pixels
int 16h ; wait for any keypress
ret ; exit to os

scaled output from dosbox:

enter image description here

\$\endgroup\$
  • \$\begingroup\$ Note that mov al, 13h is incorrect unless it is guaranteed by DOSBox to have ah = 0 at the program entrypoint. \$\endgroup\$ – Margaret Bloom Apr 17 at 15:18
  • \$\begingroup\$ @MargaretBloom ax is 0 at start of com application in ms dos \$\endgroup\$ – Iłya Bursov Apr 17 at 15:27
  • \$\begingroup\$ Thanks Iłya, that's good to know! \$\endgroup\$ – Margaret Bloom Apr 18 at 7:13
18
\$\begingroup\$

Excel VBA (Immediate Window), 80 bytes

For i=1To 9:Cells(i Mod 3+1,(i+1)/3).Interior.ColorIndex=Mid(673486857,i,1):Next

Excel VBA (Function), 96 bytes

Sub g()
For i=1To 9
Cells(i Mod 3+1,(i+1)/3).Interior.ColorIndex=Mid(673486857,i,1)
Next
End Sub

Not a horrible tool for the job... I appreciate the fact that Excel already shows a grid so it is a matter of setting the background color.

Excel Colour Grid

Credit to @Neil for suggesting I use ColorIndex instead of Color leading to a 43 byte savings.

-21 bytes thanks to @Keeta

-16 bytes thanks to @Chronocidal for suggesting the "Immediate Window"

-2 bytes thanks to @i_saw_drones

Lots of changes from my original submission :)

\$\endgroup\$
  • 1
    \$\begingroup\$ You could probably do better with ColorIndex as that's a number from 3 to 8 here, which you could encode in a string or something. \$\endgroup\$ – Neil Apr 17 at 8:32
  • \$\begingroup\$ @Neil - Indeed :) I was able to get it quite a bit shorter using that. Thanks for the tip. \$\endgroup\$ – dana Apr 17 at 17:15
  • \$\begingroup\$ I didn't see anything that stops you from changing this to Sub F() and End Sub for more savings. \$\endgroup\$ – Keeta Apr 18 at 12:46
  • 1
    \$\begingroup\$ Don't make it a function, and run this in the Immediate Window to drop 21 bytes: for i=1 To 3:for j=1 To 3:Cells(i,j).Interior.ColorIndex=Mid("367408005",i*j,1):next j,i \$\endgroup\$ – Chronocidal Apr 18 at 15:40
  • 1
    \$\begingroup\$ You can also remove quotes from the string, VBA will coerce the number into a string automatically. \$\endgroup\$ – i_saw_drones Apr 18 at 16:16
16
\$\begingroup\$

GFA Basic 2.02 (Atari ST), 48 bytes

A manually edited listing in .LST format. Includes many non-printable characters, whose codes are shown within brackets.

?"[ESC]c[SOH] [ESC]c[ETX] [ESC]c[ENQ] "[CR]
?"[ESC]c[ETX] [ESC]c[STX] [ESC]c[ACK] "[CR]
?"[ESC]c[ENQ] [ESC]c[ACK] [ESC]c[EOT] "[CR]

The operating system of the Atari ST defines extended VT52 commands which are used here.

Output

The output is a block of \$24\times24\$ pixels (9 space characters of \$8\times8\$ pixels).

output

screenshot from Steem SSE

\$\endgroup\$
  • \$\begingroup\$ +1 for making me all nostalgic for my trusty old ST. \$\endgroup\$ – Wossname Apr 17 at 7:56
16
\$\begingroup\$

SVG, 210 182 bytes

<svg><path d="h3v3h-3" fill=#f0f/><path d="h2v2h-2" fill=#ff0/><path d="m1 1h2v2h-2" fill=#0ff/><line x2=1 stroke=red/><path d="m1 1h1v1h-1" fill=#0f0/><path d="m2 2h1v1" fill=#00f/>

Since the size or shape of the colour blocks doesn't matter, quite a few bytes can be golfed off with this slightly odd layout:

svg layout

\$\endgroup\$
  • \$\begingroup\$ I really like the ingenuity of this solution. \$\endgroup\$ – AJFaraday Apr 18 at 21:05
16
\$\begingroup\$

HTML + CSS, 121 120 bytes

Worst piece of HTML I've ever wrote. One byte save thanks to @Gust van de Wal

b{color:#ff0}a{color:cyan}i{color:lime}u{color:blue
<pre><body bgcolor=#f0f text=red>█<b>█
█<i>█<a>█
 █<u>█

HTML + CSS, 114 bytes (semi valid)

I'm putting this as semi-valid because the blue is not exactly #0000FF blue and also relies on not having clicked the link.

Thanks to @Lynn for the idea

b{color:#ff0}i{color:lime}c{color:cyan
<pre><body bgcolor=#f0f text=red>█<b>█
█<i>█<c>█
 █<a href=x>█

\$\endgroup\$
  • 3
    \$\begingroup\$ You can omit the last closing bracket in the CSS. Also, incredible (and sickening) work! \$\endgroup\$ – Gust van de Wal Apr 17 at 21:16
  • 3
    \$\begingroup\$ You can change the tag names to avoid the default CSS formatting, e.g. <w>, <x>, <y>, and <z>. \$\endgroup\$ – darrylyeo Apr 18 at 19:14
  • 1
    \$\begingroup\$ <a href=x>█ will be blue by default, saving you some bytes of CSS :) \$\endgroup\$ – Lynn Apr 20 at 0:21
15
\$\begingroup\$

ditaa, 118 bytes

/----+----+----\
|cF00|cFF0|cF0F|
+----+----+----+
|cFF0|c0F0|c0FF|
+----+----+----+
|cF0F|c0FF|c00F|
\----+----+----/

This is the output using -E option:

enter image description here

\$\endgroup\$
13
\$\begingroup\$

R, 89 50 48 bytes

Newest version:

image(matrix(c(6,4,5,2:4,1,2),3),col=rainbow(6))

Not enough elements in the vector to fill the 3x3 matrix, so it wraps around and reuses the first element.

Old versions:

image(matrix(c(6,4,5,2:4,1,2,6),3),col=rainbow(6))

image(matrix(c(3,5,6,2,4,5,1:3),3),col=c('red','yellow','magenta','green','cyan','blue'))

enter image description here

\$\endgroup\$
  • 3
    \$\begingroup\$ Welcome to PPCG! \$\endgroup\$ – Embodiment of Ignorance Apr 16 at 21:45
  • 1
    \$\begingroup\$ wow it's Rainbow Six! \$\endgroup\$ – Yong Quan Apr 18 at 3:21
  • \$\begingroup\$ @alephalpha Yikes, I can't believe I missed that. I went ahead and fixed the oldest version and character count \$\endgroup\$ – anjama Apr 19 at 12:22
12
\$\begingroup\$

Excel-VBA, 89 73 72 70 bytes

Edit: You can use the immediate window and dispense with the Sub/End Sub to save 16 bytes:

For i=1To 9:[A:C].Cells(i).Interior.ColorIndex=Mid(367648785,i,1):Next

Original answer:

Sub a()
For i=1To 9
[A1:C3].Cells(i).Interior.ColorIndex=Mid(367648785,i,1)
Next
End Sub

This was inspired by Neil's suggestion on this answer, and is my first submission!

Result:

Result Grid

-2 bytes: Removal of cell row numbers - thanks to Taylor Scott!

\$\endgroup\$
  • 3
    \$\begingroup\$ Welcome to PPCG! \$\endgroup\$ – Johan du Toit Apr 17 at 14:50
  • 1
    \$\begingroup\$ Thank you! Hopefully I'll learn some tricks from the masters :) \$\endgroup\$ – i_saw_drones Apr 18 at 16:33
  • \$\begingroup\$ For i=1To 9:[A:C].Cells(i).Interior.ColorIndex=Mid(367648785,i,1):Next for 70 \$\endgroup\$ – Taylor Scott May 13 at 19:59
11
\$\begingroup\$

Perl 6 (and probably similar for many languages) (31 bytes)

{'ÿ   ÿÿÿ ÿ ÿÿ  ÿ ÿÿÿ ÿ ÿÿ  ÿ'}   # replace spaces with ASCII 00
                                  # which I can't seem to enter

This outputs a headless TIFF file, which used to be generated by Photoshop with the file extension .raw and is presumed to be square unless otherwise specified at the time of opening. Playing around with the color depth (if allowed) could reduce this down further.

\$\endgroup\$
11
\$\begingroup\$

ffplay (ffmpeg), 93 bytes

ffplay -f rawvideo -s 3x3 -pix_fmt rgb24 "data:/;base64,/wAA//8A/wD///8AAP8AAP///wD/AP//AAD/"

Old:

ffplay -f lavfi -i testsrc=s=3x3,geq=r=255*not(X*Y):g=255*not((X-1)*(Y-1)):b=255*not((X-2)*(Y-2))
\$\endgroup\$
10
\$\begingroup\$

\$\Large{\mathbf{\TeX} \left(\text{MathJax}\right)},~122\,\text{bytes}\$

$$ \def\c#1{\color{#1}{\rule{5em}{5em}}} \c{red} \c{yellow} \c{fuchsia} \\ \c{yellow} \c{lime} \c{aqua} \\ \c{fuchsia} \c{aqua} \c{blue} $$

Golf'd:

$\def\c#1{\color{#1}{\rule{5em}{5em}}}\c{red}\c{yellow}\c{fuchsia}\\\c{yellow}\c{lime}\c{aqua}\\\c{fuchsia}\c{aqua}\c{blue}$

Ungolf'd:

$$
\def\coloredBox#1{\color{#1}{\rule{5em}{5em}}}
\coloredBox{red}
\coloredBox{yellow}
\coloredBox{fuchsia} \\
\coloredBox{yellow}
\coloredBox{lime}
\coloredBox{aqua}    \\
\coloredBox{fuchsia}
\coloredBox{aqua}
\coloredBox{blue}
$$

Edits:

  1. Thanks to @flawr for pointing out how to fix the colors!

  2. Could shave off \$14\,\text{bytes}\$ by replacing \rule{5em}{5em} with , which'd look like$$ \def\d#1{\color{#1}{▉}} \d{red} \d{yellow} \d{fuchsia} \\ \d{yellow} \d{lime} \d{aqua} \\ \d{fuchsia} \d{aqua} \d{blue} $$

    , but just doesn't look quite the same.

  3. Could probably shave off a few more bytes by finding color names that acceptably resemble the intended colors.

  4. Just to show what a decently \$\mathrm{\TeX}\text{'d}\$ version of this would look like:$$ {\newcommand{\rotate}[2]{{\style{transform-origin: center middle; display: inline-block; transform: rotate(#1deg); padding: 50px}{#2}}}} {\def\place#1#2#3{\smash{\rlap{\hskip{#1em}\raise{#2em}{#3}}}}} {\def\placeBox#1#2#3{\place{#1}{#2}{\color{#3}{\rule{5em}{5em}}}}} {\def\placeLabelTop#1#2#3{\place{#1}{#2}{\large{\textbf{#3}}}}} {\def\placeLabelLeft#1#2#3{\place{#1}{#2}{\rotate{-90}{\large{\textbf{#3}}}}}} \placeLabelTop{1.1}{15.5}{Red} \placeLabelTop{5.5}{15.5}{Green} \placeLabelTop{11.2}{15.5}{Blue} \placeLabelLeft{-6.2}{13.6}{Red} \placeLabelLeft{-7.1}{8.5}{Green} \placeLabelLeft{-6.5}{3.5}{Blue} \placeBox{0}{10}{red} \placeBox{5}{10}{yellow} \placeBox{10}{10}{fuchsia} \placeBox{0}{5}{yellow} \placeBox{5}{5}{lime} \placeBox{10}{5}{aqua} \placeBox{0}{0}{fuchsia} \placeBox{5}{0}{aqua} \placeBox{10}{0}{blue} \place{15.1}{0}{\large{.}} \phantom{\rule{15em}{16.5em}} $$

\$\endgroup\$
  • 1
    \$\begingroup\$ I think your colors are not correct. But apart from that I'd upvote your post if only for the title:) \$\endgroup\$ – flawr Apr 17 at 6:56
  • \$\begingroup\$ @flawr Yeah, they look different than the ones in the question statement, but I figured that if that's how \$\mathrm{\TeX}\$ renders those colors by the names given in the question statement, hopefully it'll be close enough. =P \$\endgroup\$ – Nat Apr 17 at 6:56
  • 1
    \$\begingroup\$ It seems mathjax uses the css color names. So you could replace purple with fuchsia and teal with aqua and green with lime then things would be correct I think. \$\endgroup\$ – flawr Apr 17 at 7:02
  • \$\begingroup\$ Just to note it: The above could be golf'd a bit more by removing some {}'s. But that'd violate too many clean coding principles for my sanity. =P \$\endgroup\$ – Nat Apr 17 at 8:49
  • 5
    \$\begingroup\$ Just note that the PPCG community was never famous for its sanity. If anything probably for the lack thereof. \$\endgroup\$ – flawr Apr 17 at 8:51
10
\$\begingroup\$

Lua + LÖVE/Love2D, 186 183 bytes

t={[0>1]=0,[0<1]=1}l=love g=l.graphics function l.draw()for i=1,3 do for j=1,3 do g.setColor(t[i<2 or j<2],t[i==2 or j==2],t[i>2 or j>2])g.rectangle('fill',j*10,i*10,10,10)end end end

Try it online!

enter image description here

My first code golf entry!

\$\endgroup\$
  • 1
    \$\begingroup\$ Welcome to Code Golf! Nice work! \$\endgroup\$ – AJFaraday Apr 17 at 9:17
  • 1
    \$\begingroup\$ I think you could use expressions in your truth table: t={[0>1]=0,[0<1]=1}. \$\endgroup\$ – manatwork Apr 17 at 13:00
  • 1
    \$\begingroup\$ @manatwork Smart! \$\endgroup\$ – Sheepolution Apr 17 at 20:30
  • \$\begingroup\$ another löver, nice to see you here \$\endgroup\$ – Lycea Jun 3 at 8:59
10
\$\begingroup\$

MATL, 44 23 21 20 19 bytes

A direct port of my Octave answer with the suggestions from @ExpiredData and @LuisMendo.

126973007Bo7B3*e0YG

try it online

\$\endgroup\$
9
\$\begingroup\$

Octave/MATLAB, 57 56 40 bytes

-17 byte thanks to @ExpiredData! Check out their even golfier solution!

image(reshape(de2bi(126973007),[3,3,3]))

Try it online!

\$\endgroup\$
  • 1
    \$\begingroup\$ Does just image work instead of imshow? Don't have a Matlab license any more and I'm on phone so can't test it \$\endgroup\$ – Expired Data Apr 17 at 6:35
  • 2
    \$\begingroup\$ @ExpiredData Thanks a lot, that works indeed! \$\endgroup\$ – flawr Apr 17 at 6:52
  • 2
    \$\begingroup\$ You can probably do this too Try it online! \$\endgroup\$ – Expired Data Apr 17 at 6:57
  • 1
    \$\begingroup\$ @ExpiredData ---Very nice trick, thanks a lot! :)--- why don't you post this as an own answer? \$\endgroup\$ – flawr Apr 17 at 7:03
  • 3
    \$\begingroup\$ Ok I will do that \$\endgroup\$ – Expired Data Apr 17 at 7:07
9
\$\begingroup\$

Factorio Blueprint String, 705 bytes

I admit, I'm just pushing the limits of what counts as a solution.

0eNrdWNGOqyAQ/ReedeNo0daH/ZHNTYOW7ZJFNAi91zT99wua7ZpdaaT1pb40oQ6HOecwA3pGBde0kUwolJ8RK2vRovztjFp2FITb/1TXUJQjpmiFAiRIZUdtzYkMGyIoR5cAMXGg/1AOlz8BokIxxegA0w+6vdBVQaUJuAKQstSV5kTV0qA2dWvm1MKuZ3FecIA6lIf4BV8uwS+YeDKPXzBhPKAkUxjJPAy4AbG5QljZFBEqLOuqYGKa1Vc6YAQzE5Ss+b6gH+TETLQJeWdcUemQ/8Sk0oSPHOgjQkkPqMfT1kEYWzEsI2hpc2gtFtgfO2NkDTMjbIKnCOLv1SrCechJ1UzwSm7zKpksNVN78+xwnffOZKv2s2kS0akPJo4D10FslEd2UDVE9oLn6NU+1i01S/HaKqmkpvNl2DhkSGfJEK1Eha1DhWyWCmvZCzuHCtu7aj5asuQ7ynn99/GqT0f07BjAwXnnx3kohEW7XMPE5+OEs5+EUwdhiL4T0IVh3LNzHlMwfUoB+LTPeK19A2LPkoGbety1f46SUvH4BoLExTHxOCKe3mmIXTJ43ogGp5MlnS47soTR+GeryFyUscex+PzOu65IkPr0OrzW2wFkHn0Ar3c3eN6S4pt63NUH7GvtAn3AafTOo+yf3+jhbDcv9/1XgHz00SBAJ+NNn3uWRJDiDcDWXIf+Aya7oEk=

Produced output when placed in-game (low graphics settings used):

enter image description here

To prove that it is a valid solution you need to sample this grid of pixels which do match the specification exactly:

enter image description here

The rest of the image is classified as a border or a spacing which, as said in the question, doesn't matter.

\$\endgroup\$
8
\$\begingroup\$

Octave, 38 bytes

image(reshape(de2bi(126973007),3,3,3))

Try it online!

\$\endgroup\$
8
\$\begingroup\$

HTML/CSS, 278 141 137 bytes

r{color:red}y{color:#ff0}m{color:#f0f}g{color:#0f0}c{color:#0ff}l{color:#00f
<pre><r>█<y>█<m>█
<y>█<g>█<c>█
<m>█<c>█<l>█

-137 bytes thanks to commenters, most notably @data
-4 bytes thanks to @Einacio

Uses Unicode (U+2588) for the "blocks", and uses CSS classes/inline style to color them.

I think the <font> tags could be golfed more, however changing them to a shorter tag such as <a> breaks the color attribute

\$\endgroup\$
  • 1
    \$\begingroup\$ Leave out </td>, the browser is smart enough to automatically add this closing tag \$\endgroup\$ – Ferrybig Apr 16 at 20:01
  • 3
    \$\begingroup\$ If using deprecated elements, you can also specify the background color of a cell using <td bgcolor=#f00> \$\endgroup\$ – Ferrybig Apr 16 at 20:03
  • 2
    \$\begingroup\$ Maybe a noob question, but can't you avoid using the table and just print the █ and go to a new line with <br>? \$\endgroup\$ – frarugi87 Apr 17 at 7:34
  • 1
    \$\begingroup\$ @frarugi87 yes - 235 total: <span style="color:red">█<span class=a>█<span class=b>█<br><span class=a>█<span style="color:#0f0">█<span class=c>█<br><span class=b>█<span class=c>█<span style="color:#00f">█ \$\endgroup\$ – ASCII-only Apr 17 at 8:47
  • 1
    \$\begingroup\$ @ASCII-only b{color:#ff0}u{color:#f0f}i{color:#0ff} <pre><font color=red>█<b>█<u>█ <b>█<font color=lime>█<i>█ <u>█<i>█<font color=blue>█ \$\endgroup\$ – data Apr 17 at 12:19
7
\$\begingroup\$

JavaScript, 108 102 bytes

console.log(`%c█%c█%c█
`.repeat(3),...[...`320251014`].map(c=>`color:#`+`f0ff00f0`.substr(c,3)))

No snippet because this only works in a real browser console and not the snippet's console. Edit: Thanks to @AJFaraday for the screenshot. Explanation: Browsers allow the first parameter of console.log to include substitutions. The %c substitution takes a parameter and applies it as (sanitised) CSS. Each block is therefore coloured using the appropriate substring of f0ff00f0 interpreted as a three-hex-digit colour code.

Example of code execution

\$\endgroup\$
  • 1
    \$\begingroup\$ I don't get how this works? \$\endgroup\$ – marshal craft Apr 17 at 5:25
  • 1
    \$\begingroup\$ @marshalcraft %c is used to create a format string, the arguments being CSS styles for the text after it \$\endgroup\$ – ASCII-only Apr 17 at 8:43
  • 1
    \$\begingroup\$ So this is basically like dos versions but with chrome browser? \$\endgroup\$ – marshal craft Apr 17 at 16:26
  • 1
    \$\begingroup\$ Just curious but how did you go about finding the shortest possible chain of fs/0s to use? \$\endgroup\$ – Marie Apr 17 at 18:03
  • 2
    \$\begingroup\$ @Marie I started by noting that ff0ff contains all the mixed colours and 00f00 contains all the pure colours. If you concatenate them you get duplicate positions for ff0 and f00 so you can then remove the first and last characters. I then wrote a short script to check all 7-character strings to ensure that 8 was optimal. \$\endgroup\$ – Neil Apr 17 at 19:38
7
\$\begingroup\$

HTML (GIF), 108 bytes

It's the battle of the web-based image formats! (Any TIF or JPG contenders out there?)

Answer by @A C.

<img src=data:image/gif;base64,R0lGODdhAwADAMIGAAAA//8AAP8A/wD/AAD/////AAAAAAAAACwAAAAAAwADAAADBhglNSQEJAA7>


HTML (BMP), 116 115 bytes

Answer by @ASCII-only.

<img src=data:image/bmp;base64,Qk0+AAAAQVNDTxoAAAAMAAAAAwADAAEAGAD/AP///wD/AAAAAAAA//8A/wD//wAAAAAAAP8A////AP8AAAA>


HTML (WebP), 116 bytes

Answer by @Hohmannfan.

<img src=data:image/webp;base64,UklGRjYAAABXRUJQVlA4TCoAAAAvAoAAAC8gEEjaH3qN+RcQFPk/2vwHH0QCg0I2kuDYvghLcAoX0f/4Hgc>


HTML (PNG), 151 136 135 bytes

-15 bytes thanks to @Hohmannfan.

<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAFElEQVR4AWP4z8Dw/z8DEIIodB4A4D0O8pOGuTgAAAAASUVORK5CYII>


Also, see my CSS and SVG answers.

\$\endgroup\$
  • 3
    \$\begingroup\$ Good idea but.. It seems to me that a 89 bytes file for a 9 pixel image is a bit too much. Maybe manually writing a BMP header can golf this down. If I'm not wrong, the bare minimum header is 26 bytes, plus 12 of actual data (3 rows of 4 pixels) can trim the image down to 38 bytes, which in base64 means 51 or 52 characters rather than 119 \$\endgroup\$ – frarugi87 Apr 17 at 8:26
  • 2
    \$\begingroup\$ 118: <img src="data:image/bmp;base64,Qk0+AAAAQVNDTxoAAAAMAAAAAwADAAEAGAD/AP///wD/AAAAAAAA//8A/wD//wAAAAAAAP8A////AP8AAAA=">. 14 byte file header, 12 byte application header, 9 of actual data per row (+3 to pad to multiple of 4), yeah \$\endgroup\$ – ASCII-only Apr 17 at 9:13
  • 2
    \$\begingroup\$ I haven't counted, but I suspect that <img src="data:image/gif;base64,R0lGODdhAwADAMIGAAAA//8AAP8A/wD/AAD/////AAAAAAAAACwAAAAAAwADAAADBhglNSQEJAA7"> is shorter \$\endgroup\$ – A C Apr 18 at 13:08
  • 2
    \$\begingroup\$ Here's a png file that's 15 bytes smaller when base64 encoded: iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAFElEQVR4AWP4z8Dw/z8DEIIodB4A4D0O8pOGuTgAAAAASUVORK5CYII= \$\endgroup\$ – Hohmannfan Apr 18 at 18:56
  • 2
    \$\begingroup\$ To continue the format battle, here's a lossless WebP solution. I can't cut it down anymore without violating the spec, so it narrowly beaten by BMP at 116 bytes. <img src=data:image/webp;base64,UklGRjYAAABXRUJQVlA4TCoAAAAvAoAAAC8gEEjaH3qN+RcQFPk/2vwHH0QCg0I2kuDYvghLcAoX0f/4Hgc> \$\endgroup\$ – Hohmannfan Apr 18 at 19:12
6
\$\begingroup\$

dc (on xterm), 64 bytes

Fi16[AP]sF36dD6r31 101dD6rD1[1CP61P[38;5;]Pn[mX]Pz3%0=Fz0<M]dsMx

You'll just get a bunch of wacky escape codes instead of colors, but you can still try it online!

By my understanding, the 16 basic ANSI colors are free to be interpreted however the terminal wants. On the other hand, the 216 colors in the xterm color cube have explicit RGB values. I am using these codes and printing a grid of Xs:

buncha colorful 'x's

First we set the input radix to base 15 with Fi. This costs two bytes, but gives back three, so... a net gain of a byte (and a big ol' loss in readability). Next we're trying to get our color values onto the stack. In decimal, this would be 21 51 201 51 46 226 201 226 196, but we're in wacky mode so it's going to be 16 36 D6 36 31 101 D6 101 D1. We eliminate one of the spaces by slotting in a macro we need to define at some point, [AP]sF (which simply prints a line feed). We can shrink 36 D6 36 and 101 D6 101 by placing the first value on the stack, duplicating it, placing the second, and then swapping (36dD6r, 101dD6r).

Macro M handles the printing and whatnot. 1CP prints the escape character. Brackets are used to delimit strings, and as far as I know are not escapable, so we need to print the bracket with an ASCII value as well, 61P. [38;5;]P is the 'set foreground color from the numbered list' code. n prints the value from the top of the stack w/o a newline, popping it. [mX]P ends the code and prints an 'X'. z3%0=F checks the stack depth mod 3, running our line feed macro F when necessary. z0<M keeps M running as long as there's stuff on the stack. dsMx to run.

Note that if you run this in dc in an xterm, it'll leave your foreground color blue. 1CP61P74P (input shown in the screenshot) should reset this.

\$\endgroup\$
6
\$\begingroup\$

Blockly turtle, 45 blocks

Try it online!

How about we play a little game of finding the most ridiculous tool for the job?

Output:

The glorious output of this glorious piece of crappy programming

The program (as a screenshot for additional heresy):

The program as a screenshot for additional heresy

Note: The grayed out blocks are also counted towards the metric.

\$\endgroup\$
  • 1
    \$\begingroup\$ I’d love that to be a standard PCG challenge! Instead it happens organically on some code golf puzzles \$\endgroup\$ – AJFaraday Apr 19 at 8:00
5
\$\begingroup\$

Node.js, 79 bytes

require('fs').writeFile(a='P',a+[...'3331100110101110010011101011001'].join` `)

Produces a file named "P" in the PPM format containing the color grid.

\$\endgroup\$
5
\$\begingroup\$

TI-Basic, x bytes (will score when I can)

Note: content filter is blocking me from looking up the token sizes for each of these commands. If anyone wants to score for me, go for it.

TextColor(11
Text(0,0,"0"
TextColor(19
Text(0,2,"0"
Text(2,0,"0"
TextColor(13
Text(4,0,"0"
Text(0,4,"0"
TextColor(14
Text(2,2,"0"
TextColor(18
Text(2,4,"0"
Text(4,2,"0"
TextColor(17
Text(4,4,"0"

This look really bad on my little calculator screen. But hey, shape doesn't matter :^)

Golf output:

enter image description here

Modified for 8x larger output:

enter image description here



TI-BASIC, x bytes

Using Pxl-On instead of Text:

Pxl-On(0,0,11
Pxl-On(0,1,19
Pxl-On(0,2,13
Pxl-On(1,0,19
Pxl-On(1,1,14
Pxl-On(1,2,18
Pxl-On(2,0,13
Pxl-On(2,1,18
Pxl-On(2,2,17

Output:

enter image description here

Blown up ~11x:

enter image description here

\$\endgroup\$
  • \$\begingroup\$ It's 180 characters, excluding line breaks. I'm not sure how/if line breaks are counted in code golf. \$\endgroup\$ – Nat Apr 18 at 20:09
  • 4
    \$\begingroup\$ Yes, but TI-BASIC is a tokenized language - for example, the interpreter sees TextColor as 2 bytes, not 9 as you would expect @Nat \$\endgroup\$ – Benjamin Urquhart Apr 18 at 22:00
4
\$\begingroup\$

C++, SFML, 177 bytes

#include<SFML/Graphics.hpp>
int d[]={255,65535,0xFF00FF,65535,65280,0xFFFF00,0xFF00FF,0xFFFF00,0xFF0000};void f(){sf::Image g;g.create(3,3,(sf::Uint8*)d);g.saveToFile("a.jpg");}

Uses sf::Image::create(int,int,unsigned char*) method to create an image with rgb values in it

\$\endgroup\$
  • \$\begingroup\$ You can shave off one byte by writing 0xFF0000 as 255<<16. \$\endgroup\$ – Broxzier Apr 23 at 7:06
  • 1
    \$\begingroup\$ Taking it a bit further, you can save 13 bytes by defining the R/G/B colour values in variables before the array: int b=255<<16,g=65280,r=255,d[]={r,g|r,b|r,g|r,g,b|g,b|r,b|g,b}; \$\endgroup\$ – Broxzier Apr 23 at 21:35
4
\$\begingroup\$

C#, 248 204 198 bytes

class P{static void Main(){for(int i=0;i<12;i++){foreach(dynamic n in Enum.GetValues(typeof(ConsoleColor)))if((""+n)[0]=="RYMRYGCRMCBR"[i])Console.BackgroundColor=n;Console.Write(i%4<3?" ":"\n");}}}

Output:
enter image description here

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

BASIC C64, 106 bytes

0 POKE53281,0
1 DATA144,28,158,156,144,13,158,30,159,144,13,156,159,31,144
2 READA:PRINTCHR$(A)+"o";:GOTO2

enter image description here

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

Wolfram Language (Mathematica), 72 bytes

Grid@Partition[RGBColor/@Unitize[Total/@Tuples[IdentityMatrix@3,{2}]],3]

enter image description here

\$\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.