Gradation

目次

はじめに

主にグラデーションカラー配列を生成するクラスです。HTML にグラデーション文字列としても書き出すことも出来ます。

このクラスはスタティックなメンバしか保持していないので、インスタンスを生成する必要はありません。故、コンストラクタ、インスタンス変数、インスタンスメソッドは存在しません。

このクラスでは Point3 クラス を使用しています。

*注意* このクラスでは、主に色を扱いますが、色の指定として、16進数6桁のカラー文字列、又は Point3 クラスを使用します。故、以下 object と書いたときは string 又は Point3 クラスのことです。

使用例

var colors0 = Gradation.getColor( "ff0000" , "00ff00" , 16 );
    // colors0 に16段階の赤→緑へのグラデーションカラー値を代入します。
    // 中身は以下のようになります。
    // colors0[ 0] = "ff0000" ;
    // colors0[ 1] = "ee1100" ;
    // colors0[ 2] = "dd2200" ;
    // ...
    // colors0[15] = "00ff00" ;
    
var html_text = Gradation.getText( "GRADATION_TEXT" , "00ffff" , "ff00ff" , "ffff00" );
    document.write( html_text );
    // 水色→桃色→黄色とグラデーションする文字列 GRADATION_TEXT を HTML に書き出します。
    // → 実際の実行例

クラスメソッド

グラデーションカラー配列 : getColor
string[] getColor( object c0 , object c1 , number n );
string[] getColor( object c0 , object c1 , object c2 , number n );
グラデーションカラー値を内容とする配列を返します。

getColors( object c0 , object c1 , number n ) は c0 → c1 へと n 段階で変化するグラデーション配列を返します。

getColors( object c0 , object c1 , object c2 , number n ) は c0 → c1 → c2 へと n 段階で変化するグラデーション配列を返します。

引数を Point3 としても同じです。Point3 を色座標(R,G,B)と考え、グラデーションカラー配列を返します。
var colors0 = Gradation.getColor( "ffff00" , "00ffff" , 16 );
// colors0[0]  = "ffff00" ;
// colors0[1]  = "eeff11" ;
// colors0[2]  = "ddff22" ;
// ...
// colors0[14] = "11ffee" ;
// colors0[15] = "00ffff" ;

――――――――――――――――――――――――――――

var red   = new Point3( 255 ,   0 ,   0 );
var green = new Point3(   0 , 255 ,   0 );
var blue  = new Point3(   0 ,   0 , 255 );

var colors1 = Gradation.getColor( red , green , blue , 31 );
// colors1[0]  = "ff0000";
// colors1[1]  = "ee1100";
// ...
// colors1[16] = "00ff00";
// colors1[17] = "00ee11";
// ...
// colors1[29] = "0011ee";
// colors1[30] = "0000ff";
グラデーション文字列 : getText
string getText( string text , object c0 , object c1 );
string getText( string text , object c0 , object c1 , object c2 );
string getText( string text , object c0 , object c1 , number x , number y );
string getText( string text , object c0 , object c1 , object c2 , number x , number y );
グラデーション文字列を HTML 内に記述したいときに使用します。
戻り値は <span style="color:#ff0000;">あ</span><span style="color:#ee1100;">い</span>... という風に span タグの CSS 記述グラデーション HTML テキストになります。
x , y に関しては説明しにくいのですが、しいて書くなら、グラデーション文字列を x 行 , y 列書き出します。
Netscape4.x では書き出すとき不安定な部分があるので注意して下さい。
var html_text0 = Gradation.getText( "RED2GREEN" , "ff0000" , "00ff00" );
document.write( html_text0 ); // →実際の例

var html_text1 = Gradation.getText( "RED2GREEN2BLUE" , "ff0000" , "00ff00" , "0000ff" );
document.write( html_text1 ); // →実際の例

var html_text2 = Gradation.getText( "GOLD2SILVER_29 ", "ffd700" , "c0c0c0" , 2 , 9 );
document.write( html_text2 ); // →実際の例

メソッド一覧

Gradation クラスで使用できるクラスメソッドのリストです。
メソッド名説明
string[]getColorグラデーションカラー配列の生成
string[]getTextグラデーションカラーHTML文字列の生成

補足

■ こんな使い方もあり?( getObject メソッド )
Gradation クラスには getColor というメソッドがありましたが、実をいうと getObject というメソッドも存在します。
getColor では、戻り値は string[] でしたが、getObject は戻り値が Point3[] です。引数は getColor と全く一緒です。
このメソッドはグラデーション値を計算するのに、Point3 クラスを使うと楽だったために存在するメソッドですが、これはちょっとした使い方が出来ます(かも?笑)
グラデーションカラー値というのは所詮、R,G,B 要素に分解し、等間隔でカラー値を加えているだけです。

以下のプログラムを見てください。
var p0 = new Point3(  0 ,  0 ,  0 ); // 色と考えると #000000
var p1 = new Point3( 20 , 20 , 20 ); // 色と考えると #141414

var cs = Gradation.getColor( p0 , p1 , 20 );
    // cs の中身は以下のようになります。
    // cs[ 0] = "000000" ;
    // cs[ 1] = "010101" ;
    // cs[ 2] = "020202" ;
    // ...
    // cs[18] = "131313" ;
    // cs[19] = "141414" ;
この p0 , p1 を引数として、getObject を呼び出します。戻り値は Point3[] ですから、配列 os の中身は、x , y , z を有するクラスになります。
var os = Gradation.getObject( p0 , p1 , 20 );
    status = os[ 0].getX()+","+os[ 0].getY()+","+os[ 0].getZ(); // 結果は 0,0,0
    status = os[ 1].getX()+","+os[ 1].getY()+","+os[ 1].getZ(); // 結果は 1,1,1
    status = os[ 2].getX()+","+os[ 2].getY()+","+os[ 2].getZ(); // 結果は 2,2,2
    ...
    status = os[18].getX()+","+os[18].getY()+","+os[18].getZ(); // 結果は 19,19,19
    status = os[19].getX()+","+os[19].getY()+","+os[19].getZ(); // 結果は 20,20,20
何がいいたいかというと、このメソッドを使うと簡単に3次元空間の点から点への等ステップの座標計算が出来るということです。
勿論、x , y 座標だけ拾いだせば、2次元になるわけで、DHTML で直線アニメーションの座標に使えないかということです。例えば、
var sPosi = new Point3(  0 ,  0 , 0 );
var ePosi = new Point3( 50 , 40 , 5 );

var tmpCount =  0 ;
var divCount = 10 ;

var p = Gradation.getObject( sPosi , ePosi , divCount );

// この関数を呼び出せば、LAYER が 10 段階で、(0,0)から(50,40)へ移動します。
// しかも、その間に zIndex も 0 から 5 へ変化します。
function move(){
    if( tmpCount < divCount ){
        Elements["LAYER"].setPosition3( p[ tmpCount++ ] );
        setTimeout("move()",50);
    }
}
どうですか?こんな使い方もあります程度に、ね。getObject の引数に3つの点を取れば3点間の配列も生成できます。
僕は絶対こんな書き方はしませんが(おいっ)