JavaScript Diary

最初に断っておきますが、以下は InternetExplorer/Windows2000 での話で他環境では全く試していません。処理が激重いものが多数存在します。間違えても Netscape4 で「１とか２とか３とか書いてある」リンク部分をクリックしないで下さい。

先日紹介した任意色間グラデーション の使用例に「カラーテーブル」がありました。
もう一度、これを実行してみますが、今度は下のゲージに注目してみて下さい。

１．カラーテーブル 32×32

ゲージの減り方が減衰していったのが分かると思います。
これは勿論、僕が故意にやっているわけではなく、何故か減衰するんです。
凄く不思議なことでした。

なんとなく「文字列が長すぎるのではないか」と思い、ちょっと改良してみました。
同じようにステータスバーのゲージに注目して下さい。

２．カラーテーブル 32×32

凄くないですか？まじで。１．とは比べ物にならないほどの速さだったと思います。

やってることは大したことではありません :-)

１．は吐き出す文字列を全て１つの変数に格納して出力していたのですが、
２．ではある程度分割して変数に納め、それをまとめて出力したんです。

実際にどのようにしていたのかというと、ソースはちょっと分かり難いと思うので、例えば１．は

var html = "" ;

for(var i=0;i<n;i++){
    for(var j=0;j<m;j++){
        html += "〜" ;
    }
}

document.write( html );

２．は

var htmls = new Array();

for(var i=0;i<n;i++){
    htmls[i] = "" ;
    for(var j=0;j<m;j++){
        htmls[i] += "〜" ;
    }
}

document.write( htmls.join("") );

ということになります。

１．は確かに長すぎた。僕はこの辺はサッパリなんですが、メモリ内でスワップとか起きてたんでしょうね。

では、最後に 64×64（=4096色）に挑戦です。およそ 500KB を JavaScript で出力します。
このぐらいになると文字列をさらに細かく分割する必要があります。

３．カラーテーブル 64×64

分割しているだけなので、説明はしません。
ちなみに ３．と同じアルゴリズムで 32×32 を作成したもの。 比べると分かりますが、２． より多少速くなっています。

あと、今回の話とは関係ないですが、前回紹介した 任意色間グラデーション関数 を少しバージョンアップしました。

var colors = new Array( "ff0000", "ffff00", "00ff00", "00ffff", "0000ff", "ff00ff", "ff0000" );
var cs = gradation( colors, 255 );