javascript - プログラムによるカラーピッカーの作成

Question

必要な色の数の引数を指定すると、HTML 16 進カラーコードの配列を返す、決定論的な Javascript HTML カラーピッカーを作成する方法は次のとおりです。

    function createColours(numColours) {
        return [/* colours array of size numColours */]     
    }

色自体はランダムに選択/生成できますが、メソッドは、選択された色が呼び出し間で常に同じであり、シリーズで常に同じ順序であることを保証する必要があります。

たとえば、関数によって決定された一連の色が次の 8 で始まる場合:

    "#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00", "#795800", "#FFD245", "#6EFFAD", etc, etc

この関数は、クライアントでの個別のメソッド呼び出し全体で、次の一貫した応答で動作します。

    ["#47092E", "#CC2A43"] == createColours(2);
    ["#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00"] == createColours(5);
    ["#47092E"] == createColours(1);        
    ["#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00", "#795800", "#FFD245", "#6EFFAD", #and 49 others#] == createColours(57);

注: 色は事前に変数として定義されていません。メソッドは 345 色を要求される可能性があり、そのすべてを適切な手段で生成する必要があります。

解決すべき問題は、何よりもまず、メソッド内で、シーケンスを保持しながら、毎回一貫して同じ n HEX カラー値を生成する機能をどのように作成するかです。

score 3 · Accepted Answer

開始シードが固定された疑似乱数ジェネレーター (PRNG) を使用する必要があります。JavaScript の Math.random メソッドは PRNG ですが、他の言語のようにシードを設定することはできません。

PRNG はかなり簡単に作成できます。インターネット上にはたくさんのコードがあります。固定の開始シードを指定すると、常に同じシーケンスの乱数が生成されます。これは、あなたが求めているものです。

それらの色が心地よく見えるかどうかは、まったく別の問題です...

シード機能を備えた 1 つの JavaScript 実装:
http://www.erikoest.dk/rng2.htm

また、C 実装 (javascript に簡単に変換できます) や、Lehmer 型の独自の PRNG を構築するためのその他の詳細については、
http ://www.google.com/search?q=Lehmer%20random%20number%20generator を参照してください。

コード付きの別のもの ( Mersenne twister ):
http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/VERSIONS/JAVASCRIPT/java-script.html

この質問では、javascript の PRNG のいくつかのタイプについて説明します:
Seedable JavaScript random number generator

関数の先頭で PRNG に同じ開始シードを指定すると、連続する各呼び出しで常に同じ数列が返されます。

その数字を色に変換すれば、準備完了です。

-アダム

score 1 · Accepted Answer

上記の回答と RNG コードhereを使用すると、最終的に次のようになりました (クラス作成にプロトタイプライブラリを使用することを前提としています)。

    var ColourPicker = Class.create({
        initialize: function() {
            this.hash = '#';
            this.rngRed = new RNG(5872323); // using same seed always guarantees number order response same
            this.rngGreen = new RNG(332233);
            this.rngBlue = new RNG(3442178);
        },
        numberToHex: function(number, padding) {
            var hex = number.toString(16);
            return hex;
        },
        createColours: function(numColours) {
            var colours = [];
            for (var i = numColours - colours.length; i-- > 0;) {
                var r = this.rngRed.nextRange(5,240);
                var g = this.rngGreen.nextRange(10,250);
                var b = this.rngBlue.nextRange(0,230);
                colours.push(this.hash + this.numberToHex(r) + this.numberToHex(g) + this.numberToHex(b));
            }
            return colours;
        }
    });

    var colourPicker = new ColourPicker();
    var colours = colourPicker.createColours(10);

    for (var i = 0 ; i < colours.length ; i++) {
        alert(colours[i]);
    }

score 1 · Accepted Answer

16 進数の色の各ペアは、RGB 値を表します。#AABBCC を指定すると、AA は赤、BB は緑、CC は青を表すと推測できます。赤の「値」を取得するには、最初に A を 16 進数から 10 進数に変換する必要があります。

A は 10 進数で 10 を表します。値のペアを 16 進数の色から乗算すると、RBG の各値が得られます。したがって、前述の 16 進数の色を RGB に変換すると、赤 = A A、緑 = B B、青 = C*C または赤 = 10*10 = 100、緑 = 11*11 = 121、青 =が得られます。 12*12 = 144。

したがって、#AABBCC は (100,121,144) の RGB です。プロセスを逆にするのに十分な情報であると思います...各色に2文字を超える長さの16進数値は必要ないため、10進数を16進数に変換するための派手なアルゴリズムは必要ありません帰ってきた。RGB は 0 から 255 までしか変化しないため、組み込み関数を使用するか、ページ上のリソースからテーブルを作成して、基数を変換できます。

16 進数のウィキペディアページ

score 0 · Accepted Answer

これは私がそれを行う方法です。

(function(){
var colours = [];
var x = "0123456789ABCDEF".split('');
var addColour = function() {
  var s='#';
  for(var i=6; i-->0;)
    s+=x[Math.round(Math.random()*15)];
  colours.push(s);
};
createColours = function(numColours) {
  for(var i=numColours-colours.length; i-->0;) addColour();
  return colours.slice(0,numColours);
}
})();

score -2 · Accepted Answer

この記事を参照してください。JavaScript のすべての関数が実際にどのようにオブジェクトであるかを説明します。

簡単なプロトタイプを次に示します。

function createColours(num) {
  if ( typeof createColors.colors == 'undefined' ) {
    // We've not yet created any colors...
    createColors.colors = new array();
   }
  if ( createColors.colors.length >= num ) {
     // Create new colors and add them to the array here...

  }
  // Otherwise, return the array...
  return createColors.colors;
}

score -2 · Accepted Answer

多分これ：

function createColours(numColours){
   var all  = ["#47092E", "#CC2A43", "#00C66B", .... ];
   var selected = [];
   for(var i=0;i<numColours;i++){
     selected.push(all[i]);
   }
   return selected;
}

javascript - プログラムによるカラー ピッカーの作成

6 に答える 6

Related

Reference

javascript - プログラムによるカラーピッカーの作成