「tmlib.js 怒濤の 100 サンプル!!」を試す その87

その87。

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

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

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
var SHAPE_NUM    = 64;
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);

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

今まで勉強した方ならピンとくると想いますが前回のその86とほぼ同じです。
fillRectからfillCircleに変わりランダムで取得する最小値が「 0 」ではなくなったことくらいですね。
分かる方は読み飛ばして下さい。

6行目

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

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そのものではテキストの部分、変数の部分とわけて記述しないといけないのでよく見間違いをする僕としては大助かりなメソッドです。

31行目

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

33行目

この行でやっと円を描画しています。
25、26行目でランダム値を取得した座標と定数で定義した円の大きさの値をパラメータとして指示し描画しています。
ここまでがfor文内の処理で1回ごとの流れになります。
終わったらまた24行目に戻り「 i 」の値が上限値に達するまで繰り返されます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です