[Question]
  [
Your task is to create a program that will, given an input image, create an output image of the same size, where all pixels are ordered by hex value.
Your program may:
* Sort the pixels from left to right and then down or first sort down in columns and then right. In any case, the top left pixel is the smallest, and the bottom right is the largest.
* Use transparency, but this is not required.
* Sort by RGB, but you may use CMY, or any other format with at least 3 values. You can choose what values to sort on. (HSV may give some nice images)
* Use any well-known image format that most computers can open.
Rules:
* Output must be written to disk or be pipeable to a file.
* Input is given as a commandline argument, in the form of a relative path to the image, or piped in from the commandline.
* This is code golf, so shortest code in bytes wins!
  
[Answer]
# Pyth - 10 bytes
Reads image, collapses bitmap, sorts, and then splits up bitmap again, then writes.
```
.wclK'zSsK
```
Doesn't work online for obvious reasons. Takes input as relative path to image file and outputs into `o.png`.
Output from American Gothic:
[![](https://i.stack.imgur.com/Py50h.png)](https://i.stack.imgur.com/Py50h.png)
[Answer]
# JavaScript (ES6), ~~383~~ ~~377~~ 354 bytes
```
f=s=>{d=document,i=new Image,i.src=s,i.onload=$=>{c=d.createElement`canvas`,x=c.getContext`2d`,c.width=w=i.width,c.height=h=i.height,x.drawImage(i,0,0),D=x.getImageData(0,0,w,h),t=D.data,t.set([].concat(...[...t].map((v,i,T)=>i%4?[,,,0]:T.slice(i,i+4)).sort((a,b)=>a.some((v,i)=>k=v-b[i])&&k)).slice(12*w*h)),x.putImageData(D,0,0),d.body.appendChild(c)}}
```
[![sample output](https://i.stack.imgur.com/8pdQW.png)](https://i.stack.imgur.com/8pdQW.png)
**Runnable demo:**
```
f=function(s) {l=[i=new Image].slice,i.crossOrigin="anonymous",i.src=s,i.onload=function($){d=document,c=d.createElement`canvas`,c.width=w=i.width,c.height=h=i.height,x=c.getContext`2d`,x.drawImage(i,0,0),D=x.getImageData(0,0,w,h),t=D.data,t.set([].concat.apply([],l.call(t).map((v,i)=>i%4?[0,0,0,0]:l.call(t,i,i+4)).sort((a,b)=>a.reduce((A,v,i)=>A||v-b[i],0))).slice(3*t.length)),x.putImageData(D,0,0),d.body.appendChild(c)}}
$("img").click(function() { f(this.src); })
```
```
canvas { padding-right: 4px; } img { cursor: pointer; }
```
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/The_Scream.jpg/114px-The_Scream.jpg"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Claude_Monet_La_Grenouill%C3%A9re.jpg/193px-Claude_Monet_La_Grenouill%C3%A9re.jpg"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Grant_Wood_-_American_Gothic_-_Google_Art_Project.jpg/120px-Grant_Wood_-_American_Gothic_-_Google_Art_Project.jpg"><br>
```
How this code works is to use `getImageData` to get an array of the form
```
[R,G,B,A,
 R,G,B,A,
 R,G,B,A,
 ...]
```
And `map` it to an array of the form
```
[[R,G,B,A],[0,0,0,0],[0,0,0,0],[0,0,0,0],
 [R,G,B,A],[0,0,0,0],[0,0,0,0],[0,0,0,0],
 [R,G,B,A],[0,0,0,0],[0,0,0,0],[0,0,0,0],
 ...]
```
So that the R values are mapped to arrays of the RGBA set, and the B, G, and A values turn into minimum-value zero arrays. When we sort this array, all the `[0,0,0,0]` arrays sort to the bottom and the real-value arrays sort normally at the top:
```
[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
 [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
 [0,0,0,0],..., [R,G,B,A],[R,G,B,A],[R,G,B,A],...]
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
               extract & flatten these sorted pixels
```
We skim the top fourth of the array (to lose the empty values we created), flatten it with `[].concat.apply`, and end up with an array of the first form again, but this time, it's sorted.
Slightly de-golfed with whitespace and comments:
```
f=s=>{ 
  // first, load image, then do everything else onload
  i=new Image,
  i.src = s,
  i.onload=$=>{
    // set up the canvas
    d=document,
    c=d.createElement`canvas`,
    w=c.width=i.width,
    h=c.height=i.height,
    x=c.getContext`2d`,
    // draw image to canvas and capture pixel data
    x.drawImage(i,0,0),
    D=x.getImageData(0,0,w,h),
    t=D.data,
    // set pixel data to...
    t.set(
      // the flattened array...
      [].concat(...
        // that is a mapping of the pixel data...
        [...t].map(
          // that clumps RGBA families into subarrays
          // by replacing every fourth value with [R,G,B,A]
          // and all other values to [0,0,0,0]...
          (v,i,T)=>i%4?[,,,0]:T.slice(i,i+4)
        )
        // and is then sorted...
        .sort(
          // by reducing each array to a positive, negative, or zero
          // by comparing R,G,B,& A until the first nonzero difference
          (a,b)=>a.some((v,i)=>k=v-b[i])&&k
        )
      )
      // then eliminate the low-sorted empty [0,0,0,0] values we created,
      // leaving only the top fourth, with real values
      // (note that 3*4*w*h is the same as 3*t.length)
      .slice(3*4*w*h)
    ),
    // now that `t` is set, store `D` in canvas
    x.putImageData(D,0,0),
    // show canvas
    d.body.appendChild(c)
  }
}
```
Note that most browsers may fail to run this code for large images, because it passes a huge number of arguments into `[].concat`. When the browser environment does not allow sufficient memory for all the arguments, an alternative approach is to re-map the RGBA values out of the top fourth arrays back onto the array, for a total score of **361 bytes**:
```
f=s=>{d=document,i=new Image,i.src=s,i.onload=$=>{c=d.createElement`canvas`,x=c.getContext`2d`,c.width=w=i.width,c.height=h=i.height,x.drawImage(i,0,0),D=x.getImageData(0,0,w,h),t=D.data,t.set([...t].map((v,i,T)=>i%4?[,,,0]:T.slice(i,i+4)).sort((a,b)=>a.some((v,i)=>k=v-b[i])&&k).map((v,i,A)=>A[3*w*h+(i>>2)][i%4])),x.putImageData(D,0,0),d.body.appendChild(c)}}
```
We simply replace the `[].concat(...{stuff}).slice(12*w*h)` with `{stuff}.map((v,i,A)=>A[3*w*h+(i>>2)][i%4])`.)
[Answer]
# Mathematica ~~86 83~~ 72 bytes
```
 f=Flatten;Image[f[Sort[f[s=ImageData@#1,1]]]~ArrayReshape~Dimensions@s]&
```
---
With 14 bytes saved thanks to @Martin Buttner.
---
**Example**
The image itself is input. Alternatively, a variable containing the image could be used.
[![gothic](https://i.stack.imgur.com/Po94N.png)](https://i.stack.imgur.com/Po94N.png)
[Answer]
# Javascript ES6, 334 bytes
```
f=s=>{with((d=document).body.appendChild(c=d.createElement`canvas`).getContext`2d`)(i=new Image).src=s,drawImage(i,0,0,w=c.width=i.width,h=c.height=i.height),t=(g=getImageData(0,0,w,h)).data,t.set([...t].map(i=>(0+i.toString(16)).slice(-2)).join``.match(/.{8}/g).sort().join``.match(/../g).map(i=>parseInt(i,16))),putImageData(g,0,0)}
```
Ungolfed:
```
f=s=>{                                   // create function that accepts image name
 with((d=document).body.appendChild(     // use "with" to exclude having to prepend "<context2d>." to drawImage, getImageData and putImageData
   c=d.createElement`canvas`).getContext`2d`) // create canvas to get pixels from and draw output to
  (i=new Image).src=s,                   // create image, define source filename
  drawImage(i,0,0,w=c.width=i.width,     // draw image to canvas
                  h=c.height=i.height),
  t=(g=getImageData(0,0,w,h)).data,      // get image data from canvas in form of Uint8Array
  t.set([...t]                           // convert image data from Uint8Array to standard array
   .map(i=>(0+i.toString(16)).slice(-2)) // convert R,G,B,A bytes to base16 strings with leading zeros
   .join``.match(/.{8}/g)                // convert array of [R,G,B,A,R,G,B,A,...] to [RGBA,RGBA,...]
   .sort()                               // sort pixel values
   .join``.match(/../g)                  // convert array of [RGBA,RGBA,...] to [R,G,B,A,R,G,B,A,...]
   .map(i=>parseInt(i,16))),             // convert hex strings back to integers, reassign to image data
  putImageData(g,0,0)                    // dump image data onto canvas
}
```
[Answer]
# C (using SDL1.2), ~~333~~ ~~322~~ 315 bytes
C is most probably not the 'sharpest knife in the shelf' for this kind of work, I wanted to give it a try anyway. Tips for improving my answer are welcome. The program gets the name of the input image file as a cli argument.
```
#include <SDL.h>
#include <SDL_image.h>
#define X SDL_Surface*
#define Y const void*
C(Y a,Y b){return*(Uint32*)a-*(Uint32*)b;}main(int o,char**a){X i=IMG_Load(a[1]);X s=SDL_SetVideoMode(i->w,i->h,32,0);i=SDL_ConvertSurface(i,s->format,0);qsort(i->pixels,i->w*i->h,4,C);SDL_BlitSurface(i,0,s,0);for(;;SDL_Flip(s));}
```
compile and run : `gcc -I/usr/include/SDL snippet.c -lSDL -lSDL_image && ./a.out`
[![enter image description here](https://i.stack.imgur.com/F5YCR.png)](https://i.stack.imgur.com/F5YCR.png)
I don't usually golf in C, but I've just answered [this challenge](https://codegolf.stackexchange.com/questions/62095/a-single-pixel-moving-in-a-circular-path) yesterday and I just wanted to continue playing with that new toy :)
thanks to @pseudonym117 for helping me saving 5 bytes
[Answer]
## JavaScript (ES6), 452 ~~480~~ ~~484~~ ~~487~~ ~~511~~ bytes
Wow, this got longer than expected:
```
f=u=>{i=new Image;i.src=u;i.onload=_=>{c=(d=document).createElement`canvas`;c.width=w=i.width;c.height=h=i.height;x=c.getContext`2d`;x.drawImage(i,0,0,w,h);p=x.getImageData(0,0,w,h).data;t=[];f=[];for(j=0;j<p.length;++j)t.push([p[j],p[++j],p[++j],p[++j]]);t.sort((a,b)=>a[0]>b[0]||a[0]==b[0]&&a[1]>b[1]||a[0]==b[0]&&a[1]==b[1]&&a[2]>b[2]).map(u=>f.push.apply(f,u));x.putImageData(new ImageData(new Uint8ClampedArray(f),w,h),0,0);d.body.appendChild(c)}}
```
The function takes an URL as its input `f('test.jpg');` and draws the result into a `canvas`-element which is appended to the `body`.
Note that the source must be on the same domain or the script will halt with a security issue.
---
**Limitations**
I've tested it in Firefox 42 on OS X (10.10) on a machine with 2.5 GHz i7 and 16 GB RAM. The maximum image size I could process without Firefox asking to continue the script execution was *1600 x 1932 px*.
---
**Ungolfed**
```
f = u => {
    i = new Image;
    i.src = u;
    i.onload = _ => {
        c = (d = document).createElement`canvas`;
        c.width = w = i.width;
        c.height = h = i.height;
        
        x = c.getContext`2d`;
        x.drawImage(i, 0, 0, w, h);
        p = x.getImageData(0, 0, w, h).data;
        
        t = [];
        f = [];
        for (j = 0; j < p.length;++j)
            t.push([p[j], p[++j], p[++j], p[++j]]);
        
        t.sort( (a,b) => a[0] > b[0] || a[0] == b[0] && a[1] > b[1] || a[0] == b[0] && a[1] == b[1] && a[2] > b[2] )
         .map(u => f.push.apply(f,u));
        x.putImageData( new ImageData( new Uint8ClampedArray(f), w, h), 0, 0);
        d.body.appendChild(c)
    }
}
```
---
**Output**
For a better comparison I also took the "*American Gothic*" as the example source:
[![enter image description here](https://i.stack.imgur.com/PvV79.jpg)](https://i.stack.imgur.com/PvV79.jpg)
---
**Edits**
* *Saved* **24 bytes** by using `for (a in b)` instead of `for(;;)`. Thanks to [ar34z](https://codegolf.stackexchange.com/users/46842/ar34z)
* *Saved* **3 bytes** by storing `document` in a variable.
* *Saved* **4 bytes** by dropping some of these `()`.
* *Saved* **10 bytes** by using [tagged template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings#Tagged_template_strings), omitting the `()` on object creation and removing another pair of redundant `()`. Thanks to [apsillers](https://codegolf.stackexchange.com/users/7796/apsillers).
* *Saved* **14 bytes** by massive refactoring of the code that flattens the color array after sorting. Thanks a lot to [apsillers](https://codegolf.stackexchange.com/users/7796/apsillers) and [Ypnypn](https://codegolf.stackexchange.com/users/16294/ypnypn) for undercutting each other.
* *Saved* **1 byte** by refactoring the `for`-loop that gets the colors of each pixel.
[Answer]
# Bash + GNU utils, 80
```
s()(sed 1d $1|cut -d\  -f$2)
sed 1q $1
s $1 2-|sort -t_ -k1.16|paste <(s $1 1) -
```
This assumes input/output format is in ImageMagick pixel enumeration .txt format. The input is passed as a filename and the output goes to STDOUT.
---
If the above is not considered a well-known image format, then we can add in the necessary conversions:
# Bash + GNU utils + ImageMagick, 108
```
s()(sed 1d t|cut -d\  -f$1)
convert $1 txt:t
(sed 1q t
s 2-|sort -t_ -k1.16|paste <(s 1) -)|convert txt:- $2
```
Input and output are specified as filenames. ImageMagick determines what file formats to use by the passed file extensions, so we can use any common ones:
```
$ ./sortpixels.sh 398px-Grant_Wood_-_American_Gothic_-_Google_Art_Project.jpg o.png
$ 
```
The resulting o.png looks like:
[![enter image description here](https://i.stack.imgur.com/M1l49.png)](https://i.stack.imgur.com/M1l49.png)
[Answer]
# Python 2, 128 bytes
```
from PIL import*
a=Image.open('a')
b=a.load()
c,d=a.size
a.putdata(sorted(b[e,f]for f in range(d)for e in range(c)))
a.save('b')
```
Provided the image is a file named `a` with no extension, the output will be a file named `b` with no extension.
![American Gothic](https://i.stack.imgur.com/CRikX.jpg)
![American Gothic (sorted)](https://i.stack.imgur.com/yGjgg.jpg)
[Answer]
# Java, 316 bytes
```
import javax.imageio.*;class C{public static void main(String[]a)throws Exception{java.awt.image.BufferedImage i=ImageIO.read(new java.io.File(a[0]));int w=i.getWidth(),h=i.getHeight(),v[]=i.getRGB(0,0,w,h,null,0,w);java.util.Arrays.sort(v);i.setRGB(0,0,w,h,v,0,w);ImageIO.write(i,"png",new java.io.File("a.png"));}}
```
Places the hexadecimal values of the pixel colors in an array. The array is sorted, and the colors are remapped to the pixels in the image. The name of the resulting image is `a.png`.
[![yellow tulips input](https://i.stack.imgur.com/FlO1w.jpg)](https://i.stack.imgur.com/FlO1w.jpg)
[![yellow tulips output](https://i.stack.imgur.com/AXczO.png)](https://i.stack.imgur.com/AXczO.png)
  
[![American Gothic input](https://i.stack.imgur.com/odLLK.jpg)](https://i.stack.imgur.com/odLLK.jpg)
[![enter image description here](https://i.stack.imgur.com/ywgzc.png)](https://i.stack.imgur.com/ywgzc.png)
[Answer]
# SmileBASIC, ~~39~~ 35 bytes
Assuming the image is loaded onto the 512\*512 graphics page:
```
DIM A[0]GSAVE A,0SORT A
GLOAD A,0,1
```
Explained:
```
DIM IMG[0] 'create array
GSAVE IMG,0 'save graphics to array
SORT IMG 'sort
GLOAD IMG,0,1 'load graphics from array
```
It's that simple!
~~Unfortunately we have to use integers, which adds 4 bytes to the program size due to the type suffixes.~~
[Answer]
# Java, ~~424~~ ~~417~~ 404 bytes
Well, this is not a language you want to golf in...
```
import java.awt.image.*;import java.io.*;import javax.imageio.*;class F{public static void main(String[]x)throws Exception{BufferedImage i,o;i=ImageIO.read(new File(x[0]));o=new BufferedImage(i.getWidth(),i.getHeight(),BufferedImage.TYPE_INT_RGB);o.setData(i.getRaster());int[]p=((DataBufferInt)o.getRaster().getDataBuffer()).getData();java.util.Arrays.sort(p);ImageIO.write(o,"png",new File("o.png"));}}
```
[Answer]
# C#, 497 bytes
First time post, first golf. Clearly not the best for golfing
Not really respecting the piping.
Takes an image path as an input and outputs it with letter "o" prepend to the name.
Works better with bitmaps, odds results with others
```
using System.Linq;using System.Drawing;using System.Runtime.InteropServices;class Program{static void Main(string[]args){using(var im=(Bitmap)Image.FromFile(args[0])){int h=im.Height;int w=im.Width;var b=im.LockBits(new Rectangle(0,0,w,h),System.Drawing.Imaging.ImageLockMode.ReadWrite,System.Drawing.Imaging.PixelFormat.Format32bppRgb);var p=new int[h*w];Marshal.Copy(b.Scan0,p,0,h*w);var q=p.ToList();q.Sort();p=q.ToArray();Marshal.Copy(p,0,b.Scan0,h*w);im.UnlockBits(b);im.Save("o"+args[0]);}}}
```
[Answer]
## Haskell, 195 bytes
```
import Data.List
import Graphics.GD
f p=do 
 a<-loadPngFile p;(x,y)<-imageSize a;let l=[(i,j)|j<-[0..y],i<-[0..x]]
 mapM(flip getPixel a)l>>=mapM(\(d,c)->setPixel d c a).zip l.sort;savePngFile"o"a
```
This uses the `GD` library. Usage `f <filename>`. The input file must be in `png` format. The output file is named `o`.
How it works: straightforward, i.e. read the picture, walk over all coordinates and get the pixels, sort the pixels, walk over the coordinates again, but this time set the pixels in the order they appear in the sorted list, write the file to disk.
[![enter image description here](https://i.stack.imgur.com/WroC7.png)](https://i.stack.imgur.com/WroC7.png)
[Answer]
# Java + Processing, 198 bytes
```
PImage p;void settings(){p=loadImage("peter-olexa-Ejgx4k3iryg-unsplash.jpg");size(p.width,p.height);}void setup(){p.loadPixels();p.pixels=sort(p.pixels);p.updatePixels();image(p,0,0);save("2.jpg");}
```
Outputs image as `1.jpg`.
[![enter image description here](https://i.stack.imgur.com/r0PuD.jpg)](https://i.stack.imgur.com/r0PuD.jpg)
[![enter image description here](https://i.stack.imgur.com/clCMd.jpg)](https://i.stack.imgur.com/clCMd.jpg)
[![enter image description here](https://i.stack.imgur.com/KwRhx.jpg)](https://i.stack.imgur.com/KwRhx.jpg)
[![enter image description here](https://i.stack.imgur.com/5t1O7.jpg)](https://i.stack.imgur.com/5t1O7.jpg)
[Answer]
# [Funky2](https://github.com/tehflamintaco/funky2), 156 Bytes
```
I=draw.newImageData(arg[1)C=[]j=i=0I.mapPixels((x,y,r)=>C[i++]=r)C=C:sort((a,b)=>(a.r*256+a.g+a.b/256)-(b.r*256+b.g+b.b/256))I.mapPixels(@C[j++)I.export"o"
```
Non-Competing due to the fact that several features were implemented in response to this challenge, including image exporting and list sorting. Also several features needed fixing.
## Ungolfed
```
I = draw.newImageData(arg[1]); $// Load the specified image as a bitmap.
c = []; $// Generate a table for us to pour colours into.
j=i=0;  $// Initialize two counters, I and J. Saves us resetting i, and c[#c] is prohibitively memory intensive
I.mapPixels((x,y,r)=>c[i++]=r); $// Iterate over the image and assign each colour (Contained as a list in r) into c.
c = c:sort((a,b)=>(a.r*256+a.g+a.b/256)-(b.r*256+b.g+b.b/256)); $// Sort C by R, then G, then B.
I.mapPixels(@c[j++]); $// Map back over I, replacing each colour with their index in C
I.export"o"; $// Export as "o"
```
There are a couple of opportunities for improvement; such as using `c[#c]` rather than `c[i++]` or Sorting `c` every time I try to index it in the second mapping; but these methods cause the execution time to skyrocket.
**Output, American Gothic**
![Gothic](https://i.gyazo.com/936e57826cd9bcea9db8ba0cde42b7f0.png)
]