25
\$\begingroup\$

The challenge is simple: Draw a rainbow in as few bytes as possible

The specs for the rainbow are as follows:

  • The figure must be exactly 400 pixels wide and 200 pixels high (optionally 401x201 if you want a single center pixel)
  • The red ring should touch all borders of the figure (outer radius = 200 pixels)
  • All rings shall have the same width (10 pixels)
    • The violet ring shall have an inner radius of 130 pixels
  • The bow should be the upper half of a perfect circle
  • The background shall be white (transparent is also accepted)
  • The figure shall not have borders, (exception is made if the border can't be suppressed)
  • Builtin rainbow making functions are not allowed!

The following colors are to be used in the rainbow:

rainbow

This is code golf, so the shortest code in bytes win!

Example:

Rainbow

Related, but different!

\$\endgroup\$
  • 26
    \$\begingroup\$ Builtin rainbow making functions are not allowed As I'm sure Mathematica has one \$\endgroup\$ – Luis Mendo Mar 11 '16 at 23:05
  • \$\begingroup\$ How imperfect may the rainbow be? From not anti-aliased to tearing? Consider the images in this answer \$\endgroup\$ – aross Mar 15 '16 at 15:53
  • \$\begingroup\$ @aross: it should look like the sample rainbow (some pixels may vary due to inaccurate calculations). The two last rainbows are too "messy", while the first one looks ok. I don't have a perfect rule, so use you best judgement :-) \$\endgroup\$ – Stewie Griffin Mar 15 '16 at 16:12
  • \$\begingroup\$ @StewieGriffin Reason I'm asking is because apparently PHP graphics is pretty buggy, while the solution is correct in theory. Well, the second one is, the third one would be with anti-aliasing (which also doesn't work well) \$\endgroup\$ – aross Mar 15 '16 at 16:16
  • \$\begingroup\$ Are vector graphics not allowed? edit: never mind—I see that there's already a TikZ answer, so I gather they are. \$\endgroup\$ – Julian Wolf Apr 23 '17 at 16:52

31 Answers 31

15
\$\begingroup\$

MATL, 107 95 92 87 84 83 bytes

-200:200 0:200!PYyq10/k12-t8<*t0>*Q7B.561FTh.295Oh.51h4BPFTF6Bl.5hOh4B8$v255*k5M/YG

This works in current release (14.0.0) of the language/compiler.

EDIT (July 6, 2017): You can try it at MATL Online!.

To check that the colors are correct, remove the last five characters (you need to wait for a few seconds and scroll down to the end of the output).

enter image description here

Explanation

The code has three main steps:

Step 1: Generate a 201x401 matrix with numbers from 1 to 8. Pixels with value 1 are background (white), pixels with values 2, ..., 8 represent each band of the rainbow.

Horizontal coordinates range from -200 to 200 left to right, and vertical coordinates range from 0 to 200 bottom to top. So the origin (0,0) is bottom center, the upper left corner is (-200,200), etc.

The different bands of the rainbow are generated by computing the distance from each pixel to the origin and quantizing in steps of 10 pixels.

Step 2: Generate an 8x3 matrix defining the colormap. Each row is one of the necessary colors (white and the seven colors of the rainbow). Each value of the previous 201x401 matrix will be interpreted as an index to a row of this colormap.

We generate the colormap matrix using values between 0 and 1 for each color component, and then multiplying by 255 and rounding down. This way most values are initially 0 and 1, which will later become 0 and 255. Intermediate values are coded as values between 0 and 1 with 2 or 3 decimals, chosen so that when multiplied and rounded give the exact desired value.

Step 3: Display the image with that colormap.

               % STEP 1: CREATE MATRIX DEFINING THE RAINBOW BANDS
-200:200       % row vector [-200, -199, ..., 200]
0:200          % row vector [0, 1, ..., 200]
!P             % transpose and flip: convert into column vector [200; 199; ...; 0]
Yy             % hypotenuse function with broadcast: distance from each point to (0,0)
q10/k          % subtract 1, divide by 10, floor (round down). Gives 20 circular bands
               % 10 pixels wide, with values from 0 to 19
12-            % subtract 12
t8<*           % values larger than 7 are set to 0
t0>*           % values less than 0 are set to 0. We now have 7 bands with values
               % 1, ..., 7, and the white background with value 0
Q              % add 1: white becomes 1, bands become 2, ..., 8

               % STEP 2: CREATE MATRIX DEFINING THE COLORMAP
7B             % first row: [1 1 1] (7 converted to binary: color white)
.561FTh        % second row (light purple)
.295Oh.51h     % third row (dark purple)
4BP            % fourth row: [0 0 1] (4 converted to binary and flipped: blue)
FTF            % fifth row (green)
6B             % sixth row: [1 1 0] (6 converted to binary: yellow)
l.5hOh         % seventh row: orange
4B             % eigth row: [1 0 0] (4 converted to binary: red)
8$v            % vertically concatenate the 8 eight rows
255*k          % multiply by 255 and round down. Gives exact color values 
5M/            % push 255 again and divide. This is needed because colors in MATL are
               % defined between 0 and 1, not between 0 and 255

               % STEP 3: DISPLAY
YG             % display image with that colormap
\$\endgroup\$
28
\$\begingroup\$

Piet, 838 codels, several thousand pixels

Someone had to do it:

An awesome rainbow

If you save this image you can try it online!

The actual Piet program is only the top ~125 pixels, which I created using a Python program I wrote.

Editing this afterwards really hurt my vision, I'll be tripping for days!

This outputs the image in an SVG format, because SVG really is (in my opinion) the simplest way to do this. I shamelessly stole Doorknob's SVG code. Outputs:

correct output

well, this really:

