51
\$\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\$
15
  • 2
    \$\begingroup\$ Can we output an mage object native to our language, for example a Bitmap object in C#? \$\endgroup\$
    – Gymhgy
    Commented Apr 16, 2019 at 21:13
  • 1
    \$\begingroup\$ @EmbodimentofIgnorance sounds fine to me. \$\endgroup\$
    – AJFaraday
    Commented Apr 16, 2019 at 22:08
  • 12
    \$\begingroup\$ I'm waiting for the solution in Piet \$\endgroup\$ Commented Apr 17, 2019 at 0:25
  • 4
    \$\begingroup\$ @manassehkatz Is it just possible that hard-coding the data would be better golf than executing it? \$\endgroup\$
    – AJFaraday
    Commented Apr 17, 2019 at 8:09
  • 4
    \$\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
    Commented Apr 19, 2019 at 7:26

61 Answers 61

37
\$\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\$
8
  • 11
    \$\begingroup\$ what the heck? please explain :) \$\endgroup\$
    – flawr
    Commented Apr 17, 2019 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\$ Commented Apr 17, 2019 at 7:28
  • 1
    \$\begingroup\$ This one really brightened my day, thank you! \$\endgroup\$
    – AJFaraday
    Commented Apr 17, 2019 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\$ Commented Apr 17, 2019 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
    Commented Apr 17, 2019 at 12:39
30
\$\begingroup\$

x86-16 machine code, IBM PC DOS, 43 bytes

00000000: be22 01b9 0100 ac8a d83c 10b8 db09 cd10  .".......<......
00000010: b403 cd10 7204 7809 b2ff 42b4 02cd 10eb  ....r.x...B.....
00000020: e2c3 0c0e 1d0e 0a1b 0d0b 91              ...........

Listing:

BE 0122     MOV  SI, OFFSET CT      ; 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 (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
        CT  DB   0CH, 0EH, 1DH      ; color table
            DB   0EH, 0AH, 1BH 
            DB   0DH, 0BH, 91H

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

TL;DR

Here's a more verbose explanation, with more detail of what some of these machine code instructions do.

Color table

The colors are stored as bytes in the color table (CTBL) with the 4-bit color value in the low nibble and a flag value in the high nibble. A 1 in the high nibble signals the end of the row and a 9 signals the end of the list.

This is checked using a single CMP instruction which subtracts 0x10 from the color values and sets the result flags. These operands are treated as 8-bit signed values, so the sign flag (positive or negative result) and carry flag (a subtractive borrow was required, meaning the color byte is less than 0x10) are the interesting ones here. These flags are then checked further down for the conditional logic of whether to advance the row, the column or end the program.

Examples:

High nibble 0 means not the last in the row and not the last in the list:

  • 0x0C - 0x10 = 0xFC -- Result is negative and a carry (borrow) was required

High nibble 1 means it is the last color in the row and not the last in the list:

  • 0x1D - 0x10 = 0x0D -- Result is positive and no borrow

High nibble 9 means it is the last color of the list:

  • 0x91 - 0x10 = 0x81 -- Result is negative and no borrow

Cursor movement

Using the PC BIOS or DOS API for output, the function that allows setting a character color does not automatically advance the cursor, so that has to be done by the program. The cursor position must be fetched each time since the registers are overwritten later by the other functions. The "get" function puts these into the 8-bit registers DL for the column, and DH for the row. These same registers are what is used by the "set" function to move the cursor to a new location.

We can take advantage of the fact that, on x86 architecture DH and DL can be manipulated as a single 16-bit register (DX). To advance to the next column, we increment DX which effectively only increments DL (column position). To advance to the next column we would need to instead increment the row number and set the column to 0. We can do this in only one additional instruction by setting the low nibble (DL) to 0xFF and then continuing the normal program flow incrementing DX. Since we're now looking at DH/DL as a 16-bit value, DL becomes 0 and the carry from 0xFF + 1 is added to DH.

Examples:

Advance to next column:

DH   DL   DX
 1    1   0101   ; at row 1, column 1
 1    2   0102   ; add one to DX

Advance to next row, first column:

DH   DL   DX
 1    2   0102   ; at row 1, column 2
 1   FF   01FF   ; +set DL to 0xFF
 2    0   0200   ; add one to DX
\$\endgroup\$
5
  • 1
    \$\begingroup\$ Will this work in dos, prib not but would be cool if it did. \$\endgroup\$ Commented Apr 17, 2019 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
    Commented Apr 17, 2019 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\$ Commented Apr 17, 2019 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
    Commented Apr 17, 2019 at 16:33
  • 1
    \$\begingroup\$ God this is a cool answer \$\endgroup\$
    – Samie Bee
    Commented Apr 30, 2019 at 8:55
25
\$\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\$
20
\$\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\$
16
  • 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
    Commented Apr 17, 2019 at 8:32
  • \$\begingroup\$ @Neil - Indeed :) I was able to get it quite a bit shorter using that. Thanks for the tip. \$\endgroup\$
    – dana
    Commented Apr 17, 2019 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\$ Commented Apr 18, 2019 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\$ Commented Apr 18, 2019 at 15:40
  • 1
    \$\begingroup\$ You can also remove quotes from the string, VBA will coerce the number into a string automatically. \$\endgroup\$ Commented Apr 18, 2019 at 16:16
