JavaScript
カラー　バブルス

---

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

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

255＝2⁸-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】
【●●●●●●●●●●●●●●●●】

赤の場合、赤（#ｆｆ0000）から白（#ｆｆｆｆｆｆ）へ変化させるには、Rの部分を固定し、G、B部分を変化させます。

【#ｆｆ0000→#ff1111→#ff2222→（略）→#ff9999→#ffaaaa→#ffbbbb→（略）→#ffffff】
【●●●●●●●●●●●●●●●●】

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

【#ff0000→#ee0000→#dd0000→（略）→#aa0000→#990000→#880000→（略）→#000000】
【●●●●●●●●●●●●●●●●】

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

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

上記において、赤色を例に挙げましたが、基本の色はR、G、Bが『ｆｆ』か『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>