Ihre Aufgabe ist es, ein Programm zu erstellen, das bei gegebenem Eingabebild ein Ausgabebild derselben Größe erstellt, wobei alle Pixel nach Hexadezimalwerten sortiert sind.

Ihr Programm kann:

• Sortieren Sie die Pixel von links nach rechts und dann nach unten oder sortieren Sie sie zuerst in Spalten und dann nach rechts. In jedem Fall ist das obere linke Pixel das kleinste und das untere rechte das größte.
• Verwenden Sie Transparenz, dies ist jedoch nicht erforderlich.
• Sortieren Sie nach RGB, aber Sie können CMY oder ein anderes Format mit mindestens 3 Werten verwenden. Sie können auswählen, nach welchen Werten sortiert werden soll. (HSV kann einige schöne Bilder geben)
• Verwenden Sie jedes bekannte Bildformat, das die meisten Computer öffnen können.

Regeln:

• Die Ausgabe muss auf die Festplatte geschrieben oder in eine Datei umgeleitet werden.
• Die Eingabe erfolgt als Befehlszeilenargument in Form eines relativen Pfads zum Bild oder über die Befehlszeile.
• Das ist Code Golf, also gewinnt der kürzeste Code in Bytes!

Pyth - 10 Bytes

Liest das Bild, reduziert die Bitmap, sortiert und teilt die Bitmap erneut auf und schreibt dann.

.wclK'zSsK

Funktioniert aus offensichtlichen Gründen nicht online. Nimmt Eingaben als relativen Pfad zur Bilddatei und gibt sie in aus o.png.

Ausgabe von American Gothic:

JavaScript (ES6), 383 377 354 Byte

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)}}

Lauffähige 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>

Wie dieser Code funktioniert, wird verwendet getImageData, um ein Array des Formulars abzurufen

[R,G,B,A,
 R,G,B,A,
 R,G,B,A,
 ...]

Und mapes zu einem Array der 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],
 ...]

Damit werden die R-Werte auf Arrays des RGBA-Satzes abgebildet, und die B-, G- und A-Werte werden zu Null-Arrays mit dem Mindestwert. Wenn wir dieses Array sortieren, werden alle [0,0,0,0]Arrays nach unten und die Real-Value-Arrays nach oben sortiert:

[[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

Wir überfliegen das obere Viertel des Arrays (um die von uns erstellten leeren Werte zu verlieren), reduzieren es mit [].concat.applyund erhalten wieder ein Array des ersten Formulars, aber dieses Mal ist es sortiert.

Leicht entgolft mit Leerzeichen und Kommentaren:

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)
  }
}

Beachten Sie, dass die meisten Browser diesen Code für große Bilder möglicherweise nicht ausführen können, da eine große Anzahl von Argumenten übergeben wird [].concat. Wenn die Browserumgebung nicht genügend Speicher für alle Argumente zulässt, können Sie alternativ die RGBA-Werte aus den oberen vierten Arrays erneut auf das Array abbilden, um eine Gesamtbewertung von 361 Byte zu erhalten :

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)}}

Wir ersetzen einfach das [].concat(...{stuff}).slice(12*w*h)mit {stuff}.map((v,i,A)=>A[3*w*h+(i>>2)][i%4]).)

Mathematica 86 83 72 Bytes

 f=Flatten;Image[f[Sort[f[s=ImageData@#1,1]]]~ArrayReshape~Dimensions@s]&

Mit 14 Bytes dank @Martin Buttner gespart.

Beispiel

Das Bild selbst wird eingegeben. Alternativ könnte eine Variable verwendet werden, die das Bild enthält.

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
}

C (unter Verwendung von SDL1.2), 333 322 315 Bytes

C ist höchstwahrscheinlich nicht das 'schärfste Messer im Regal' für diese Art von Arbeit, ich wollte es trotzdem versuchen. Tipps zur Verbesserung meiner Antwort sind willkommen. Das Programm erhält den Namen der Eingabebilddatei als 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));}

kompilieren und ausführen: gcc -I/usr/include/SDL snippet.c -lSDL -lSDL_image && ./a.out

Ich spiele normalerweise nicht Golf in C, aber ich habe diese Herausforderung gerade beantwortet gestern und wollte einfach weiter mit diesem neuen Spielzeug spielen :)

danke an @ pseudonym117 für die hilfe beim sparen von 5 bytes

JavaScript (ES6), 452 480 484 487 511 Bytes

Wow, das wurde länger als erwartet:

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)}}