19
\$\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\$
3
  • \$\begingroup\$ Note that mov al, 13h is incorrect unless it is guaranteed by DOSBox to have ah = 0 at the program entrypoint. \$\endgroup\$ Commented Apr 17, 2019 at 15:18
  • \$\begingroup\$ @MargaretBloom ax is 0 at start of com application in ms dos \$\endgroup\$ Commented Apr 17, 2019 at 15:27
  • \$\begingroup\$ Thanks Iłya, that's good to know! \$\endgroup\$ Commented Apr 18, 2019 at 7:13
19
\$\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\$
1
  • \$\begingroup\$ I really like the ingenuity of this solution. \$\endgroup\$
    – AJFaraday
    Commented Apr 18, 2019 at 21:05
18
\$\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
  • 3
    \$\begingroup\$ You can omit the last closing bracket in the CSS. Also, incredible (and sickening) work! \$\endgroup\$ Commented Apr 17, 2019 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
    Commented Apr 18, 2019 at 19:14
  • 2
    \$\begingroup\$ <a href=x>█ will be blue by default, saving you some bytes of CSS :) \$\endgroup\$
    – lynn
    Commented Apr 20, 2019 at 0:21
17
\$\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\$
1
  • 1
    \$\begingroup\$ +1 for making me all nostalgic for my trusty old ST. \$\endgroup\$
    – Wossname
    Commented Apr 17, 2019 at 7:56
17
\$\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\$
4
  • 3
    \$\begingroup\$ Welcome to PPCG! \$\endgroup\$
    – Gymhgy
    Commented Apr 16, 2019 at 21:45
  • 1
    \$\begingroup\$ wow it's Rainbow Six! \$\endgroup\$
    – yqlim
    Commented Apr 18, 2019 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
    Commented Apr 19, 2019 at 12:22
  • \$\begingroup\$ 46 bytes with image(matrix(c(6,4,5,2:4,1,2),3),c=rainbow(6)) \$\endgroup\$ Commented Oct 19, 2020 at 14:55
16
\$\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\$
16
\$\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\$
1
  • \$\begingroup\$ Very unique! Love it! \$\endgroup\$
    – Seth
    Commented Feb 23, 2021 at 4:12
15
\$\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 Raine!

\$\endgroup\$
3
  • 3
    \$\begingroup\$ Welcome to PPCG! \$\endgroup\$
    – jdt
    Commented Apr 17, 2019 at 14:50
  • 1
    \$\begingroup\$ Thank you! Hopefully I'll learn some tricks from the masters :) \$\endgroup\$ Commented Apr 18, 2019 at 16:33
  • \$\begingroup\$ For i=1To 9:[A:C].Cells(i).Interior.ColorIndex=Mid(367648785,i,1):Next for 70 \$\endgroup\$ Commented May 13, 2019 at 19:59
13
\$\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\$
13
\$\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\$
12
\$\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\$
6
  • 1
    \$\begingroup\$ I don't get how this works? \$\endgroup\$ Commented Apr 17, 2019 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
    Commented Apr 17, 2019 at 8:43
  • 1
    \$\begingroup\$ So this is basically like dos versions but with chrome browser? \$\endgroup\$ Commented Apr 17, 2019 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
    Commented Apr 17, 2019 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
    Commented Apr 17, 2019 at 19:38
