16進数カラーコードを格納した配列を色鉛筆の順番でソート

Question

16進数カラーコードを格納した配列を色鉛筆の順番でソートしたい

Answer 1

こちらにあるように、実際の色鉛筆の順序も、メーカーの都合で、特段意味をなさないような配列になっています。

また、「色立体」やRGBという言葉からもわかるように、色を定義するには3つの成分が必要ですので、それを1次元に整列しようとすれば、何かしらの決め方が必要となります。まずは「どんなふうに並べるか」を考えてください。

Comments

[re97]

・回答ありがとうございました
・色鉛筆の順序は何らかの法則性で並んでいるものだとばかり思い込んでいたので、かなりびっくりしました

Answer 2

質問は「色が近い順に並べ替える」ということだと思います。
RGBにしろCMYにしろHSVにしろ3つのパラメータがありますので、その空間は3次元になります。ということは、3次元に散らばったポイントを最短距離で結ぶ、というアルゴリズムが必要になるかと思いますが、これは「巡回セールスマン問題」と呼ばれNP困難であることが知られています。
つまり、配列の要素を並べ替えて得られる全ての順列を総当たりし、その3次元空間での移動距離総計を計算し、その中で最小のものを選ぶ、というアルゴリズムよりマシなアルゴリズムはあまりなさそう、ということだと思います。

そういうわけで、サンプルです。

// JavaScript Array permutation generator
// (optimized from CoffeeScript output: see ArrayPermutation.coffee)
(function() {
  var generatePermutation = function(perm, pre, post, n) {
    var elem, i, rest, len;
    if (n > 0)
      for (i = 0, len = post.length; i < len; ++i) {
        rest = post.slice(0);
        elem = rest.splice(i, 1);
        generatePermutation(perm, pre.concat(elem), rest, n - 1);
      }
    else
      perm.push(pre);
  };

  /*
  extend Array.prototype
  e.g. [0, 1, 2].permutation(2)
  => [[0, 1], [0, 2], [1, 0], [1, 2], [2, 0], [2, 1]]
  */
  Array.prototype.permutation = function(n) {
    if (n == null) n = this.length;
    var perm = [];
    generatePermutation(perm, [], this, n);
    return perm;
  };
})();

function distance(p,q){
  return Math.pow((p[0]-q[0])*(p[0]-q[0])+(p[1]-q[1])*(p[1]-q[1])+(p[2]-q[2])*(p[2]-q[2]),.5)
}
function toRGBArray(hexString){
  var hex = parseInt(hexString,16);
  return [hex>>16&0xff,hex>>8&0xff,hex>>0&0xff];
}
function toRGBString(RGBArray){
  return ( (RGBArray[0]<<16) + (RGBArray[1]<<8) + (RGBArray[2]<<0) ).toString(16);
}

colorsString=["000000","ffffff","3399cc","cccccc","993333"];
colors=colorsString.map(toRGBArray);
var colorsPermutation = colors.permutation();
var colorsPermutationDistance = colorsPermutation.map(function(p){
  return p.slice(1).reduce(function(prev,currentColor){
    var prevColor = prev[1];
    var sum = prev[0];
    sum += distance(prevColor,currentColor);
    return [sum, currentColor];
  },[0,p[0]])[0];
});
colorsPermutation[colorsPermutationDistance.indexOf(Math.min.apply(this,colorsPermutationDistance))].map(toRGBString);
//["ffffff","cccccc","3399cc","993333","000000"]

順列の生成はこちらのコードを利用させていただきました。
JavaScriptによる順列組み合わせの生成 - Qiita

参考：

問題例の大きさは、都市の数で表される。この問題は、計算複雑性理論においてNP困難と呼ばれる問題のクラスに属する。すなわち、問題例の大きさに関する決定性の多項式時間アルゴリズムが見つかりそうにない、計算量的に困難な問題である。

巡回セールスマン問題 - Wikipedia

Comments

[re97]

・こちらの意向を汲み取っていただいた上での回答＆コード＆リンク提示ありがとうございました
・基本的な考え方や検索する際のキーワードすら分からなかったので、大変参考になりました！

Answer 3

グレースケールも合わさると、想像しているほど綺麗な並びには出来ないと思いますよ。
参考サイト

Comments

[re97]

・回答ありがとうございました
・「綺麗な並び」をコードで表現するのは難しいんですね