<svg viewBox='0 0 400 200'><circle cx='200' cy='200' r='200' fill='red'/><circle cx='200' cy='200' r='190' fill='#ff7f00'/><circle cx='200' cy='200' r='180' fill='yellow'/><circle cx='200' cy='200' r='170' fill='lime'/><circle cx='200' cy='200' r='160' fill='blue'/><circle cx='200' cy='200' r='150' fill='indigo'/><circle cx='200' cy='200' r='140' fill='#8f00ff'/><circle cx='200' cy='200' r='130' fill='white'/></svg>

Good luck beating this answer, non-Esolang users!

\$\endgroup\$
  • 2
    \$\begingroup\$ Is this python script public? I'm asking for a friend, who is very lazy.... \$\endgroup\$ – NaCl Mar 13 '16 at 22:45
  • \$\begingroup\$ Erm, it takes literally ~2 minutes to implement xD You can find an old version here and adjust it if necessary: mediafire.com/download/0isocsb81n7r2cv/piet.py (note: I made this when I was 10, the code is embarrassing to say the least) - it needs PyPNG installed. \$\endgroup\$ – theonlygusti Mar 14 '16 at 18:05
15
\$\begingroup\$

Pyth, 150 149 128 bytes

"<svg viewBox=0,0,400,200>"V8s["<circle cx=200 cy=200 r="-200*TN" fill="@c"red #ff7f00 #ff0 #0f0 #00f indigo #8f00ff #fff"dN" />

Outputs in SVG:

<svg viewBox=0,0,400,200>
<circle cx=200 cy=200 r=200 fill=red />
<circle cx=200 cy=200 r=190 fill=#ff7f00 />
<circle cx=200 cy=200 r=180 fill=#ff0 />
<circle cx=200 cy=200 r=170 fill=#0f0 />
<circle cx=200 cy=200 r=160 fill=#00f />
<circle cx=200 cy=200 r=150 fill=indigo />
<circle cx=200 cy=200 r=140 fill=#8f00ff />
<circle cx=200 cy=200 r=130 fill=#fff />

rainbow

Thanks to @MamaFunRoll for 16 bytes and @PatrickRoberts for 6 more!

\$\endgroup\$
  • 2
    \$\begingroup\$ You could probably save a lot of bytes by packing the strings. \$\endgroup\$ – a spaghetto Mar 11 '16 at 23:31
  • \$\begingroup\$ @AquaTart All that does is add bytes. O_o \$\endgroup\$ – Doorknob Mar 12 '16 at 0:20
  • 3
    \$\begingroup\$ I don't think you need any of the quotes, ending slashes, or the last ending </svg> tag. \$\endgroup\$ – Mama Fun Roll Mar 12 '16 at 2:57
  • 4
    \$\begingroup\$ Two suggestions: red #ff7f00 #ff0 #0f0 #00f #8f00ff #fff for the color list and take single quotes off all parameter values that don't have spaces in them (cx, cy, r and fill) but make sure to leave a space between the value of fill and the / so the color doesn't get misinterpreted. Also remove the </svg> as suggested above. \$\endgroup\$ – Patrick Roberts Mar 12 '16 at 9:25
  • 1
    \$\begingroup\$ Sorry, I meant red #ff7f00 #ff0 #0f0 #00f indigo #8f00ff #fff. Also if you replace the spaces with commas in the viewBox you can remove the single quotes for that parameter as well. \$\endgroup\$ – Patrick Roberts Mar 12 '16 at 10:46
14
\$\begingroup\$

Minecraft 1.10 (almost), 2677 characters one-command, 868 blytes

Well I sure picked a verbose language.

summon FallingSand ~ ~1 ~ {Block:log,Time:1,Passengers:[{id:FallingSand,Block:redstone_block,Time:1,Passengers:[{id:FallingSand,Block:activator_rail,Time:1,Passengers:[{id:MinecartCommandBlock,Command:"summon ArmorStand ~ ~ ~ {Tags:[\"b\"]}"},{id:MinecartCommandBlock,Command:"summon Pig ~ ~ ~ {NoAI:1b}"},{id:MinecartCommandBlock,Command:setblock ~-1 ~-2 ~6 chain_command_block 3 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=200] ~ ~ ~ tp @e[c=1] ~ -99 ~"}},{id:MinecartCommandBlock,Command:setblock ~-1 ~-2 ~5 chain_command_block 3 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=190,r=200] ~ ~ ~ setblock ~ ~ ~ wool 14"}},{id:MinecartCommandBlock,Command:setblock ~-1 ~-2 ~4 chain_command_block 3 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=180,r=190] ~ ~ ~ setblock ~ ~ ~ wool 1"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~4 chain_command_block 4 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=170,r=180] ~ ~ ~ setblock ~ ~ ~ wool 4"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~5 chain_command_block 2 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=160,r=170] ~ ~ ~ setblock ~ ~ ~ wool 13"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~6 chain_command_block 2 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=150,r=160] ~ ~ ~ setblock ~ ~ ~ wool 11"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~7 chain_command_block 2 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=140,r=150] ~ ~ ~ setblock ~ ~ ~ wool 10"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~8 chain_command_block 2 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=130,r=140] ~ ~ ~ setblock ~ ~ ~ wool 2"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~8 chain_command_block 4 replace {auto:1,Command:"tp @e[type=Cow] ~1 ~ ~"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~7 chain_command_block 3 replace {auto:1,Command:"tp @e[type=Bat] ~-1 ~ ~"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~6 chain_command_block 3 replace {auto:1,Command:"execute @e[type=Pig] ~ ~ ~ summon Bat ~ ~ ~ {NoAI:1b}"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~5 chain_command_block 3 replace {auto:1,Command:"execute @e[type=Pig] ~ ~ ~ summon Cow ~ ~ ~ {NoAI:1b}"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~4 repeating_command_block 3 replace {auto:1,Command:"tp @e[type=Pig] ~ ~1 ~"}},{id:MinecartCommandBlock,Command:setblock ~ ~ ~1 command_block 0 replace {Command:fill ~ ~-3 ~-1 ~ ~ ~ air}},{id:MinecartCommandBlock,Command:setblock ~ ~-1 ~1 redstone_block},{id:MinecartCommandBlock,Command:kill @e[type=MinecartCommandBlock,r=1]}]}]}]}

