2. グルグルの使用例いろいろ

デフォルトの呼び出し

<APPLET CODE="Guruguru.class" WIDTH=220 HEIGHT=220>
</APPLET>

パラメータを何も指定せずに呼び出すとデフォルトの値で表示されます。
パラメータには、セルの大きさ、形、縦横の数、色の数、色、色変化の度合い、色変化のスピード、背景の色、イメージの表示などが指定できます。
デフォルト時のアプレットの大きさは WIDTH=220 HEIGHT=220 です。
アプレットの大きさは、セルの大きさと個数に依存します。

セルの大きさと個数を指定する

<APPLET CODE="Guruguru.class" WIDTH=170 HEIGHT=130>
<PARAM NAME=cellwidth  VALUE="40">
<PARAM NAME=cellheight  VALUE="10">
<PARAM NAME=cellxmax  VALUE="4">
<PARAM NAME=cellymax  VALUE="3">

cellwidth, cellheight でセルの大きさを指定します。
cellxmax, cellymax でセルの個数を指定します。
例では、セルの大きさが cellwidth="40" で cellheight="10" です。
個数は横に cellxmax="4" で、縦に cellymax="3" としています。
他の設定はデフォルトの設定が使われます。

図１:セルの大きさと個数の指定
図01:セルの指定

これからアプレットの大きさが決まります。
幅は、cellwidth の幅のセルが cellxmax個並び、sellheight の高さのセルが1個ですから、
WIDTH は、(cellwidth * cellxmax) + cellheight
同様に、
HEIGHT は、(cellwidth * cellymax) + cellheight となります

色と色の変化の度合いを指定する

<APPLET CODE="Guruguru.class" WIDTH=180 HEIGHT=140>
<PARAM NAME=cellwidth  VALUE="40">
<PARAM NAME=cellheight  VALUE="20">
<PARAM NAME=cellxmax  VALUE="4">
<PARAM NAME=cellymax  VALUE="3">
<PARAM NAME=colormax VALUE="3">
<PARAM NAME=cellcolor1 VALUE="red">
<PARAM NAME=cellcolor2 VALUE="blue">
<PARAM NAME=cellcolor3 VALUE="yellow">
<PARAM NAME=darkstep  VALUE="10">         <PARAM NAME=darkstep  VALUE="30">
<PARAM NAME=brightstep  VALUE="10">       <PARAM NAME=brightstep  VALUE="70">
</APPLET>

上のアプレット指定で左側のアプレットが表示されます。右側は、その指定の一部を右側の赤い文字の指定に変えたアプレットです。
セルの色はアプレットの左上のセルから右上、そこから右下のセルの順に指定します。指定の数がそれより小さい場合は、その並びを繰り返して使います。残りの部分のセルの色はそこまでの指定の繰り返しになります。
画面のセルの半分まで指定でき、残りの半分はそのコピーになります。
パラメータ colormax に色の数を指定します。そして cellcolor1、cellcolor2 …にセルの色の並びを指定していきます。
black、blue、cyan、darkGray、gray、green、lightGray、magenta、orange、pink、red、white、yellow の 13色が使用出来ます。
上の例では colormax="3" の 3色を、cellcolor1="red"、cellcolor2="blue"、cellcolor3="yellow" に指定しています。
セルの個数(cellxmax, cellymax)が例のように 4, 3 なら、この合計の７に３色が繰り返えし使われます。画面全体ではこれを2度繰り返すので、数をうまく調整しないと、この例のように左上と右下で配色がくずれます。
ここで指定したセルの色が基準色になり、この色を基準に複数の明るい色と暗い色が作られます。だんだん暗くなっていって、最も暗くなった後にパッと明るくなるように表示されます。この色の変化の度合いを調整したい場合は、darkstep, brightstep を使います。
上のように 10, 10 なら、1番目のセルの色は、次のようにセットされます。

[0][0] = 255,30,30
[0][1] = 255,20,20
[0][2] = 255,10,10
[0][3] = 255,0,0
[0][4] = 245,0,0
[0][5] = 235,0,0
[0][6] = 225,0,0

真ん中の[0][3]が基本色で、上には RGB それじれ 255 を超えない範囲で +10 ずつ明るい色、下には 0 を下らない範囲で -10 ずつ暗い色が並んでいます。全部を同じ基本色で指定したとしても、半周分の色の変化が作られて、順にずれて表示していくので、ある瞬間で同じ色のセルは２つしか有りません。

セルの形、スピード、背景の色を指定する

<APPLET CODE="Guruguru.class" WIDTH=180 HEIGHT=140>
<PARAM NAME=cellwidth  VALUE="20">
<PARAM NAME=cellheight  VALUE="20">
<PARAM NAME=cellxmax  VALUE="8">
<PARAM NAME=cellymax  VALUE="6">
<PARAM NAME=cell  VALUE="3DRect">
<PARAM NAME=wait  VALUE="100">
<PARAM NAME=drawcolor  VALUE="cyan">

<APPLET CODE="Guruguru.class" WIDTH=180 HEIGHT=140>
<PARAM NAME=cellwidth  VALUE="20">
<PARAM NAME=cellheight  VALUE="20">
<PARAM NAME=cellxmax  VALUE="8">
<PARAM NAME=cellymax  VALUE="6">
<PARAM NAME=cell  VALUE="RoundRect">
<PARAM NAME=wait  VALUE="300">
<PARAM NAME=drawcolor  VALUE="pink">

セルの形はパラメータ cell で指定します。指定は、デフォルトの "Rect"、立体で表示される "3DRect"、角が丸く表示される "RoundRect" があります。例では上が "3DRect"、下が "RoundRect" です。
スピードは、色の変わる早さをパラメータ wait で指定することが出来ます。同じ色での待機時間なので小さいほど早いです。例では上が 100 下が 300 です。
背景の色はパラメータ drawcolor で指定します。同じく、black、blue、cyan、darkGray、gray、green、lightGray、magenta、orange、pink、red、white、yellow の 13色が使用出来ます。例では上が cyan 、下が pink です。
"RoundRect" でセルの角を丸くしたとき、セルの隙間に背景色が見えてしまいます。

背景にイメージを指定する


<APPLET CODE="Guruguru.class" WIDTH=180 HEIGHT=140>
<PARAM NAME=cellwidth  VALUE="20">
<PARAM NAME=cellheight  VALUE="40">
<PARAM NAME=cellxmax  VALUE="7">
<PARAM NAME=cellymax  VALUE="5">
<PARAM NAME=drawimage  VALUE="images/hana.gif">

背景にイメージを表示する事が出来ます。イメージの指定は、drawimage パラメータにイメージのファイルを指定します。
次の事に注意して下さい。セルによってイメージが隠れるので、大きいセルのときにはイメージ側に余白を作ります。イメージはその大きさに関係なくアプレットいっぱいに表示されます。セルの角が丸いとき、セルの隙間にイメージが見えてしまいます。この場合はイメージに余白を取り、余白を透明化するときれいに表示されます。

図２:アプレットに表示した花の画像"

間違いなどお気付きの事がありましたら hirose97@cg.netlaputa.ne.jp までメールを下さい。
ご感想もお待ちしています。なお、リンクは自由ですが出来ればお知らせ下さい。