均等なカラーコード生成

概要

色塗りグラフなどで必要なカラーチャ−トを自動生成します。引数に生成したい色の数を入力するとその数の均等に離散した色を合成し多次元配列で出力します。均等に離散したと言いましたが、厳密には同じ間隔で離れた連続色になります。

RGB値は入力値に最も近くて大きい自然数の3乗根が選択され組み合わせによって生成されます。そのため入力値が選択される自然数の3乗根より離れていると赤系統の色を含まないカラーチャートが合成される危険性があります。最も均等に合成されるのは入力値の3乗根が自然数となる場合なので、できるだけ入力値の3乗根が自然数となる数を入力してください。その後ランダムに減色すればかなり精度の高いカラーチャートができるはずです。

引数のthinはtrueだと彩度が低くなり全体としてやわらかい色になります。

関数

• 関数はスタンドアーロンなので関数名の変更は自由です。
• この関数はグローバル変数を一切汚染しません。
• 不正な入力に対するエラー回避処理は搭載されていません。

function make_color_chart( input,thin )
{
        var r = 0x0;
        var g = 0x0;
        var b = 0x0;
        var thin_plus = ( thin )? 1:0;
        var colors_array = new Array();
        for( var i=0 ; ; i++ )
        {
                if( Math.pow(i,3) >= input )
                {
                        var max = i - 1 + thin_plus;
                        break;
                }
        }
        
        var _plus = 0xff / max;
        for( var i=thin_plus ; i<=max ; i++ )
        {
                r = _plus * i;
                g = 0x0;
                b = 0x0;
                for( var j=thin_plus ; j<=max ; j++ )
                {
                        g = _plus * j;
                        b = 0x0;
                        for( var k=thin_plus ; k<=max ; k++ )
                        {
                                b = _plus * k;
                                colors_array.push( [ Math.round(r) , Math.round(g) , Math.round(b) ] );
                                if( colors_array.length >= input )return colors_array;
                        }
                        if( colors_array.length >= input )return colors_array;
                }
                if( colors_array.length >= input )return colors_array;
        }
}

Test

make colors

個数

薄く

Debug

　

OutPut

[data]