JavaScript
カラー バブルス


【色について】
多くのプログラムソフトで、色を指定する場合、R(レッド)、G(グリーン)、B(ブルー)の数値で指定します。
例えば、HTML[Hyper Text Markup Language](一般的には、ホームページ製作に使われる)では、
『#●●◎◎○○』と言う表し方で色を指定します。●●がR(レッド)、◎◎がG(グリーン)、
そして、○○がB(ブルー)の各要素を指定し、色合い、鮮やかさ、明るさを表現しています。

Windows付属ソフトのMSペイントの「色の編集」→「色の作成」での色合い、鮮やかさ、明るさの
数値(0〜240、色合いは239)を見ると、その一定の法則性が理解できると思うのですが、
HTML言語では、頭に『#』を付け、各3要素の数値(0〜255)を16進数で指定します。

255=28-1と言うことで、256×256×256=16,777,216色の組み合わせがあるわけなのですが、
実現できる色は、ディスプレイの性能やソフトに依存?しています。

簡単な例として、RGBの各要素が一定の場合、黒→灰色→白を表現しているのですが、
色合い160、鮮やかさ0で一定で、後は明るさが0〜240で変わります(R=G=Bで変化)。
240を15等分し、その値を
0→16→32→48→64→80→96→112→128→144→160→176→192→208→224→240
と16づつ増加させると、R、G、Bの各値(色作成ウィンドウで調べる)は
0→17→34→51→68→85→102→119→136→153→170→187→204→221→238→255
となり、それを16進数に直します。
00→11→22→33→44→55→66→77→88→99→aa→bb→cc→dd→ee→ff

【#000000→#111111→#222222→(略)→#999999→#aaaaaa→#bbbbbb→(略)→#ffffff】


