ランダムに色を作成する方法を教えてください。

JavaScriptでグラフを描こうとしているのですが、色を自動生成する方法で良いアイデアないでしょうか?グラフの数が動的に変わるのですが、色をうまく調整したいと考えています。

#FFFFFF
#000000

このような文字列を作るのですが、ランダムに文字列を作るだけでは似たような色が出来てしまう可能性があります。グラフの個数(10~20個くらいを想定)に応じてうまいこと(被らない、見にくくない)配色したいのですが、何かアイデアがあればアドバイスいただけると嬉しいです。

回答の条件
  • 1人5回まで
  • 登録:2009/08/19 10:21:28
  • 終了:2009/08/19 15:37:13

ベストアンサー

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912009/08/19 12:47:56

ポイント100pt

いろいろなやり方があると思いますが、実装の一例です。

getColor() を呼び出す度に異なる色を計算するようにしています。

計算式の部分を工夫することで、仕様に合わせることができるかと思います。


cseed の部分を定数にすれば、毎回同じ色を順番に使用するようにでき

ますが、今回は乱数で初期設定するようにしています。


今回は回答していませんが、計算ではなく自分で色の配色を設定したいのであれば、

色のテーブルを配列で持って、それをローテーションで使用するというのも手軽な

実装方法だと思います。


<html>
<head>
	<title>Color Test</title>
</head>
<body>
<script type="text/javascript">
<!--
// 色の初期設定
var cseed = Math.floor( Math.random()*100 );

// 色データ作成関数
function getColor(){
    var cnum = ( cseed++ * 0x552433 ) % 0x1000000; // 色の計算 R ≒ 256 * n / 3, G ≒ 256 * n / 7, B ≒ 256 * n / 5
    var hex = "000000" + cnum.toString(16);
    return "#" + hex.substr( hex.length - 6, 6 );
}

// サンプル関数
makeColorTable( 50 );
function makeColorTable( num ) {
	var cseed = Math.floor( Math.random()*100 );
   	document.write( "<table>\n" );
	for ( var i=1 ; i<=num ; ) {
	   	document.write( "    <tr>\n" );
		for ( var j=0 ; j<10 ; j++, i++ ) {
			var color = getColor();  // 色データの取得
	    	document.write( '        <td bgcolor="' + color + '" width="80">' + color  + "</td>\n" );
	    }
    	document.write( "    </tr>\n" );
	}
	document.write( "</table>\n" );
}
// -->
</script>
</body>
</html>
id:southgate_01

コメントありがとうございます、早速試してみます。

今日明日中に作るつもりですので、出来たら改めてコメントします。

2009/08/19 13:06:44
  • id:ku__ra__ge
    身も蓋も無い案なのでこっちに書きますが、作られるグラフが10~20個くらいならランダム生成に拘らずに予め色を30個くらい用意しておいて、それを順番に利用すればいいんじゃないでしょうか?
  • id:southgate_01
    southgate_01 2009/08/19 15:16:38
    コメントありがとうございます。
    その案も考えてはいるのですが、万が一50個来たら・・・とか考えたりしてしまうんですよね。
    50個も来たらそもそも色を変えたところで見にくいに決まっているんですけど・・・

    プログラムで動的に色を作る方法と、あらかじめ色を用意する方法の2つをやってみます。
  • id:southgate_01
    southgate_01 2009/08/19 15:40:51
    とりあえず完成しました。
    説明が不足していたのですが、作ろうとしているグラフは折れ線グラフです。

    感想は、「色うんぬんよりも、グラフの数が増えてるとどうやっても見にくい」ということです。作る前は色がすごく重要だと思っていたのですが・・・

    とりあえず10個ほど色を用意してそれを割り当てるようにしました。
    グラフが10個を超えるとどうやっても見にくく、後はデータを絞り込むなどの運用でカバーするしかないという結論にしました。

    ということで、無事出来上がりました。
    ありがとうございました。
  • id:Mook
    人が簡単に識別できる色は8色ぐらいのような気がします。
    あとは並べて比べれば違うことはわかっても同系色になってくるので難しいですね。

    あらかじめ色を用意する方法は手軽で効果的な方法だと思います。


    すでに解決済みなので今更ですが、回答は積の桁上がりを考慮していなかったので改良版を
    作成してみました。下記の関数で比較的多くの色が分散して得られた感じがしました。
    最初の変数のパラメータを変えてみると、いろいろと試せると思います。
    (インデントで全角スペースを使用していますが、試す際は半角に変換ください。)
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 色の初期化
      var cseed = Math.floor( Math.random()*1000 );
      var div_r = 13;
      var div_g = 17;
      var div_b = 23;
      var div_d = 5

    // 色データ作成関数
    function getColor(){
      var cnum = Math.floor( ( cseed % ( div_r + 1 ) ) * 0xff0000 / div_r )
           + Math.floor( ( cseed % ( div_g + 1 ) ) * 0xff00 / div_g )
           + Math.floor( ( cseed % ( div_b + 1 ) ) * 0xff / div_b );
      cseed += div_d;
      var hex = "000000" + cnum.toString(16);
      return "#" + hex.slice( -6 );
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません