A challenge about colours [closed]

Question

Above, you can see an image full of different colours.

Click here for a hex-dump.

One possible way to generate this image is by using a linear gradient rotated 90 degrees, however, this may not be the only way.

Your task is to create a self-contained program that takes no input, and outputs an image with the same RGBA pixels as the above image, and in the exact same location, with the output image being in a file format that was created before this challenge, with the dimensions of the image being 4096x4096px, same as the original.

The shortest such program, scored in bytes, is the winner.

Cheating and standard loopholes are not allowed.

Answer 1

Processing, 197 195 bytes

void setup(){size(255,255);int r=255,a=r,g=0,b=0,i,j,k;background(a);for(i=0;i<a;k=i<43?g+=6:i<85?r-=6:i<a/2?b+=6:i<170?g-=6:i<213?r+=6:a>1?b-=6:0,i++)for(j=0;j<a;point(i,j++))stroke(r,g,b,a-j);}

This outputs the image in a 255x255 sized window

Explained

void setup(){            //this is required
  size(255,255);         //size of sketch
  int r=255,a=r,g=0,b=0,i,j,k; //declaring our vars
  background(a);         //set the background colour as white
  //for-loop for the x-coordinates, it also increments/decrements rgb values
  //  based on the x-coordinate
  for(i=0;i<a;k=i<43?g+=6:i<85?r-=6:i<a/2?b+=6:i<170?g-=6:i<213?r+=6:a>1?b-=6:0,i++)
    //for-loop for the y-coordinate (alpha)
    for(j=0;j<a;point(i,j++))   //2) then draw the point at the location
      stroke(r,g,b,a-j);        //1) set the colour of point
}

Edits

• Used int instead of float
• THIS SOLUTION IS INVALID DUE TO NEW RULES BEING ADDED. I WILL UPDATE ANSWER SOON

Answer 2

Python, 407 404 381

I just golfed the svg

d='<svg HBdefsTg"BS G"N:redM0YyellowM0.17Y#00ff00M0.33YcyanM0.5YblueM0.67Y#ff00ffM0.83YredM1"/B/LTw" x1Ex2Ey1Ey2="1"BS G"N:white;F:0" O"0YwhiteM1"/B/LB/defsUgVUwVB/svg>'
for R in zip("VTBUEYMNFGOHSLX",')" xEyEH/|BL id="|><|><rect fill="url(#|="0" |"/><S G"N:|;F:1" O"|S-color|S-opacity|style=|offset=|widthXheightX|stop|linearGradient|="4096" '.split('|')):d=d.replace(*R)
print d

A raster image can be generated using imagemagick :

~$ python snippet.py |convert svg:- hue.png
~$ file hue.png 
hue.png: PNG image data, 4096 x 4096, 8-bit/color RGBA, non-interlaced

Answer 3

HTML/CSS, 166 bytes

p{width:4096px;height:4096px;background:linear-gradient(0deg,#FFF,#FFF0),linear-gradient(90deg,red,#FF0 18.513%,lime 34.256%,aqua 50%,blue 65.43%,#F0F 81.199%,red)

<p>

Requires a browser that supports #RGBA colours, such as Firefox 49, Chrome 52 or Safari 9.1. I've taken the stops from the original SVG and rounded them to 5sf as that shouldn't make any difference on a 4096 pixel image, but if it does, they could be restored at a small cost. On the other hand, if rounding to either 4sf or whole pixels is OK, then that saves me a further 4 bytes.

Answer 4

R, 95 91 88 bytes

frame();n=4096;for(i in 1:n){l=matrix(NA,n,n);l[,i]=1:n;image(l,a=T,c=rainbow(n,s=i/n))}

When creating plots in while running an R script, by default they are saved to file, either as PNG or PDF. My PC struggles creating the 4096x4096 pixel plot taking up gigs of RAM, but if I change n to 256 it matches the correct output.

There are probably some bytes to be saved by making the arguments of image shorter, but I'll look at that when I get the supposed output.