Make a new Superflat world, paste that mess into an Impulse command block, set your render distance fairly high, and run it. Break the armor stand when your computer stops lagging.

The result is 400 blocks across and 200 blocks tall, as requested.

I used MrGarretto's one command generator to pack everything together, and then modified the result of that a little bit to save a couple more bytes. Here's the input to it:

INIT:summon ArmorStand ~ ~ ~ {Tags:["b"]}
INIT:summon Pig ~ ~ ~ {NoAI:1b}
tp @e[type=Pig] ~ ~1 ~
execute @e[type=Pig] ~ ~ ~ summon Cow ~ ~ ~ {NoAI:1b}
execute @e[type=Pig] ~ ~ ~ summon Bat ~ ~ ~ {NoAI:1b}
tp @e[type=Bat] ~-1 ~ ~
tp @e[type=Cow] ~1 ~ ~
execute @e[tag=b] ~ ~ ~ execute @e[rm=130,r=140] ~ ~ ~ setblock ~ ~ ~ wool 2
execute @e[tag=b] ~ ~ ~ execute @e[rm=140,r=150] ~ ~ ~ setblock ~ ~ ~ wool 10
execute @e[tag=b] ~ ~ ~ execute @e[rm=150,r=160] ~ ~ ~ setblock ~ ~ ~ wool 11
execute @e[tag=b] ~ ~ ~ execute @e[rm=160,r=170] ~ ~ ~ setblock ~ ~ ~ wool 13
execute @e[tag=b] ~ ~ ~ execute @e[rm=170,r=180] ~ ~ ~ setblock ~ ~ ~ wool 4
execute @e[tag=b] ~ ~ ~ execute @e[rm=180,r=190] ~ ~ ~ setblock ~ ~ ~ wool 1
execute @e[tag=b] ~ ~ ~ execute @e[rm=190,r=200] ~ ~ ~ setblock ~ ~ ~ wool 14
execute @e[tag=b] ~ ~ ~ execute @e[rm=200] ~ ~ ~ tp @e[c=1] ~ -99 ~

That's a total of 15 1.9+ command blocks, and 838 bytes, so 15*2 + 838 = 868 blytes.

Here's the (almost) part, it's missing a corner and edge. It logically shouldn't - Minecraft bug? Would be exactly 400x200 blocks if it wasn't for that. Not much I can do.

Rainboom

\$\endgroup\$
  • 4
    \$\begingroup\$ Yay, a pig based rainbow generator ! +1 \$\endgroup\$ – TuxCrafting Jun 19 '16 at 14:17
  • \$\begingroup\$ If it's 2677 characters how can it be only 868 "blytes"? From how I understand that page the actual blytes should be 2677 + 4 \$\endgroup\$ – theonlygusti Jan 9 '18 at 7:56
  • \$\begingroup\$ It's 868 if you build it in the world, 2677 if you use fallingsand to create it (which has a lot of overhead) \$\endgroup\$ – quat Jan 9 '18 at 16:38
12
\$\begingroup\$

Mathematica 152 144 126 bytes