Die Funktion nimmt eine URL als Eingabe f('test.jpg');und zeichnet das Ergebnis in ein canvas-Element, das an das angehängt wird body.

_{Beachten Sie, dass sich die Quelle in derselben Domäne befinden muss, oder das Skript wird aufgrund eines Sicherheitsproblems angehalten.}

Einschränkungen

Ich habe es in Firefox 42 unter OS X (10.10) auf einem Computer mit 2,5 GHz i7 und 16 GB RAM getestet. Die maximale Bildgröße, die ich ohne die Aufforderung von Firefox zur Fortsetzung der Skriptausführung verarbeiten konnte, betrug 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)
    }
}

Ausgabe

Zum besseren Vergleich habe ich auch die " American Gothic " als Beispielquelle genommen:

Bearbeitungen

• 24 Bytes gespart durch Verwendung von for (a in b)anstelle von for(;;). Vielen Dank an ar34z
• Gespeichert 3 Bytes durch Speichern documentin einer Variablen.
• 4 Bytes gespart, indem einige davon fallengelassen wurden ().
• Gespeicherte 10 Bytes unter Verwendung von getaggten Vorlage strings , das Weglassen der ()auf der Objekterstellung und ein anderes Paar von redundanten entfernen (). Dank apsillers .
• Einsparung von 14 Bytes durch massives Refactoring des Codes, der das Farbarray nach dem Sortieren glättet. Vielen Dank an Apsillers und Ypnypn, die sich gegenseitig unterboten haben.
• Gespeichert 1 Byte durch die Refactoring for-loop, die die Farben jedes Pixels erhält.

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) -

Dies setzt voraus, dass das Eingabe- / Ausgabeformat das TXT-Format der ImageMagick-Pixel-Aufzählung aufweist. Die Eingabe wird als Dateiname übergeben und die Ausgabe geht an STDOUT.

Wenn das oben Genannte nicht als bekanntes Bildformat angesehen wird, können wir die erforderlichen Konvertierungen hinzufügen:

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

Eingabe und Ausgabe werden als Dateinamen angegeben. ImageMagick bestimmt, welche Dateiformate von den übergebenen Dateierweiterungen verwendet werden sollen, sodass wir alle gängigen verwenden können:

$ ./sortpixels.sh 398px-Grant_Wood_-_American_Gothic_-_Google_Art_Project.jpg o.png
$ 

Das resultierende o.png sieht so aus:

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')

Sofern es sich bei dem Bild um eine Datei aohne Erweiterung handelt, handelt es sich bei der Ausgabe um eine Datei bohne Erweiterung.

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"));}}

Platziert die Hexadezimalwerte der Pixelfarben in einem Array. Das Array wird sortiert und die Farben werden den Pixeln im Bild neu zugeordnet. Der Name des resultierenden Bildes ist a.png.

SmileBASIC, 39 35 Bytes

Angenommen, das Bild wird auf die 512 * 512-Grafikseite geladen:

DIM A[0]GSAVE A,0SORT A
GLOAD A,0,1

Erklärt:

DIM IMG[0] 'create array
GSAVE IMG,0 'save graphics to array
SORT IMG 'sort
GLOAD IMG,0,1 'load graphics from array

So einfach ist das! Leider müssen wir Ganzzahlen verwenden, wodurch die Programmgröße aufgrund der Typ-Suffixe um 4 Byte erhöht wird.

Java, 424 417 404 Bytes

Nun, das ist keine Sprache, in der du Golf spielen willst ...

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"));}}

C #, 497 Bytes

Erstes Mal nach dem ersten Golf. Ganz klar nicht das Beste zum Golfen

Ich respektiere die Rohrleitungen nicht wirklich. Nimmt einen Bildpfad als Eingabe und gibt ihn mit dem Buchstaben "o" vor dem Namen aus.

Funktioniert besser mit Bitmaps, Chancenergebnisse mit anderen

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]);}}}

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

Dies nutzt die GDBibliothek. Verwendung f <filename>. Die Eingabedatei muss im pngFormat vorliegen. Die Ausgabedatei heißto .

So funktioniert es: Unkompliziert, dh das Bild lesen, alle Koordinaten durchlaufen und die Pixel abrufen, die Pixel sortieren, die Koordinaten erneut durchlaufen, aber diesmal die Pixel in der Reihenfolge einstellen, in der sie in der sortierten Liste angezeigt werden, in die die Datei geschrieben wird Platte.