赤の場合、赤(#ff0000)から白(#ffffff)へ変化させるには、Rの部分を固定し、G、B部分を変化させます。

【#ff0000→#ff1111→#ff2222→(略)→#ff9999→#ffaaaa→#ffbbbb→(略)→#ffffff】


逆に、赤(#ff0000)から黒(#000000)に変化させるには、G、B部分を固定し、Rの部分を変化させます。

【#ff0000→#ee0000→#dd0000→(略)→#aa0000→#990000→#880000→(略)→#000000】


原色(黒→赤→白)の変化だけで、256+255=511段階の表現が可能ですが、
実際に、ディスプレイで視認できるのは、下に示した31段階くらいでしょう。


  色を指定する場合、文字でも指定可能(『red』『blue』『cyan』『white』・・・)ですが、
  プログラムで扱う場合は数値指定が必須です。


上記において、赤色を例に挙げましたが、基本の色はR、G、Bが『ff』か『00』かで、
白、黒を含め以下の8通りがあります。
            シアン  マゼンタ   ※黒は灰色で表現
#ffffff #000000 #ff0000 #00ff00 #0000ff #ffff00 #00ffff #ff00ff

【配列について】
javaScriptで配列を宣言する場合、

SampleArray = new Array;
   あるいは、  SampleArray = new Array( );
           SampleArray = [ ];

等で宣言(宣言の時にデータ代入も可)しますが、このままで使用した場合、
一次元配列とみなされます。では、多次元で使用するには、どのようにすればいいのでしょう。

配列の中に配列を入れることにより、それが可能になります。

SampleArray = new Array([ ],[ ],[ ],[ ]); //例 4次元配列
   あるいは、  SampleArray = [[ ],[ ],[ ],[ ]];

値を代入するときは、例えば、3列目の5番目に格納する場合、

SampleArray[2][4] = "SAMPLE"; // 0が先頭になる

と記述します。

今回のプログラムでは色の変化を6次元配列で宣言し、6色(黒、白以外)の
濃淡の変化を配列に呼び込みます。

頭の部分で、カラーの丸が、色の変化をしながら大きくなり、消える動きをさせているのですが、
以下、白、黒を除いた6通りの色の変化を使ったプログラムです。

<script type="text/JavaScript">
<!--

//ボールのカラー6色の濃淡のカラー番号を格納する配列(6次元)を宣言します
Bcolor=new Array([ ],[ ],[ ],[ ],[ ],[ ]);
//カラー番号のR、G、B部分に入れる文字を配列変数として宣言します
CF0=new Array;
CF1=new Array;

//黒→色→白への変化に対応するR、G、B部分に入れる文字(2種類)を配列に格納します
CF0[0]="55";CF0[1]="77";CF0[2]="99";CF0[3]="bb";CF0[4]="dd";
CF0[5]="ff";CF0[6]="ff";CF0[7]="ff";CF0[8]="ff";CF0[9]="ff";
CF0[10]="ff";CF0[11]="ff";CF0[12]="ff";

CF1[0]="00";CF1[1]="00";CF1[2]="00";CF1[3]="00";CF1[4]="00";
CF1[5]="00";CF1[6]="22";CF1[7]="44";CF1[8]="66";CF1[9]="88";
CF1[10]="aa";CF1[11]="cc";CF1[12]="dd";

//その値を6通り(6色)の色変化として、6次元配列に格納します
for(i=0;i<6;i++){
 switch(i){
  case 0:for(j=0;j<13;j++){Bcolor[i][j]=CF0[j]+CF1[j]+CF1[j];};break;
//赤の濃淡
  case 1:for(j=0;j<13;j++){Bcolor[i][j]=CF1[j]+CF0[j]+CF1[j];};break; //緑の〃
  case 2:for(j=0;j<13;j++){Bcolor[i][j]=CF1[j]+CF1[j]+CF0[j];};break; //青の〃
  case 3:for(j=0;j<13;j++){Bcolor[i][j]=CF0[j]+CF0[j]+CF1[j];};break; //黄の〃
  case 4:for(j=0;j<13;j++){Bcolor[i][j]=CF1[j]+CF0[j]+CF0[j];};break; //シアンの〃
  case 5:for(j=0;j<13;j++){Bcolor[i][j]=CF0[j]+CF1[j]+CF0[j];};break; //マゼンタの〃
 }
}

//カラーボール用の文字を16個、用意し、書き込みをします
for(i=0;i<16;i++){
document.write("<div id='myObjText"+String(i)+"'
style='position:absolute;height:30pt;font-size:12pt;color:#ffffff'>●</div>");
}

//ボールが出現する領域の幅と高さを決めます
Lw=document.body.clientWidth-100;
Lh=20;

//ボールの色、位置、変化(大きさ、色の濃淡)、最初の大きさに関する変数を配列として宣言
s=new Array;
rx=new Array;
ry=new Array;
k=new Array;
L=new Array;

//ボールの数(16個)だけ、それらの変数に値を格納します
//かつ、乱数を使用し、16個がランダムになるようにします
for(i=0;i<16;i++){
 s[i]=Math.floor(Math.random()*6);
 rx[i]=Lw*Math.random();
 ry[i]=Lh*Math.random();
 k[i]=0;
 L[i]=Math.floor(Math.random()*10)+3;
}

//タイマー関数で16個が違うタイミングで変化するよう、タイマー時間をずらし
//かつ、16種類の関数を呼び出すようにします
for(x=0;x<16;x++){
 window.setInterval("flip("+String(x)+")",16+4*x);
}

//以下、ループ関数を使用し、関数(16種類)を作成しています
for(j=0;j<16;j++){
 function flip(j){

//ボールのカラーを決めます
  document.all("myObjText"+String(j)).style.color= "#"+Bcolor[s[j]][k[j]];
//ボールのサイズを決めます
  document.all("myObjText"+String(j)).style.fontSize=String((Math.floor(j/4)+1)*k[j]+L[j])+"pt";
//ボールの位置を調整し、定点で拡大しているように見せます
  document.all("myObjText"+String(j)).style.pixelLeft = 35+rx[j]-k[j]*(Math.floor(j/4)+1)/2;
  document.all("myObjText"+String(j)).style.pixelTop =document.body.scrollTop+15+ry[j]-k[j]*(Math.floor(j/4)+1)/2;
  k[j]=k[j]+1;

//一定の間隔(配列変数k[ ]で制御)で次の動き、色へ変化するよう、変数を変えます
  if(k[j]==12){
   k[j]=0
   rx[j] =Lw*Math.random();
   ry[j]=Lh*Math.random();
   s[j]=Math.floor(Math.random()*6);
   L[j]=Math.floor(Math.random()*10)+3;
  }
 }
}
//-->
</script>