Graphics@MapIndexed[{#,Disk[{0,0},4-#/5&@@#2,{Pi,0}]}&,RGBColor/@TextWords@"#f00 #ff7f00 #ff0 #0f0 #00f #4b0082 #8f00ff #fff"]

enter image description here

Thanks @CatsAreFluffy for shaving off 8 bytes & @njpipeorgan for a further 18 :)

\$\endgroup\$
  • 3
    \$\begingroup\$ Use # vs #[[1]], #2 vs #[[2]], and @@@ vs /@. \$\endgroup\$ – CalculatorFeline Mar 13 '16 at 0:01
  • 1
    \$\begingroup\$ Also, Thread works instead of Transpose. \$\endgroup\$ – LegionMammal978 Mar 14 '16 at 0:51
  • 1
    \$\begingroup\$ Graphics@MapIndexed[{#,Disk[{0,0},4-#/5&@@#2,{Pi,0}]}&,RGBColor/@TextWords@"#f00 #ff7f00 #ff0 #0f0 #00f #4b0082 #8f00ff #fff"] saves another 18 bytes, but the idea is the same. \$\endgroup\$ – njpipeorgan Mar 14 '16 at 2:39
  • 1
    \$\begingroup\$ Just curious... is there a "rainbow builtin"? \$\endgroup\$ – mbomb007 Mar 14 '16 at 17:41
  • \$\begingroup\$ @mbomb007 not that i'm aware of! \$\endgroup\$ – martin Mar 15 '16 at 11:46
8
\$\begingroup\$

vim, 165 142 139

i<svg viewBox=0,0,400,200><cr><circle cx=2<C-n> cy=2<C-n> r=2<C-n> fill=red<cr>#ff7f00<cr>#ff0<cr>#0f0<cr>#00f<cr>indigo<cr>#8f00ff<cr>#fff<esc>2Gqq0y4f=jPBB10<C-x>@qq@qV2G:norm A /><cr>

Yeesh, this is clunky. There's got to be improvements that can be made.

Outputs as SVG, like my Pyth answer.

Thanks to @MyHamDJ for shaving off 3 bytes!

\$\endgroup\$
  • \$\begingroup\$ You could shave off 2 bytes (or keystrokes) if you replace your last ex command with kv3G:norm A'/><cr> \$\endgroup\$ – DJMcMayhem Mar 12 '16 at 1:12
  • \$\begingroup\$ You could also take 3 more off if you enter the <circle cx... string on line 2 the first time through, rather then typing all of the colors then entering it afterwards. \$\endgroup\$ – DJMcMayhem Mar 12 '16 at 1:17
8
\$\begingroup\$

HTML+SVG+ES6, 169

<svg width=400 viewBox=0,0,40,20 onload="this.innerHTML=`f00
ff7f00
ff0
0f0
00f
4b0082
8f00ff
fff`.replace(/.+/g,c=>`<circle cx=20 cy=20 r=${--r} fill=#${c} />`,r=21)"/>

\$\endgroup\$
  • \$\begingroup\$ use height=200 and cx=200 cy=200 r=${--r}0 instead of viewBox='0 0 40 20'. That should save 7 bytes. \$\endgroup\$ – Patrick Roberts Mar 12 '16 at 11:48
  • \$\begingroup\$ I hope it's okay that I borrowed your idea with the .replace method... \$\endgroup\$ – Patrick Roberts Mar 12 '16 at 12:08
  • \$\begingroup\$ @PatrickRoberts of course it's ok, I borrowed some of yours \$\endgroup\$ – edc65 Mar 12 '16 at 19:05
  • 5
    \$\begingroup\$ I surely didn't expect to see r-=1 in code golf... \$\endgroup\$ – Neil Mar 12 '16 at 20:26
  • \$\begingroup\$ @Neil bah! it was -=10 in some iteration before the final release \$\endgroup\$ – edc65 Mar 12 '16 at 22:07
7
\$\begingroup\$

Ruby with Shoes, 155 bytes

Shoes.app(width:400,height:200){background'fff'
8.times{|i|stroke fill %w{f00 ff7f00 ff0 0f0 00f 4b0082 8f00ff fff}[i]
oval left:i*=10,top:i,radius:200-i}}

Sample output:

rainbow by Ruby with Shoes

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

JavaScript (ES6), 171 158 bytes

document.write`<svg width=400 height=200>${`f00
ff7f00
ff0
0f0
00f
4b0082
8f00ff
fff`.replace(/.+/g,c=>`<circle cx=200 cy=200 r=${i--}0 fill=#${c} />`,i=20)}`

Credit to @edc65 for the idea to convert

`[...].map((c,i)=>...)`

to

`...`.replace(/.+/g,c=>...,i=20)

It may look longer but the amount of bytes saved in compressing the array to a string is well worth the conversion. (It saves 13 bytes in this case)

Demo

document.write`<svg width=400 height=200>${`f00
ff7f00
ff0
0f0
00f
4b0082
8f00ff
fff`.replace(/.+/g,c=>`<circle cx=200 cy=200 r=${i--}0 fill=#${c} />`,i=20)}`

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

HTML (162) + CSS (146)

body{height:200px;width:400px}div{height:100%;box-sizing:border-box;border-radius:50% 50% 0 0/100% 100% 0 0;border:solid;border-width:10px 10px 0}
<div style=color:red><div style=color:#FF7F00><div style=color:#FF0><div style=color:#0F0><div style=color:#00F><div style=color:#4B0082><div style=color:#8F00FF>


HTML (224) + CSS (128)

body{height:200px;width:400px}div{height:100%;box-sizing:border-box;border-radius:50% 50% 0 0/100% 100% 0 0;padding:10px 10px 0}
<div style=background:red><div style=background:#FF7F00><div style=background:#FF0><div style=background:#0F0><div style=background:#00F><div style=background:#4B0082><div style=background:#8F00FF><div style=background:#FFF>

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

SpecBAS - 318 254 bytes

If we're drawing rainbows, then it seems like a good place to use the successor to ZX Spectrum BASIC.

1 p,k=20,x1=0,x2=400,y=200
2 FOR EACH s IN [16711680,16744192,16776960,65280,255,4915330,9371903]: PALETTE p,s: INC p: NEXT s
3 CLS 15: DRAW 0,200 TO 70,200: DRAW 330,200 TO 400,200
4 FOR i=1 TO 7
5 INK k: DRAW x1,y TO x2,y,-PI: DRAW x1+10,y TO x2-10,y,-PI: FILL x1+5,190
6 x1+=10,x2-=10,k+=1
7 NEXT i

Line 2 sets up the palette for the specific RGB values needed (and is probably not helping the byte count) as standard Spectrum colours didn't match up.

The DRAW command can take an extra parameter which makes it turn through a number of degrees radians between x1,y1 and x2,y2. Finally it finds a gap in the semicircles just drawn and flood fills with the current colour.

enter image description here

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

Tcl/Tk, 263 bytes

canvas .c -bg #FFF -bo 0 -highlightt 0;pack .c -e 1 -f both;wm ge . 400x200;foreach {r c} {200 #FF0000 190 #FF7F00 180 #FFFF00 170 #00FF00 160 #0000FF 150 #4B0082 140 #8F00FF 130 #FFF} {.c cr o -$r -$r $r $r -outline $c -f $c};after 100 {.c x s -5 u;.c y s -10 u}

Alas, this kind of question always favors some esoteric languages... That said, Tcl/Tk really makes graphics operations all of: easy, short, and readable.

That said, I've sacrificed readability to crunch options down to as few characters as possible. I don't imagine crunching the list of colors will help much compared to code to unpack it...

For comparison, here's the uncrunched code (380 bytes):

canvas .c -bg #FFF -borderwidth 0 -highlightthickness 0
pack .c -expand yes -fill both
wm geometry . 400x200
foreach {r c} {
  200 #FF0000 
  190 #FF7F00 
  180 #FFFF00 
  170 #00FF00 
  160 #0000FF 
  150 #4B0082 
  140 #8F00FF 
  130 #FFFFFF
} {
  .c create arc -$r -$r $r $r -extent 180 -outline $c -fill $c
}
after 100 {
  .c xview scroll -5 units
  .c yview scroll -10 units
}

The after command was unfortunately necessary since no scrolling (of the canvas's coordinate origin) can be done before the window is mapped to the screen.

Also, the crunched code actually draws a full rainbow (using a circle instead of an arc) and just relies on window clipping...

Anyway, I hope y'all enjoy. :O)

\$\endgroup\$
  • \$\begingroup\$ You can use lmap instead of foreach to shorten. \$\endgroup\$ – sergiol Jul 5 '17 at 23:15
  • \$\begingroup\$ And you can put the first line inside the second like : pack [canvas .c -bg #FFF -bo 0 -highlightt 0] -e 1 -f both \$\endgroup\$ – sergiol Jul 5 '17 at 23:22
  • \$\begingroup\$ There is an incoherence between the two versions of you code. Golfed does create oval; ungolfed does create arc. Can you please explain? \$\endgroup\$ – sergiol Jul 5 '17 at 23:26
  • \$\begingroup\$ Thanks for the comment. The ungolfed version is for readability, not exactness in implementation. And, alas, I am not going to go back and fix all my foreach-->lmap; that can be left for the reader... :O) \$\endgroup\$ – Dúthomhas Jul 21 '17 at 6:36
5
\$\begingroup\$

LaTeX, 290 bytes

\documentclass{proc}\input tikz\begin{document}\def\z#1!#2!#3!#4!{\definecolor{t}{rgb}{#1,#2,#3}\fill[color=t](200pt,0)circle(#4pt);}\tikz{\clip(0,0)rectangle(400pt,200pt);\z1!0!0!200!\z1!.5!0!190!\z1!1!0!180!\z0!1!0!170!\z0!0!1!160!\z.29!0!.51!150!\z.56!0!1!140!\z1!1!1!130!}\end{document}

Try it here.

Explanations

\documentclass{proc}
\input tikz
\begin{document}

    %Define macro "\z" with 4 arguments.         
    % The first 3 arguments are rgb values for the color
    % Last argument is the radius in pt that we draw a full circle with

    \def\z#1!#2!#3!#4!
        {\definecolor{t}{rgb}{#1,#2,#3}
         \fill[color=t](200pt,0)circle(#4pt);}

    % Start a Tikz figure

    \tikz{

        % We only draw the top half of the circle

        \clip(0,0)rectangle(400pt,200pt);

        % Draw each circle from biggest to smallest

        \z1!0!0!200!
        \z1!.5!0!190!
        \z1!1!0!180!
        \z0!1!0!170!
        \z0!0!1!160!
        \z.29!0!.51!150!
        \z.56!0!1!140!

        % Draw a white circle last

        \z1!1!1!130!
    }
\end{document}
\$\endgroup\$
  • \$\begingroup\$ @DonMuesli Thanks for the link, added. \$\endgroup\$ – Fatalize Mar 15 '16 at 13:24
4
\$\begingroup\$

Java, 354 bytes

public void r() throws IOException{BufferedImage i=new BufferedImage(400,200,2);Graphics2D g=i.createGraphics();g.setStroke(new BasicStroke(10));int[]c={0xFF0000,0xFF7F00,0xFFFF00,0xFF00,255,0x4B0082,0x8F00FF};for(int v=0;v<7;v ++){g.setColor(new Color(c[v]));g.drawArc(v*10+5,v*10+5,390-v*20,390-v*20,0,360);}ImageIO.write(i,"PNG",new File("a.png"));}}

Just uses the Graphics2D class to draw 7 arcs, with an array to store the colors. I'm sure it can be improved further.

Ungolfed code:

public void ungolfed() throws IOException {
        BufferedImage i = new BufferedImage(400, 200, 2); // 2 is TYPE_INT_ARGB
        Graphics2D g = i.createGraphics();
        g.setStroke(new BasicStroke(10));
        int[] c = {0xFF0000, 0xFF7F00, 0xFFFF00, 0x00FF00, 0x0000FF, 0x4B0082, 0x8F00FF};
        for(int v = 0; v < 7; v ++) {
            g.setColor(new Color(c[v]));
            g.drawArc(v * 10 + 5, v * 10 + 5, 390 - v * 20, 390 - v * 20, 0, 360);
        }
        ImageIO.write(i, "PNG", new File("a.png"));
    }
\$\endgroup\$
  • 2
    \$\begingroup\$ Your 0x0000ff could be just 0xff or even just 255, same with 0x00ff00 being 0xff00. 0xff0000 could be 255<<16 to save another byte. Your loop could be to save a few more bytes. You can save one more byte by adding a ,q to your int declaration. You'd have to make it int c[]= instead of int[] c so q is an int and not an int[]. Doing that lets you add a q=390-v*20; to your loop. and replace the 390-v*20 with a q. It's a lot of work for one byte, but a byte is a byte, right?! \$\endgroup\$ – corsiKa Mar 13 '16 at 7:07
  • 2
    \$\begingroup\$ You can save two more bytes by just throwing Exception instead of IOException. \$\endgroup\$ – corsiKa Mar 13 '16 at 7:08
  • \$\begingroup\$ I also wonder if you can use drawOval and just render the top half of the image... might be a little more expensive though... \$\endgroup\$ – corsiKa Mar 13 '16 at 7:09
  • \$\begingroup\$ I know it's been about 1.5 year, but you can golf quite a bit.. void r()throws Exception{BufferedImage i=new BufferedImage(400,200,2);Graphics2D g=i.createGraphics();g.setStroke(new BasicStroke(10));for(int c[]={255<<16,16744192,16776960,65280,255,4915330,9371903},v=0,t;v<7;g.drawArc(t=v*10+5,t,t=390-v++*20,t,0,360))g.setColor(new Color(c[v]));ImageIO.write(i,"PNG",new File("a.png"));}} (325 bytes) \$\endgroup\$ – Kevin Cruijssen Aug 31 '17 at 12:59
4
\$\begingroup\$

Bubblegum, 139 119 bytes

Hexdump:

00000000: b329 2e4b 5728 cb4c 2d77 caaf b035 d031  .).KW(.L-w...5.1
00000010: d031 3130 d031 3230 b0e3 b249 ce2c 4ace  .110.120...I.,J.
00000020: 4955 48ae b005 f215 922b c154 1198 4ccb  IUH......+.T..L.
00000030: ccc9 b12d 4a4d 51d0 c7ad ced0 12aa 4e39  ...-JMQ.......N9
00000040: 2dcd 3c0d 2884 4fad 0542 2d7e 85e6 3085  -.<.(.O..B-~..0.
00000050: 0604 149a c115 1aa4 e155 680a 5598 9997  .........Uh.U...
00000060: 9299 9e8f 57a9 09cc 4c0b a07f d2f0 1b6b  ....W...L......k
00000070: 8cf0 1148 2100 0a                        ...H!..

Sadly, this is shorter than my Pyth answer. :(

Generates the same SVG file.

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

CSS, 244 242 240 bytes

body{width:400px;height:200px;background-image:radial-gradient(500px at bottom,#FFF 26%,#8F00FF 26%,#8F00FF 28%,#4B0082 28%,#4B0082 30%,#00F 30%,#00F 32%,#0F0 32%,#0F0 34%,#FF0 34%,#FF0 36%,#FF7F00 36%,#FF7F00 38%,red 38%,red 40%,#FFF 40%)}

Edit: Saved 2 bytes by working around a bug in Chrome. Saved a further 2 bytes thanks to @TrangOul.

Note: the snippet uses a <div> due to limitations of Stack Snippets.

div {
    width: 400px;
    height: 200px;
    background-image: radial-gradient(500px at bottom,
        #FFF 26%,
        #8F00FF 26%, #8F00FF 28%,
        #4B0082 28%, #4B0082 30%,
        #00F 30%, #00F 32%,
        #0F0 32%, #0F0 34%,
        #FF0 34%, #FF0 36%,
        #FF7F00 36%, #FF7F00 38%,
        red 38%, red 40%,
        #FFF 40%);
}
<div>

\$\endgroup\$
  • \$\begingroup\$ It looks like the background on the outside of the rainbow is red (at least on my phone). \$\endgroup\$ – Stewie Griffin Mar 13 '16 at 11:47
  • \$\begingroup\$ @StewieGriffin Works fine for me in Firefox for Android. (I couldn't work out how to enable Stack Snippets in my phone's default browser.) \$\endgroup\$ – Neil Mar 13 '16 at 17:31
  • \$\begingroup\$ Ok, a bit strange :-) i'm using chrome 49.0.2623.91 on galaxy s6 edge btw. \$\endgroup\$ – Stewie Griffin Mar 13 '16 at 20:25
  • \$\begingroup\$ @StewieGriffin Looks like it's broken in Chrome for Windows too. \$\endgroup\$ – Neil Mar 13 '16 at 21:14
  • \$\begingroup\$ @StewieGriffin OK I think I have a workaround, and it saves two bytes too! \$\endgroup\$ – Neil Mar 14 '16 at 8:50
4
\$\begingroup\$

JavaScript 271 251

c=document.body.appendChild(document.createElement('canvas'))
x=c.getContext('2d')
c.width=400
r=c.height=200
for(i=0;i<8;x.beginPath(),x.arc(r,r,r-i*10,0,7),x.fillStyle="#"+"FF0000FF7F00FFFF0000FF000000FF4B00828F00FFFFFFFF".substr(i++*6,6),x.fill());

\$\endgroup\$
  • \$\begingroup\$ Thanks @StewieGriffin I've made the change for 10. Been trying to get the count down but still a ways from doorknobs pyth answer! \$\endgroup\$ – wolfhammer Mar 11 '16 at 23:51
  • \$\begingroup\$ You can move everything between the for's { ... } to inside the last for section, seperated by ,. e.g. for(i=0;i<8;x.beginPath(),x.arg(...etc...)). You can probably also use slice/splice of substr if I'm not mistaken. It might also be shorter to make the <canvas> using .innerHTML. Or even a HTML+JS answer and give the <canvas> and id of c and then it should automatically be added as a JS global variable \$\endgroup\$ – Downgoat Mar 12 '16 at 1:42
  • \$\begingroup\$ @Downgoat substr has the advantage here in that its second parameter is a length, not an offset. As for golfing, document.body would seem to provide a considerable saving. \$\endgroup\$ – Neil Mar 12 '16 at 20:28
4
\$\begingroup\$

C, 220 217 213 bytes

#define X printf("%c",s<169|s/401?y:s
i=8e4,t,y=255;main(s){for(puts("P6 400 200 255");i--;X/288?y:s<195?143:s<225?75:0),X<256|s/360?0:s/323?127:y),X<225&s/195?130:s<256?y:0))s=i/400,t=i%400-200,s=(s*s+t*t)/100;}

Output is PPM (the binary kind).

Edit: Saved a couple bytes thanks to @tucuxi.

Edit 2: Rearranged code to save even more.

\$\endgroup\$
  • 1
    \$\begingroup\$ you can shave a byte with i;s;t;main() -> s;t;main(i), and another one by placing part of your for loop body within the for: ;)code1,code2; -> ;code2)code1; (saved a comma!). \$\endgroup\$ – tucuxi Mar 14 '16 at 10:19
4
\$\begingroup\$

Google Blockly, 48 blocks, 75 bytes

Click the gif below to navigate to the solution, where you can get a closer look at how it works.
As for an explanation, I think an image is worth a thousand words, and thus a gif is worth a thousand images.

link to big readable gif

Note: I'm unsure how to count in Blockly, so I counted every block as 1 byte, and every variable the regular way, so that 0 == 1 byte, 530 == 3 bytes, Arial == 5 bytes and bold == 4 bytes.
I counted the special character I used to cut off the rainbow as 2 bytes. Please report any mistakes or suggestions of the byte count in the comments

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

Postscript (87 bytes)

Hex dump:

00000000: 3188 0131 2030 2e35 3631 8800 3120 302e  1..1 0.561..1 0.
00000010: 3237 3888 0030 2e35 3188 0030 8801 3088  278..0.51..0..0.
00000020: 0130 8801 3188 0031 2030 2e35 8800 3188  .0..1..1 0.5..1.
00000030: 0030 87c8 0038 7b34 2031 9287 929d 87c8  .0...8{4 1......
00000040: 0030 2032 9258 3087 b400 9205 9216 9242  .0 2.X0........B
00000050: 880a 92a9 7d92 83                        ....}..

Output:

enter image description here

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

HTML + CSS, 310 307 bytes

<b style=background:red><b style=background:#ff7f00><b style=background:#ff0><b style=background:lime><b style=background:blue><b style=background:indigo><b style=background:#8f00ff><b style=background:#fff;width:260px;height:130px><style>b{float:left;padding:10px 10px 0 10px;border-radius:300px 300px 0 0}

Super-duper invalid markup (may or may not look correct in your browser). Just wanted to see if it was even possible.

\$\endgroup\$
  • \$\begingroup\$ You can cut two bytes by using #FF0 instead of yellow. You might be able to use the bgcolor attribute instead of style attributes too. \$\endgroup\$ – curiousdannii Mar 13 '16 at 4:59
  • \$\begingroup\$ @curiousdannii You're right about the colors (white could also be shortened) of course - don't know why I didn't see that. I did try bgcolor before posting though, but unfortunately it's no longer supported (here in Chrome anyway) \$\endgroup\$ – Flambino Mar 13 '16 at 9:47
3
\$\begingroup\$

PHP, 285 bytes

<?php $a=imagecreate(400,200);define("b",255);$c=array(b,b,b,b,0,0,b,127,0,b,b,0,0,b,0,0,0,b,75,0,130,143,0,b,b,b,b);for($i=0;$i<9;$i++){imagefilledellipse($a,200,200,420-$i*20,420-$i*20,imagecolorallocate($a,$c[$i*3],$c[$i*3+1],$c[$i*3+2]));}header("Content-type:png");imagepng($a);?>

Outputs:

Taste the rainbow!

\$\endgroup\$
  • 1
    \$\begingroup\$ Nice effort. But please note that closing PHP tag at the end of file is considered bad habit even when not golfing. It would be shorter as CLI script, that way you can spare that header() call and even the opening PHP tag. On Linux the simplest is to run php -r '$a=imagecreate(400,200);const b=255;for($c=[b,b,b,b,0,0,b,127,0,b,b,0,0,b,0,0,0,b,75,0,130,143,0,b,b,b,b];$i<9;)imagefilledellipse($a,200,200,$r=420-$i*20,$r,imagecolorallocate($a,$c[$j=$i++*3],$c[$j+1],$c[$j+2]));imagepng($a);' | display from command prompt and count it as 227 characters. (Using PHP 5.6.11.) \$\endgroup\$ – manatwork Mar 14 '16 at 9:55
3
\$\begingroup\$

Bash + ImageMagick, 159 125 characters

eval convert -size 401x201 xc: '-fill \#'{f00,ff7f00,ff0,0f0,00f,4b0082,8f00ff,fff}' -draw "circle 200,200 200,$[i++*10]"' x:

Sample output:

rainbow by Bash + ImageMagick

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

Processing, 196 186 181 179 169 163 bytes

int d=400,i=0;size(d,d/2);background(-1);int[]c={-65536,-33024,-256,#00ff00,#0000ff,#4b0082,#8f00ff,-1};for(noStroke();i<8;ellipse(200,200,d,d),d-=20)fill(c[i++]);

rainbow

Saved 10 bytes thanks to Kritixi Lithos
... and another 6 bytes thanks to dzaima

\$\endgroup\$
  • 2
    \$\begingroup\$ Can shave off one more byte by changing for(int i=0;i<8;i++) into for(int i=0;i++<8;) or similar \$\endgroup\$ – quat Jun 21 '16 at 21:14
  • \$\begingroup\$ I don't think you can use variables while calling size() \$\endgroup\$ – Kritixi Lithos Dec 4 '16 at 18:36
  • \$\begingroup\$ @KritixiLithos What do you mean? \$\endgroup\$ – Flambino Dec 4 '16 at 21:56
  • \$\begingroup\$ When I call size with variables as parameters, it gives me an error (before running) that I cannot use variables to set the dimensions on the screen \$\endgroup\$ – Kritixi Lithos Dec 5 '16 at 6:53
  • \$\begingroup\$ background(-1) is one byte shorter than background(255), and you can change the 255 in array c to -1 to save another byte \$\endgroup\$ – Kritixi Lithos Apr 23 '17 at 15:38
2
\$\begingroup\$

R, 184 170 bytes

Making an image with fixed pixel dimensions turns out to be surprisingly tricky with R, whose plotting functions are mostly intended for statisticians. In particular R leaves extra space for labels and coordinate axes unless you explicitly set margins as zero-width by calling par.

On the other hand some of the required colours (specifically red, yellow and blue) are found in the default palette, and can be referenced simply by integer indices.

png(,400,200)
par(mar=0*1:4)
plot(as.raster(outer(199:0,-199.5:200,function(y,x)c(rep("white",13),"#8F00FF","#4B0082",4,"green",7,"#FF7F00",2)[1+(x^2+y^2)^.5%%200/10])))
\$\endgroup\$
2
\$\begingroup\$

Forth Salon Haiku (184 bytes)

I can't satisfy the dimension constraints with this format, but I thought it worth sharing anyway.

: ^ 2 ** ;
: b 0.9 * dup x .5 - ^ y 2.01 / ^
+ sqrt dup rot > swap rot .045
+ < * * + ;
0 .56 .2 b .29 .25 b 1 .4 b
1 .45 b 1 .5 b 0 1 .35 b 1 .4 b
0.5 .45 b 0 1 .2 b .51 .25 b
1 .3 b

enter image description here

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

Excel VBA, 213 202 196 192 172 Bytes

Code

Anonymous VBE immediate window function that takes no input and outputs a rainbow, as a vector image, to the sheets(1) object

For i=0To 7:j=400-20*i:Set s=Sheet1.Shapes.AddShape(20,10*i,10*i,j,j):s.Fill.ForeColor.RGB=Array(255,32767,65535,65280,-31*4^8,8519755,&HE1008F,-1)(i):s.Line.Visible=0:Next

Subroutine Version

Sub a
For i=0To 7
j=400-20*i
set s=Sheet1.Shapes.AddShape(20,10*i,10*i,j,j)
s.Fill.ForeColor.RGB=Array(255,32767,65535,65280,-31*4^8,8519755,&HE1008F,-1)(i)
s.Line.Visible=0
Next
End Sub

-11 bytes for removing .Adjustments(3)=3/80 call and adding a 8th, white arc

-6 bytes for using -1 over &HFFFFFF

-3 bytes for using Sheet1 over Sheets(1)

-6 bytes for converting with statement to set statement

-14 bytes for converting from Sub to anonymous VBE function

Output

Pics or it didn't happen

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

DIV Games Studio (184 bytes)

Not the shortest but quite simple. Uses the DIV default palette

PROGRAM r;
local
c[]=22,26,235,41,54,82,249,15,15;
BEGIN
set_mode(400200);
for(x=-80;x<80;x+=10)
y=399-x;
draw(5,c[abs(x)/10],15,0,x,x,y,y);
x+=70*(x<0);END
LOOP;FRAME;END
END

Rainbow in div games studio

Explanation

Define program start (named "r" to save space)

PROGRAM r;

setup palette lookup

local
c[]=22,26,235,41,54,82,249,15,15;

BEGIN program code

BEGIN

Set video mode to 400,200

set_mode(400200);

loop x (predefined variable) from -80 (which bg hack) to 80 ( 7 colours + white centre)

for(x=-80;x<80;x+=10)

define elipse constraints

y=399-x;

draw elipse - on the first iteration this draws a circle larger than the screen in full white (index -8)

draw(type (5=filled elipse), colour, opacity, x0,y0,x1,y1)

draw(5,c[abs(x)/10],15,0,x,x,y,y);

once first is done, bump x up to zero to start drawing red band

x+=70*(x<0);

end for loop

END

infinite loop, drawing screen.

LOOP;FRAME;END

end (matches BEGIN at top of program)

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

Perl, 175 + 1 = 176 bytes

perl -MSVG -E '$z=SVG->new(width=>4e2,height=>2e2);@x=qw/#fff #8f00ff indigo #00f #0f0 #ff0 #ff7f00 red/;$z->circle(cx=>200,cy=>200,r=>200-10*$a++,style=>{fill=>pop@x})for 1..8;say$z->xmlify'

enter image description here

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

PHP, 190 bytes

imagefill($a=imagecreatetruecolor($r=400,200),0,0,$w=0xffffff);foreach([255<<16,0xff7f00,$w-255,65280,255,4915330,9371903,$w]as$i)imagefilledellipse($a,200,200,$r,20+$r-=20,$i);imagepng($a);

Run it like this:

php -r 'imagefill($a=imagecreatetruecolor($r=400,200),0,0,$w=0xffffff);foreach([255<<16,0xff7f00,$w-255,65280,255,4915330,9371903,$w]as$i)imagefilledellipse($a,200,200,$r,20+$r-=20,$i);imagepng($a);' | display

Resulting image 1

Also working in theory at 179 bytes (but the image looks a tad messed up, bad GD):

php -r '$r=410;imagesetthickness($a=imagecreatetruecolor(400,200),10);foreach([255<<16,0xff7f00,0xffff00,65280,255,4915330,9371903]as$i)imagearc($a,200,200,$r-=20,$r,1,0,$i);imagepng($a);' | display

Resulting image 2

Also not a perfect image, but much better than the above (and @166 bytes):

php -d error_reporting=30709 -r '$a=imagecreatetruecolor($r=400,200);foreach([255<<16,0xff7f00,0xffff00,65280,255,4915330,9371903]as$i)for(;++$$i<21;)imageellipse($a,200,200,$r,$r--,$i);imagepng($a);' | display

Resulting image 3

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