その89。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「図形(上級)」の「たくさん図形を描画してみよう(星)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
様々な色の円が描画されたと思います。

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
var SHAPE_NUM    = 128;
var SHAPE_RADIUS = 32;

tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 黒でクリア
canvas.clearColor("black");

// ブレンドを乗算に設定
canvas.globalCompositeOperation = "lighter";

// 描画
for (var i=0; i<SHAPE_NUM; ++i) {
var x = tm.util.Random.randint(SHAPE_RADIUS, canvas.width-SHAPE_RADIUS);  // X 座標値
var y = tm.util.Random.randint(SHAPE_RADIUS, canvas.height-SHAPE_RADIUS); // Y 座標値
var hue = tm.util.Random.randint(0, 360);                    // 色相
var color = "hsl({0}, 50%, 50%)".format(hue);
var sides = tm.util.Random.randint(3, 8);
var sideIndent = tm.util.Random.randfloat(0.2, 1.0);
var angle = tm.util.Random.randint(0, 360);

// 塗りつぶしスタイルを設定
canvas.fillStyle = color;
// 塗りつぶし描画
canvas.fillStar(x, y, SHAPE_RADIUS, sides, sideIndent, angle);
}
});

今回もその86とほぼ同じで、星を描画する際に必要なパラメータを取得し設定する箇所が増えているだけです。

6行目

「 SHAPE_NUM 」という変数を定義し、「 128 」という数値を設定しています。
これは星を何個作るのかを決める数値です。

7行目

「 SHAPE_RADIUS 」という変数を定義し、「 32 」という数値を設定しています。
こちらは作成する星の大きさを決める数値です。

21行目

「透明度・合成」というカテゴリで勉強した合成タイプの設定をしている行になります。
その56で勉強した合成タイプを指示しています。

24行目

他のサンプルでも登場したfor文です。
繰り返し処理を行うものでしたね。
ですのでこの行を簡単に訳すならば
– 「 i 」を「 0 」と定義し、「 i 」が「 SHAPE_NUM 」の数値なるまで処理を繰り返しなさい –
という感じです。細かく説明はこちらを参照してください。
「 SHAPE_NUM 」は6行目で定義した「 64 」という数値が適用されますので64回for文内の処理が繰り返されるということになります。

25行目

コメントにX座標値とあるように「 x 」という変数に座標を格納しています。
この行はちょっとわかりづらいのですが、tmlib.jsでランダムクラスというものが定義されておりそのクラスを用いて乱数を取得しています。

tm.util.Random.randint(SHAPE_RADIUS, canvas.width-SHAPE_RADIUS)

「 tm.util.Random.randint(min, max) 」で最小値と最大値を指定して乱数を取得することができます。
これをサンプルであてはめてみると最小値は「 SHAPE_RADIUS 」で、最大値が「 canvas.width-SHAPE_RADIUS 」となっています。
四角形の時は最小値を「 0 」としましたが星の基準点は中心にありますので半径の分だけ動かさないと見きれてしまいます。
最大値のほうも同様ですね。数値に置き換えるなら「 32～432(465-32) 」間でランダム値を取得することになります。
「 canvas.width 」で横幅から「 SHAPE_RADIUS 」を「 – 」で引き算します。
何度リロードしても絶対外に描画されませんので試してみて下さい。
画面端にピッタリというのはありますけどね。

26行目

こちらも25行目と処理内容は同じです。
ただ25行目はX座標を決めていましたが、こちらはY座標だという違いだけです。

27行目

この行も基本的には25、26行目と同じで最小値と最大値を指定して乱数を取得しています。
0～360と決まっているので計算せずに値を直接指示しています。
コメントに色相とある通リ色を決める数値になります。

28行目

27行目て取得した色相の値を利用してHLSによる色を設定し「 color 」という変数に格納しています。
色の設定に続いて「 .format(hue) 」とありますが、これはformatの前に「 ｛｝ 」で括られている部分にformatの括弧内の変数を当てはめるというtmlib.jsのメソッドです。
文章だとイマイチわかりづらいのでリファレンスからサンプルを引用します。

 document.write("{0} + {1} = {2}".format(5, 10, 5+10)); // "5 + 10 = 15"
 document.write("rgb({r}, {g}, {b})".format({ // "rgb(128, 0, 255)"
 r: 128,
 g: 0,
 b: 255
 }));

上記の1行目の書き方を利用していることがわかりますね。
テキストとして出力するものの中に値や変数を使うことができて便利です。
従来のというかJavaScriptそのものではテキストの部分、変数の部分とわけて記述しないといけないのでよく見間違いをする僕としては大助かりなメソッドです。

29行目

「 sides 」直訳すると両側となりますがこちらもその20では「 頂点の数 」と表現していました。
3～8の間で値を取得していますので、その数だけ頂点を持つ星を生成するということになりますね。

30行目

「 sideIndent 」ですがその20で「 頂点間の凹み量 」と表現したものですね。
星の凹凸量をここで取得しています。

31行目

「 angle 」直訳すると角度ですがその20で「 傾き 」と表現していましたので以降は「 傾き 」と表記します。
この傾きは0～360度の範囲で値を取得するようにしています。
全く傾いていない状態から1回転した状態の範囲ということになりますね。

34行目

28行目で決定した色等をここで設定しています。
設定だけで描画はまだしていません。

36行目

この行で多角形を描画しています。
「 X座標 」「 Y座標 」「 大きさ 」「 頂点の数 」「 頂点間の凹み量 」「 傾き 」それぞれのパラメータを用いて星を描画しています。
ここまでがfor文内の処理で1回ごとの流れになります。
終わったらまた24行目に戻り「 i 」の値が上限値に達するまで繰り返されます。

Tweet