10
\$\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\$
7
  • 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\$ Commented Apr 17, 2019 at 6:35
  • 2
    \$\begingroup\$ @ExpiredData Thanks a lot, that works indeed! \$\endgroup\$
    – flawr
    Commented Apr 17, 2019 at 6:52
  • 2
    \$\begingroup\$ You can probably do this too Try it online! \$\endgroup\$ Commented Apr 17, 2019 at 6:57
  • 1
    \$\begingroup\$ @ExpiredData ---Very nice trick, thanks a lot! :)--- why don't you post this as an own answer? \$\endgroup\$
    – flawr
    Commented Apr 17, 2019 at 7:03
  • 3
    \$\begingroup\$ Ok I will do that \$\endgroup\$ Commented Apr 17, 2019 at 7:07
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\$
8
  • 2
    \$\begingroup\$ I think your colors are not correct. But apart from that I'd upvote your post if only for the title:) \$\endgroup\$
    – flawr
    Commented Apr 17, 2019 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
    Commented Apr 17, 2019 at 7:02
  • 5
    \$\begingroup\$ Just note that the PPCG community was never famous for its sanity. If anything probably for the lack thereof. \$\endgroup\$
    – flawr
    Commented Apr 17, 2019 at 8:51
  • 1
    \$\begingroup\$ \rule{5em}{5em} -> \rule 5em 5em \$\endgroup\$
    – ASCII-only
    Commented Apr 17, 2019 at 10:01
  • 1
    \$\begingroup\$ The \color{something} command doesn't take a text argument like \textcolor{something}{tex to be coloured}, rather it's a switch, so you can save two bytes by removing the extra pair of braces around \rule: \def\c#1{\color{#1}\rule{5em}{5em}}. Also, in proper TeX ~ is an active character so you can replace all \c by ~ and save a couple more bytes. Don't know about MathJax though. \$\endgroup\$ Commented Apr 17, 2019 at 11:30
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\$
4
  • 1
    \$\begingroup\$ Welcome to Code Golf! Nice work! \$\endgroup\$
    – AJFaraday
    Commented Apr 17, 2019 at 9:17
  • 1
    \$\begingroup\$ I think you could use expressions in your truth table: t={[0>1]=0,[0<1]=1}. \$\endgroup\$
    – manatwork
    Commented Apr 17, 2019 at 13:00
  • 1
    \$\begingroup\$ @manatwork Smart! \$\endgroup\$ Commented Apr 17, 2019 at 20:30
  • \$\begingroup\$ another löver, nice to see you here \$\endgroup\$
    – Lycea
    Commented Jun 3, 2019 at 8:59
10
\$\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\$
11
  • 1
    \$\begingroup\$ Leave out </td>, the browser is smart enough to automatically add this closing tag \$\endgroup\$
    – Ferrybig
    Commented Apr 16, 2019 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
    Commented Apr 16, 2019 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
    Commented Apr 17, 2019 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
    Commented Apr 17, 2019 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
    Commented Apr 17, 2019 at 12:19
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\$
0
9
\$\begingroup\$

Octave, 38 bytes

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

Try it online!

\$\endgroup\$
8
\$\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\$
12
  • 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
    Commented Apr 17, 2019 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
    Commented Apr 17, 2019 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
    Commented Apr 18, 2019 at 13:08
  • 2
    \$\begingroup\$ Here's a png file that's 15 bytes smaller when base64 encoded: iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAFElEQVR4AWP4z8Dw/z8DEIIodB4A4D0O8pOGuTgAAAAASUVORK5CYII= \$\endgroup\$ Commented Apr 18, 2019 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\$ Commented Apr 18, 2019 at 19:12
7
\$\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\$
7
\$\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
  • 1
    \$\begingroup\$ I’d love that to be a standard PCG challenge! Instead it happens organically on some code golf puzzles \$\endgroup\$
    – AJFaraday
    Commented Apr 19, 2019 at 8:00
6
\$\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\$

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\$
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\$
2
  • \$\begingroup\$ It's 180 characters, excluding line breaks. I'm not sure how/if line breaks are counted in code golf. \$\endgroup\$
    – Nat
    Commented Apr 18, 2019 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\$ Commented Apr 18, 2019 at 22:00
5
\$\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\$
4
\$\begingroup\$

Jelly, 16 bytes

“IỤỵ7ỤĖm8’b4K”P;

Try it online!

Niladic link or full program that produces a portable pixmap format image of the desired grid.

\$\endgroup\$
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\$
2
  • \$\begingroup\$ You can shave off one byte by writing 0xFF0000 as 255<<16. \$\endgroup\$
    – Broxzier
    Commented Apr 23, 2019 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
    Commented Apr 23, 2019 at 21:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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